WEBサイトで使用されているフォントをチェックする方法

featured-image.png

WEBデザインをする上でフォントは重要なデザイン要素です。Sans系のフォントを使用するとカジュアルな感じに、Selif系のフォントを使用するとフォーマルでクラシカルな感じになります。デザインの美しいWEBサイトを見るとどのようなフォントを使用しているのか気になるものです。今回はWEBサイト上で使用されているフォントを調べる方法についてお伝えします。

sans-selif.jpg

目的に応じてフォントを使い分ける

例えば、下記のように読者に長文を読ませたい場合、タイトルは太字のSans、本文はSelifを使用するとデザインが統一されて読みやすくなります。

What font

 2017-10-04 8.42.17.png

What fontはChromeストアで無料で配布されているChrome Extensionです。

上記ChromeストアからExtensionを導入するとGoogle Chromeの右上にWhat Fontのアイコンが表示されます。アイコンをクリックして調べたいフォントの上をクリックするとフォントの種類やCSS設定を確認することができます。

 2017-10-04 8.55.05.png

Fount

WhatFontはGoogle Chromeでしか動作しませんが、Fountはブックマークレットなのでどのようなブラウザからでも使用することができます。

FountのWEBサイトにアクセスし、Fountのボタンをブックマークにドラッグして保存します。

 2017-10-04 9.03.25.png

Fountのブックマークレットをクリックし、カーソルを知りたいフォントの上でクリックするとフォントの種類や設定が画面右上に表示されます。

 

まとめ

WEBデザインを行う上でフォントは重要なデザイン要素です。優れたWEBデザインを見たときは、どのようなフォントが使われているのか調べて、WEBデザインの勉強に役立てることができます。

Tags:

©2018 Bridge System Co., Ltd.

Bridge System Co., Ltd.

Log in with your credentials

Forgot your details?