WEBデザインをする上でフォントは重要なデザイン要素です。Sans系のフォントを使用するとカジュアルな感じに、Selif系のフォントを使用するとフォーマルでクラシカルな感じになります。デザインの美しいWEBサイトを見るとどのようなフォントを使用しているのか気になるものです。今回はWEBサイト上で使用されているフォントを調べる方法についてお伝えします。
目的に応じてフォントを使い分ける
例えば、下記のように読者に長文を読ませたい場合、タイトルは太字のSans、本文はSelifを使用するとデザインが統一されて読みやすくなります。
What font
What fontはChromeストアで無料で配布されているChrome Extensionです。
上記ChromeストアからExtensionを導入するとGoogle Chromeの右上にWhat Fontのアイコンが表示されます。アイコンをクリックして調べたいフォントの上をクリックするとフォントの種類やCSS設定を確認することができます。
Fount
WhatFontはGoogle Chromeでしか動作しませんが、Fountはブックマークレットなのでどのようなブラウザからでも使用することができます。
FountのWEBサイトにアクセスし、Fountのボタンをブックマークにドラッグして保存します。
Fountのブックマークレットをクリックし、カーソルを知りたいフォントの上でクリックするとフォントの種類や設定が画面右上に表示されます。
まとめ
WEBデザインを行う上でフォントは重要なデザイン要素です。優れたWEBデザインを見たときは、どのようなフォントが使われているのか調べて、WEBデザインの勉強に役立てることができます。