読みやすいフォントの CSS 設定例

美しいフォントとは

昔から Windows のユーザでしたが、初めて Mac のフォントを見たときの衝撃は今でも忘れられません。Windows と比べて Mac のフォントの美しさは際立っていました。その美しいフォントは "ヒラギノ" と呼ばれ、Mac の中心的なフォントのひとつで、これ以上に美しい日本語のフォントは見たことがありません。

Windows と Mac ではフォントのレンダリング方法が異なるため、今日に至っても Windows のフォントが美しくない問題は解決されていません。しかし、Windows は Vista 以降から "メイリオ" と呼ばれるフォントが収録され、それまでの "MS ゴシック" や "MS 明朝" のフォントを置き換えることに一定の成果を挙げました。

さらに Windows 8.1 以降からは Mac (OS X Mavericks 以降) にも収録されている "游ゴシック" と呼ばれるフォントが収録され、今まで Windows と Mac で共通のフォントが存在しなかった問題を解決しました。この問題の解決は、ユーザの使用する OS によって Web サイトの表示が異なる悩みを抱える Web デザイナーの悲願でした。

^[1] 游ゴシック "中" の収録
Windows 10 以降、および Microsoft の公式サイトよりダウンロードできるフォントパックに収録されています。

ただし、游ゴシックは Windows と Mac の両方に収録されていますが、通常の状態では同じように表示されません。Mac に収録されている游ゴシックは "ミディアム" と "ボールド" の 2 種類に対して、Windows は "細字"、"標準"、"中"、"太字" の 4 種類になります。^[1] しかし、デフォルトで表示されるフォントは Mac が "ミディアム" で綺麗に表示されるのに対して、Windows は "細字" となり、かすれてしまって綺麗に表示されません。同じ表示にするためには CSS で "font-weight: 500;" を指定すると、Mac では "ミディアム"、Windows では "中" になります。

しかし、Windows 8.1 では上記の指定でも綺麗になりません。本来、CSS で "font-weight: normal;" を指定すると、"標準" の太さがマッチします。しかし Windows 8.1 では "細字" がマッチするため、綺麗に表示されません。この仕様は W3C の仕様と異なっており、Windows 10 からは改善されているため、バグであると考えられます。

CSS で font-weight を使わずに、font-family の中に太さを指定して揃える方法もあります。ただし、Windows の Firefox は font-family の中に太さを指定しても認識しない仕様であるため、@font-face を経由して指定します。

/*
  フォント名は Win と Mac で少しだけ異なる。
  Windows: "游ゴシック", "Yu Gothic"
  Mac: "游ゴシック体", "YuGothic"
*/

@font-face {
  font-family: "YuGothic M";
  src: local("Yu Gothic Medium"),
       local("Yu Gothic");
  font-weight: 500;
       /*
         Chrome 58.0.3029.110 (64-bit) では
         "Yu Gothic Medium" を認識しないバグあるため
         "Yu Gothic" と font-weight も併せて指定。
       */
}

p {
  font-family: "游ゴシック体", YuGothic, "YuGothic M", sans-serif;
}

美しいフォントは、可読性 (リーダビリティ) が高く、読みやすいために伝わりやすく、ユーザの誤読を防止できるため、ストレスを緩和できます。例えば、Web サイト以外でも高速道路標識には視認性に優れているヒラギノフォントが採用された標識の設置が進んでいます。

美しいフォントは書籍や Web サイト以外に、文字が使われるすべての用途に需要があります。遠くからの視認性、瞬間的に認識できる明瞭性、画像や他言語フォントとの親和性など、フォントにもデザインや品質の概念が存在します。品質の高い美しいフォントは、長い文章でも心地よく読めるため、ユーザビリティの根幹部分を担っています。

フォントはデザインのもっとも基本的な要素であるにも関わらず、Web サイトの特色によって採用するフォントの設定値が異なるため、明確な答えが存在しません。しかし、フォントの設定は何が最適解なのかは、しばしば議論の対象となっています。議論を難しくしている理由は、個人の好みもありますが、OS に収録されているフォントの違い、フォントの種類、サイズ、色、行間、文字間隔が相互に影響を与えるため、組み合わせが無数に存在するためです。これらの要素について、美しいフォントの設定例について考えていきたいと思います。

フォントの種類

Web ページに書かれたテキストを指定されたフォントで表示する方法は、2 つあります。ひとつは、デバイスに収録されているフォントを使用する方法、もうひとつは、デバイスに収録されていない Web フォントをダウンロードする方法です。

小さな iPhone にも数百種類のフォントが収録されており、CSS で何のフォントでテキストを表示するかを指定できます。OS や デバイスによって収録されているフォントが異なるため font-family には、そのことを考慮して設定しなければなりません。しかし、すべての OS や デバイスに収録されているフォントを把握することは難しいため、一般的には代表的なフォントをいくつか指定することになります。

font-family にはフォントをいくつも指定できます。フォント名に空白を含む場合は " や ' で囲む必要があります。Web ページが表示されると、CSS で指定されたフォントを左から順番にデバイス内に収録されているかを確認します。そして、最初にマッチしたフォントでテキストを表示します。

ただし、テキストに日本語が含まれる場合、マッチしたフォントに日本語フォントが含まれているかを確認します。もしも、マッチしたフォントに日本語フォントが含まれていない場合、日本語フォントを含むフォントを再探索します。そのため、英数字と日本語を別々のフォントで指定したい場合、英語フォントを先に指定する必要があります。 もしも、日本語フォントが先にマッチした場合、英語フォントも含まれるため期待した結果にはなりません。

body {
  /*  英数字はHelvetica、日本語は游ゴシックが適用される。 */
  font-family: Helvetica , "游ゴシック", sans-serif;
  
  /*
    以下の順番では、すべての文字に游ゴシックが適用される。
    font-family: "游ゴシック", Helvetica , sans-serif;
  */
}

汎用的な font-family には何のフォントを指定すれば良いかは、しばしば議論の対象となります。多くのフォントを選別することは難しいように思えますが、汎用的な指定であれば、それほど難しくはありません。なぜなら、多くのサイトで採用されている代表的なフォントがデファクトスタンダードとなっており、何百種類も考える必要がないからです。それでは、font-family には何が最適解なのかを考えていきましょう。

総称ファミリー

多くのサイトでは font-family の終端には sans-serif が指定されています。sans-serif は、総称ファミリー名と呼ばれるフォントのひとつで、ゴシック体を意味します。フォントファミリーに指定したすべてのフォントにマッチしなかった場合、標準で規定されているゴシック体のフォントが使用されるという意味になります。Windows ではメイリオや MS ゴシック、Mac ではヒラギノ角ゴシックになります。sans-serif は、一種の安全装置のようなもので、どのフォントにもマッチしなかった場合でも、ある程度まではフォントによるデザインが崩れることを防ぐことができます。sans-serif 以外にも、総称ファミリーには以下があります。

^[2] cursive による不具合
Linux の一部のディストリビューション、ブラウザ、または Version など一部の環境では、正常に表示されない不具合があります。

• sans-serif：ゴシック系のフォント
• serif：明朝系のフォント
• cursive：筆記体・草書体のフォント ^[2]
• fantasy：装飾的なフォント
• monospace：等幅フォント

body {
  font-family: "Helvetica Neue", 
               "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

body {
  font-family: -apple-system, BlinkMacSystemFont,
               "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

body {
  /*  Chrome 限定  */
  font-family: system-ui, sans-serif;
}

フォントのサイズ

結論から述べると、フォントサイズのベースは 16 px 程度が良いとされています。最適なフォントサイズを決定する要素は、ユーザの平均視力、テキストまでの距離、誤読率、最大読書速度などです。それらの要素を最大化する値は統計データから算出できます。インターネットを昔から利用しているユーザからすると、やや大きいように感じますね。

フォントサイズの変更は Web サイト全体に影響を与えます。そのため、最初に決めたフォントサイズを後から変更する場合、確認作業に多大なコストを割くことになります。フォントサイズはサイトの初期構築段階で決定し、仕様を凍結してしまいましょう。

フォントサイズのベースは 16 px であると前述しましたが、それは文章のフォントサイズになります。そのため見出しのフォントサイズはそれ以上に大きく設定し、逆に注釈などのフォントサイズは小さく設定する必要があります。

フォントのサイズ指定は、CSS が登場するまでは font タグで指定していました。1996 年に CSS が登場すると font タグは非推奨要素となり、CSS でのサイズ指定の利便性と相まって font タグは次第に Web から姿を消しました。

しかし、CSS でフォントサイズを指定できるようになって利便性は高まりましたが、新たな問題も発生しました。その問題とは、"単位" の問題です。CSS でフォントのサイズを指定できる単位の種類はいくつも用意されており、以下があります。

• px：ピクセルで指定。
• pt：ポイントで指定。(1pt = 0.0353 cm = 1.33px)
• pc：パイカで指定。(1 pc = 0.4233 cm = 16px)
• in：インチで指定。(1 in = 2.54 cm = 96px)
• cm：センチメートルで指定。
• mm：ミリメートルで指定。
• em：基準のフォントサイズを 1 として相対値で指定。
• ex：英字の "x" のサイズを 1 として相対値で指定。
• %：基準のフォントサイズを 100 として相対値で指定。
• rem：root (html) タグのフォントサイズを 1 として相対値で指定。
• vw：ブラウザの横幅を 100 として相対値で指定。
• vh：ブラウザの高さを 100 として相対値で指定。
• vmin：ブラウザの横幅・高さの小さい方を 100 として相対値で指定。
• vmax：ブラウザの横幅・高さの大きい方を 100 として相対値で指定。

単位以外にもキーワード指定として、以下があります。キーワードでのフォントサイズを指定する方法は 7 段階の大きさがあり、medium を標準サイズとして 1.2 倍のサイズで上下します。また、サイズの段階を変更するキーワードの "smaller" と "larger" もあります。

• xx-small：9.26 px
• x-small：11.11 px
• small：13.33 px
• medium：16 px
• large：19.2 px
• x-large：23.04 px
• xx-large：27.65 px
• smaller：フォントサイズが 1 段階下がる
• larger：フォントサイズが 1 段階上がる

単位の問題は、フォントサイズの指定について誤った認識を与える原因になっています。例えば px でフォントサイズを指定した場合、正常に反映されているように見えます。しかし、フォントファミリーによっては数 px の誤差が発生し、厳密な意味でサイズが異なる場合があります。また、アンチエイリアスの処理は OS やブラウザによって異なるため、デバイス毎に見え方が少しだけ変わってしまいます。

フォントの色

多くのサイトでは白色の背景に、黒色の文字のオーソドックスな組み合わせになっています。しかし、背景は白色 (#FFF) ではなくオフホワイトであったり、文字は黒色 (#000) ではなくグレーであったりするかもしれません。白色と黒色では、コントラストが強すぎて目に負担がかかるため、少しだけコントラストを下げている場合があります。

Google、Facebook、Amazon、Yahoo! のカラーコードを調べてみると、背景は #FFF ですが、文字色は #222 ～ #555 のようにコントラストを下げていることが分かります。ただし、すべての文字に同じ色を設定しているのではなく、見出しや説明文などの文字の役割や場所によって濃さを変えています。

文字色については、フォントの大きさや太さなど黒の面積が広いほど、色味を認識されやすくなります。そのため、見出しなどの比較的大きな文字には #222 の濃いカラーコードを指定し、文章などの比較的小さい文字には #333 の薄いカラーコードを指定すると良いでしょう。

フォントの色には、文章の黒色以外にテキストリンクの色も非常に重要な意味を持ちます。なぜなら、テキストリンクの色は世界的に青色で統一されており、ユーザも青色の文字を見るとリンクであると認識してしまうからです。もしも、テキストリンクの色を赤色にしようと考えているのであれば、考えを改めるべきです。ユーザは、他のサイトとは異なる変化を嫌うため、文字の色が違うだけでもストレスを感じてしまいます。

テキストリンクの青色は黒色とは異なり、色味の範囲が非常に大きいため最適なカラーコードを探し当てることは非常に困難です。例えば Google は #1111cc、Youtube は #0033cc、Wikipedia は #0645ad などです。

テキストリンクの青色は広範囲ですが、基本的に方針としては 2 つしかありません。つまり、濃い色として文章とリンクを目立たなくさせるか、薄い色として文章とリンクを明確に区別するかです。ユーザビリティを考慮するならば、リンクを明確に区別する後者の方が良いとされます。しかし、すべてのテキストリンクを青色にすると、ページに占める青色の面積が多くなるため、内部リンクは黒色、外部リンクを青色としているケースもあります。

フォントの文字間隔

フォントの文字間隔は、英語では "カーニング"、"トラッキング"、日本語では "文字詰め／詰め文字" とも言います。厳密には、カーニング、トラッキング、文字詰めはそれぞれ効果が異なります。

カーニングは、文字と文字の間との調整が可能で、文字の右側だけが狭くなります。トラッキングは、テキスト全体での文字間隔を調整し、カーニングとは異なり一括で指定することができます。文字詰めは、一文字の前後を詰める場合に使用します。そのため、CSS におけるフォントの文字間隔は、テキスト全体を調整するためトラッキングが正しい用語になります。

文字間隔を調整することで文字と文字の間隔を等しくしたり、均等に割り付けたり、改行位置を調整したりできます。例えば、以下の例では上がカーニングを解除した文字、下がカーニングを設定した文字になります。"A" の右上のスペースに "V" の左上が入り込むように調整されています。

文字間隔の調整を行わない場合は、文字間に不自然なスペースが入り込み違和感を感じます。しかし、適切に文字間隔の調整が施されたフォントでは文字間のスペースの面積はほぼ均等になり、引き締まった印象を与えることができます。文字間隔の調整が行われていない状態のことを "ベタ組み" とも呼びます。

文字間隔の調整は、ユーザの可読性を向上させる一方で、OCR などの光学文字認識ソフトウェアの文字境界の判別を困難にさせるため、認識精度の低下を招くこともあります。

フォントの文字間隔の調整は letter-spacing プロパティで行います。その他にも CSS3 からは日本語のフォントでも自動で調整してくれる font-feature-settings や font-kerning プロパティが使用できます。

body {
  /* 絶対値指定 */
  letter-spacing: 1.5px;
  
  /* 相対値指定 */
  letter-spacing: calc(1px - .0625em);
  
  /*
    OpenType フォントのプロポーショナルメトリクスの機能の有効化
    font-feature-settings:[機能名] [有効可否]
    機能名：
      palt (プロポーショナルメトリクス)
      pkna (プロポーショナルかな)
      etc https://helpx.adobe.com/jp/typekit/using/open-type-syntax.html
    有効可否：
      1：有効 (初期値)
      0：無効
  */
  font-feature-settings: "palt" 1;
  
  /*
    OpenTypeフォントのメトリクスカーニング機能の有効化
    normal：メトリクスカーニングの実施
    none：カーニングを行わない
    auto：用字系にあわせてユーザエージェントが判断 (初期値)
  */
  font-kerning: auto;
}

ただし、font-feature-settings や font-kerning の設定は、游ゴシックやヒラギノ角ゴには適用されますが、メイリオのフォントには適用されません。 これは、メイリオのフォントがプロポーショナルメトリクスの機能や、メトリクスカーニング機能を持っていないためです。また、これらのプロパティは新しい機能であるため、メイリオ以外にも意図通りに動作しない場合があります。

フォントの行間

フォントの行間はサイズや色、文字間隔の調整に比べると、あまり意識されることはありません。なぜなら、極端な行間でもない限り、ユーザの可読性に悪影響を与えるインパクトが他の設定値と比べて低いからです。しかし、ブラウザのデフォルト設定では行間が詰まっているため、やや読みにくい設定になっています。

読みやすい行間は、一般的に文字の半分から 1 文字程度が良いとされています。つまり、line-height の設定値は 1.5 ～ 2.0程度ということになります。多くのサイトは、この範囲に収まっていると思います。

文字にはベースライン、アセント、ディセントなど、いくつかのラインがあります。

行間を設定する場合、ベースラインとフォントサイズも合わせて考慮しましょう。実際には設定値を微調整しながら結果を確認することになりますが、行間の考え方も覚えておくと便利です。

body {
  line-height: 1.75;
}

line-height には他のプロパティとは異なり、一般的には単位を付けません。なぜなら単位を付けた場合、下位の要素には絶対値として継承されてしまうからです。そのため、下位の要素のフォントサイズが小さい場合でも、親要素と同じ行間になるため不自然に大きい行間になってしまいます。単位を付けない場合、各要素のフォントサイズに最適化された設定値が相対値として継承されるため、自然な行間になります。このような理由から、line-height には単位を付けていません。なお、単位を省略した場合、em で解釈されます。

まとめ

上記をまとめると、以下の CSS ができ上がります。ご参考になれば幸いです。

body {
  /*  フォントの種類  */
  font-family: -apple-system, BlinkMacSystemFont,
               "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  
  /*  フォントのサイズ  */
  font-size: 16px;
  
  /*  フォントの色  */
  color: #333;
  
  /* 文字間隔の調整の設定 */
  letter-spacing: 1.5px;
  
  /* 行間の設定 */
  line-height: 1.75;
}