2016.12.05

1,813

サイトの文章が読みづらい!あの有名サイトのフォントは??

このエントリーをはてなブックマークに追加

SEOにも有効なテキストでの表記ですが、読みづらいと感じたことはありませんか??
サイトの印象にも関わってくるフォント。
有名サイトのフォントまわりの指定を集めてみました。

facebook

株式会社ヘノブファクトリー

 

まずは世界中にユーザのいるfacebook!

最近投稿の文字数が少ないとスマホのフォントサイズが大きくなることが話題になってますね...

バグか意図的なものかは不明ですが、ちょっと変わったことをしてしまうと

ユーザを戸惑わせることになることがわかります。

 

body{
 font-family: Helvetica, Arial, "hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif;
 font-size: 12px;
 line-height: 1.34;
}

twitter

株式会社ヘノブファクトリー(@henobufactory)さん

 

facebookと並んでユーザ数の多いtwitter。

twitterのほうがデフォルトのフォントサイズが大きめのようです。

 

body{
 font-family: Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"MS Pゴシック","MS PGothic",sans-serif;
 font-size: 14px;
 line-height: 18px;
}

ライブドアニュース

ライブドアニュース

 

ライブドアニュースは個人的に今回あげた中で一番読みやすい印象でした。

フォントは他のサイトと大体同じですが、文字サイズや行間が読みやすさに影響しているのかもしれません。

 

body{
 font-family: 'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',arial,sans-serif;
 font-size: 16px;
 line-height: 1.231;
}

antenna

キュレーションマガジン antenna[アンテナ]

 

antennaでは他の4サイトで使われていない游ゴシックが指定されているようです。

フォント1つで他のサイトとは違った印象になりますね。

 

body{
 font-family: Avenir,'Helvetica neue',Helvetica,'游ゴシック',YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',メイリオ,Meiryo,'MS Pゴシック',sans-serif;
 font-size: 1.4px;
 line-height: 1.6;
}

retty

Rettyグルメ[レッティ]

 

個人的にぐるなびや食べログよりも使っているretty。

一番見たい口コミの文字はline-height: 1.2くらいのようです。

口コミが読みづらいのでもう少し行間あけてもよさそうです。

 

body{
 font-family: 'Arial','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Meiryo','sans-serif';
 font-size: 13px;
 line-height: 1.5;
}

 

 

cssでbody{ /*ここに入れる*/ }でくくってあげれば大体設定できるはずです。

フォントの大きさ、行間を整えるだけで読みやすさが変わってくると思います。

有名サイトを参考に指定を見直してみてはいかがですか??

このエントリーをはてなブックマークに追加

ヘノブ編集部


この記事の投稿者:

次