「このフォントを真似したい」
「ここに使われているフォントを調べたい」
Web上で気になるフォントがある時に役立つ拡張機能「WhatFont」をご紹介いたします。ワンタッチでフォントタイプやサイズ、ウェイト（太さ）、行間などが一気にわかります。
目次
「WhatFont」のインストール
Chromeウェブストア内の公式ページの「Chromeに追加」から、WhatFontをインストールできます。
「WhatFont」の使い方
「WhatFont」をインストールすると、気になるWebサイトですぐに使えます。
▲会員制サイトがつくれるWordPressテーマ「SHIPS」での例
上記のように右上の拡張機能のボタンから「WhatFont」を起動してください。
画面上に大きな変化はありませんが、右上に「Exit WhatFont」と表示されると起動されている状態です。あとは、気になるフォントの箇所にカーソルを持っていきましょう。
対象のフォントに関する次の情報が一挙に表示されます。
- Style
- Weight
- Size
- Line Height
- Color
「Line Height」は行間ですが、数値で表示される仕様です。単にコピペするだけでは、同じ見え方にならない場合があります。同じフォントでも、文字サイズが変われば行間も変わるからです。
次のようなツールで倍率に変換するのがオススメです。
>>line-height に使用する計算 | 計算が苦手な文系のための コーディング単位計算ツール
今回の例では、文字サイズが38px、line-heightが53pxなので、倍率は1.395になります。
この行間を真似したいときは、四捨五入して、line-height: 1.4と設定すればOKです。
フォントの種類によって文字間や行間なども微妙に異なります。Webサイトの「何か見え方が違う」というような微妙な違和感は、フォントを調べることで解決できるかもしれません。
「WhatFont」を使う上での注意点
拡張機能自体の操作は簡単ですが、次のようなフォントの特性を押さえておくことで混乱を防げます。
- 和文/欧文で適用されるフォントが異なる
- 複数指定されているフォントの優先度
- 閲覧デバイスによってフォントが異なる
和文/欧文で適用されるフォントが異なる
例えば、下記のように表示されていますが、正確にはこの和文テキストに「Arial」というフォントは適用されていません。
Arialは欧文用のフォントですので、和文には適用されていないわけです。和文には和文用のフォントのみが適用されます。
複数指定されているフォントの優先度
和文/欧文で適用されるフォントが異なるので、実際に適用されているフォントは「Hiragaino Sans」になります。2つ目に指定されているフォントです。
“Hiragino Kaku Gothic ProN”, 游ゴシック、
YuGothic, Meiryo, sans-serif;
上記のように指定されている場合、左側の方が優先度が高いです。和文フォントの中で最も優先度の高い「Hiragaino Sans」が適用されているということです。
閲覧デバイスによってフォントが異なる
最後に注意しておきたいのは、閲覧するデバイスによってフォントが異なる点です。
iPhoneやAndroid、WindowsやMacなど。閲覧するデバイスによって表示されるフォントが異なる場合があります。そのデバイスに「指定のフォントがインストールされているかどうか」によって左右されるからです。
例えば、Androidには明朝体はインストールされていません。Webサイト側で明朝体を指定しても、Androidではゴシック体で表示されます。それ故に、似ているフォントなどを複数指定して対策します。
したがって、「WhatFont」で表示されるフォントの情報が同じでも、閲覧デバイスによって適用されるフォントが異なる可能性があるわけです。全ユーザーの環境で、必ずしも同じ見え方になっているとは限らない点に注意しておきましょう。
まとめ：フォントの特性を押さえて活用しよう
Webサイト上でサクッとフォントを調べられるChromeの拡張機能「WhatFont」をご紹介いたしました。
気になるフォントの情報をすぐに確認できます。フォントの特性さえ押さえておけば、美しいフォントの情報を参考にして活用できますね。
コメント