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;

4 件のコメント :

  1. このコメントは投稿者によって削除されました。

    返信削除
  2. Windowsユーザーですが、Arial指定Verdana指定はやめてほしい。
    単にSans-serifとしてあれば良い。

    Sans-serifならば、実際にどのフォントで描画するかはブラウザ設定でユーザーが選べる。
    Arial等指定されてしまうと、それができない。
    Arialは和文フォントと高さもウェイトも揃わず、ガタガタになる。非常に見苦しい。

    メイリオやMS PゴシックもWeb閲覧には使いたくないフォント。これも指定されると面倒。
    ヒラギノなどはそれに比べればずっと見やすいが、英字の幅が広いので文章によっては微妙となる。
    結局、ユーザーの選択を尊重してSans-serifとするのがもっとも良い。
    GmailやGoogleReaderもArialが先頭に出ているが、本気で勘弁してほしい。

    返信削除
    返信
    1. 最近のブラウザはユーザースタイルシートの読み込みに対応しているので
      !important指定でユーザーの好きなフォントが指定できます。

      カスタム スタイル シートを使って Web ページの書式を設定する | マイクロソフト アクセシビリティ http://www.microsoft.com/ja-jp/enable/products/ie8/webstyle.aspx
      旧館:thikasa note: 続 Chrome でフォントを強制指定する方法 http://thikasanote.seesaa.net/article/169261446.html
      Firefoxでユーザスタイルシート(ユーザCSS)を利用する方法 - 大人になったら肺呼吸 http://d.hatena.ne.jp/replication/20100509/1273330929
      Safari のユーザースタイルシートを書いてみた | うどん県で働く Web ディレクターの日記 http://bowz.info/1697
      ユーザースタイルシート - Opera Wiki http://ja.opera-wiki.com/User_CSS

      この記事は「ぼくのかんがえたさいきょうのfont-familyしてい」で、フォントの好みはユーザー次第なので
      ユーザースタイルシートでやみさんの好きなフォント指定をしてください。

      削除
    2. この件について、ブログ記事を書きました。
      お時間ありましたらお読みください。コメントも歓迎します。
      (先に書いておきますと、僕の考えは変わっていません)

      http://kirmav.blogspot.jp/2012/12/cssfont-family.html

      削除

タグ(RSS)

ブログ アーカイブ