ページ

2012/12/22

[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ!

追記記事を書きました

【決定版】僕の考えた最強のfont-family指定 | DevAchieve

元記事ここから

俺のためにWeb開発者は俺にとって読みやすいフォント指定をするのだ!
指定方法は下にあるぞ!

新規でサイトを制作するのに基本のフォント指定を持っていなかったので
色々調べたり、このブログのフォント指定を変更してみたりしたら
実は Arial より Verdana のほうが見やすいことがわかってしまった。
さすがMicrosoftがコンピュータ用ディスプレイ上での視認性向上のために
作ったフォントだ!Verdana - Wikipedia

フォント周りのオススメの指定

追記記事により良い指定を載せたのでこちらは掲載終了しました。

font-family めっちゃ長い!

何故かと言えば環境によっては指定したフォントがインストールされていない可能性があるから。
だから指定したいフォントを優先順位つけて記述する。左にあるフォントが一番優先順位が高い。

余談だけどfont-size(文字サイズ)とline-height(行の高さ)はTwitterの指定と同じなので個人的に読みやすい。

どうしてこのfont-familyの指定なのか

英数字は欧文フォントに任せたほうが綺麗なので和文フォントよりも前に書く。

Verdana は Arial に比べて小さい文字でも潰れにくくて綺麗だったので
このブログも Arial から Verdana に乗り換えた。

日本語表記のフォントやスペースを含むフォントはクォーテーションで囲む

invalid property valueと怒られたくなかったらシングルクォートかダブルクォートで囲むんだ!

Macユーザーのためにヒラギノを先に書く

Macにはメイリオがデフォルトでは入っていないのだけど
Office for Mac を入れるとメイリオがインストールされるので
メイリオが先に書いてあるとメイリオで表示されてしまう。

Windowsでヒラギノが入っているとアンチエイリアスがかからなくて汚くなるらしいけど
gdippとかのアンチエイリアスをかけてくれるソフトを入れていると綺麗に表示されるらしいので
Windowsでヒラギノをインストールする人はそういうソフトを使ってもらうことにする。

俺はWindowsにヒラギノが入っていないので関係ない。
むしろOffice for MacをMacに入れているのでヒラギノが先がいい。メイリオ嫌いじゃないけど。

和文フォントの日本語表記と英語表記について

ブラウザの種類やバージョンによっては日本語表記と英語表記のどちらかしか解釈できない奴がいる。
メジャーなブラウザの最新版なら日本語表記だけでも大丈夫らしいけど一応両方書く。

sans-serifとは

総称ファミリと呼ばれるもので、フォントのカテゴリみたいなもの。
指定したフォントがひとつもインストールされていなかった場合は
環境依存のフォント指定になってしまうのでせめてカテゴリ指定しておくためのもの。
どんなのがあるかや、フォントがどのように分類されるかは総称ファミリ名分類のフォント名一覧が見やすい。

フォントについてもっと詳しく知りたいならウェブにおけるフォントのヒントが良い。

CSSでのフォントの指定方法についてもっと詳しく知りたければW3C CSS Fontsのページを読もう。

おまけ

たまに見るCSSのfontプロパティの指定。|| は順不同。[]? は中身を省略可。忘れるのでメモ。
font: [font-style || font-variant || font-weight]? font-size[/line-height]? font-family;