XserverのWebフォントを実際のサイトデザインで比較できるデモを作ってみました

Webフォントといえば、Web制作の現場ではGoogle Fontsを使うことがほとんどだと思います。

私自身も普段はGoogle Fontsを使うことが多く、Xserverが提供しているWebフォントについては、実際に使ったことがありませんでした。

また、制作案件の中でデザイナーから指定された経験もほとんどありません。

ただ、XserverにもWebフォント機能が用意されており、「実際に使うとどんな印象になるのだろう？」と気になりました。

そこで今回、XserverのWebフォントを実際のサイトデザインで比較できるデモサイトを作ってみました。

デモサイトはこちら

デモサイト

http://demo03.ichikawa-webdesign.com/

デモサイトの上部のボタンをクリックすると、サンプルサイト全体のフォントが切り替わります。

単純な「あいうえお」の比較ではなく、

• ファーストビュー
• 見出し
• 本文
• ボタン
• カードUI

など、実際のWebサイトに近い状態で比較できるようにしました。

フォント単体ではなく、「サイト全体の空気感」がどう変わるかを確認できるようにしています。

今回掲載したフォントについて

今回のデモでは、

• 明朝体：4種類
• ゴシック体：5種類

を掲載しました。

Xserverには他にも装飾系や筆文字系などの書体もありましたが、選択肢が多すぎると比較しづらいと感じたため、今回は実務で使いやすそうな書体に絞っています。

また、今回確認した範囲では、和文フォントが中心のラインナップになっていました。

日本語サイトとの相性を意識したサービスなのかな、と感じました。

実際に切り替えてみると印象がかなり変わる

実際に比較してみると、フォントだけでもサイト全体の印象がかなり変わります。

特に日本語サイトでは、見出しや本文の雰囲気が大きく変わるため、フォント選定は重要です。

また、フォント一覧だけを見るよりも、実際のサイトデザインで確認した方が違いを掴みやすいです。

まとめ

XserverのWebフォントは、普段Google Fontsを使うことが多いWeb制作者にとって、意外と触れる機会が少ない存在かもしれません。

今回のデモサイトが、Webデザイン時のフォント選定や比較の参考になれば嬉しいです。

今後も、制作現場で気になったことや実際に試したことを、こうした検証コンテンツとして公開していこうと思います。