これが最強の日本語Webサイトの汎用的な`font-family`だ

日本語Webサイトで汎用的で使いやすいフォントの指定をしたい。 Webフォントはあまり入れたくないが、見やすさとトレードオフして好みで使う。

プロポーショナルフォント

ヒラギノ角ゴを使いたい場合は Hiragino Maru Gothic ProN の代わりに Hiragino *Kaku* Gothic ProN にする。

みんなの文字(minmoji) はとても見やすいが有料フォント。 バナーを貼ればWEBフォントは無料で使える。

font-family:
  'みんなの文字ゴStd R2', minmoji,
  -apple-system, BlinkMacSystemFont, 'Lucida Grande', 'Segoe UI',
  'Hiragino Maru Gothic ProN', 'メイリオ', Meiryo,
  sans-serif, Helvetica, Arial;

游ゴシック体を使いたい場合は font-familyにChromeでも読みやすい游ゴシックを指定する方法 - Qiita を参考にするとよい。細すぎて苦手なので私は使わない

等幅フォント

font-family:
  MeiryoKe_Gothic, Meiryoke_Console,
  'Source Code Pro', Consolas, Monaco, Menlo, monospace;

MeiryoKeが入っているならそれを表示する。 Source Code Proは好みで、入れたいならGoogleFontsなどから読み込む。

<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
Share
関連記事