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

公開日:
更新日:
12,253Webデザイン

美しいフォントとは

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

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

Windows/メイリオ
Windows/メイリオ

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

Windows/游ゴシック
Windows/游ゴシック
close button [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;
}
游ゴシックを font-weight を使わずに揃える例

美しいフォントは、可読性 (リーダビリティ) が高く、読みやすいために伝わりやすく、ユーザの誤読を防止することができるため、ストレスを緩和することができます。例えば、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 には何が最適解なのかを考えていきましょう。

ゴシック体 vs 明朝体

フォントの選定で最初に決めなければならないのは、ゴシック体か明朝体のどちらにするべきかという問題です。筆記体、草書体、装飾系のフォントを除けば、フォントは大きく分けてゴシック体か明朝体のどちらかになります。どちらのフォントを使用するかで、ユーザが受ける印象はまったく違うものになります。

ゴシック体は、装飾性を排しているため視認性に優れ、タイトルなどの見出しによく使われます。また、ディスプレイ上で表示する場合は、解像度の関係で文字サイズが小さい場合でも、明朝体に比べて可読性が損なわれにくいため、Web では一般的にゴシック体が採用されています。しかし、ゴシック体は本来、漢字の多い文章や、長い文章には向いていません。そのため、小説や新聞などの紙媒体では、明朝体が採用されています。高解像度のデバイスが普及している今日でさえ、ゴシック体が一定の地位を確立しているため、テキストを明朝体で表示すると違和感を感じます。明朝体の装飾が潰れてしまう問題が解消されているにも関わらず、多くのサイトではゴシック体が採用されています。

明朝体は、紙媒体における文章で多く使われ、小さい文字においても視認性に優れます。また、ゴシック体とは異なり高級感を演出することが可能で、しばしばデザインとして見出しに使われることもあります。美しいフォントと表現されるフォントは、ほぼ明朝体に属します。ただし、Web では前述の通りゴシック体が一般的であり、明朝体が採用されているサイトは少数派です。

紙媒体では他の追随を許さない明朝体ですが、Web に限って言えばゴシック体を採用するべきだと考えます。高解像度のディスプレイやデバイスが普及していても、ユーザは変化を嫌います。そのため、読みやすい明朝体よりも慣れているゴシック体がユーザに好まれるでしょう。

代表的なゴシック体として、Windows では "メイリオ" や "游ゴシック"、Mac では "ヒラギノ角ゴ" になるでしょう。Windows には "MS ゴシック" のゴシック体も昔から収録されていますが、もはや時代遅れであるため避けた方が良いでしょう。"メイリオ" と "游ゴシック" のどちらを選択するかは、以下の理由から "メイリオ" を推奨します。

  • 游ゴシックが収録されていない Windows 7 を使用しているユーザが今でも相当数存在する。
  • 游ゴシックの太さやアンチエイリアスを調整しても Windows では Mac ほど綺麗に表示されない。

特に游ゴシックが収録されていないユーザが多く存在している点は致命的です。対応策として、游ゴシックとメイリオの 2 種類を指定する方法もありますが、メイリオに寄せて最適化した方が良いと考えます。なぜなら 2 種類のフォントを指定すると、確認する作業も 2 倍に増えてしまうためです。

Web フォント

Web フォントとは、OS に収録されていないフォントでもダウンロードして利用できるフォントのことです。Web フォントは CSS 3.0 から実装された機能で、Google は 2010 年に "Google Web Fonts" サービスを開始しました。この機能やサービスが画期的な点は、OS やブラウザによって収録されているフォントが異なっていても、同じフォントでデザインできるようになったことです。従来では、同じフォントでデザインする場合、使用できるフォントが限定的であったため、大きな制約となっていました。

ただし、Web フォントには致命的な弱点があります。アルファベット、数字、記号であれば、100 種類程度のフォントデータしかないため、ダウンロードにも時間はかかりません。しかし、日本語はひらがな、カタカナ、常用漢字だけでも 3,000 種類もあるため、フォントデータのサイズは非常に大きいものになります。そのため、フォントデータのダウンロードに時間がかかり、ページの読み込みが遅延してしまいます。

ページの読み込みを高速化するために、テキストに書かれた種類の文字データだけを含んだフォントの "サブセット" を作成し、データサイズを軽量化する技術もあります。特に日本語は文字数が多いため、このような工夫で Web フォントを利用している場合があります。将来的には通信技術の発達により、日本語のような大きいフォントデータのダウンロードも時間がかからなくなるかもしれませんが、現状では Web フォントを利用する場合は英数字フォントに限定した方が良いでしょう。

2017 年 7 月時点ではまだ試験段階ですが、Google は日本語のフォントデータがページの読み込みを遅くする問題点の解決に取り掛かっています。以下のサイトでは、日本語のフォントを試験的にではありますが、提供を行っています。このような取り組みが実を結べば、Windows 環境でも Mac のように美しいフォントでテキストを読める日が来るのかもしれません。

総称ファミリー

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

close button [2] cursive による不具合
Linux の一部のディストリビューション、ブラウザ、または Version など一部の環境では、正常に表示されない不具合があります。
  • sans-serif:ゴシック系のフォント
  • serif:明朝系のフォント
  • cursive:筆記体・草書体のフォント [2]
  • fantasy:装飾的なフォント
  • monospace:等幅フォント

font-family の設定例

font-family に設定する代表的なフォントはそれほど多くありません。しかし、Windows 環境においても "メイリオ" と "游ゴシック" のどちらを選ぶかの論争があるように、絶対的な正解はありません。以下は、font-family の設定例の一例です。

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

Helvetica は非常に美しいフォントですが、Apple の最新システムフォントである "san francisco" を利用する場合は、"-apple-system" を指定します。ただし、Chrome や Opera では "-apple-system" の指定では有効にならないため、"BlinkMacSystemFont" を指定する必要があります。このフォントが適用されるには、OS X El Capitan、または iOS 9 以降である必要があります。

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

また、Chrome 限定ですが、"system-ui" を指定しても Mac ならば "san francisco" を利用することができます。"system-ui" は OS のシステムフォントが使用されるプロパティ値なので、Mac のシステムフォントである "san francisco" が出力される仕組みです。Windows では "Segoe" と "Yu Gothic UI" が使用されます。

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

フォントのサイズ

結論から述べると、フォントサイズのベースは 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 つしかありません。つまり、濃い色として文章とリンクを目立たなくさせるか、薄い色として文章とリンクを明確に区別するかです。ユーザビリティを考慮するならば、リンクを明確に区別する後者の方が良いとされます。しかし、すべてのテキストリンクを青色にすると、ページに占める青色の面積が多くなるため、内部リンクは黒色、外部リンクを青色としているケースもあります。

フォントの文字間隔

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

カーニングの比較例
カーニングの比較例

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

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

フォントのカーニングは letter-spacing プロパティで行います。その他にも CSS3 からは日本語のフォントでも自動でカーニングしてくれる font-feature-settingsfont-kerning プロパティが使用することができます。

body {
  letter-spacing: 1.5px;
  
  /*
    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-settingsfont-kerning の設定は、游ゴシックやヒラギノ角ゴには適用されますが、メイリオのフォントには適用されません。 これは、メイリオのフォントがプロポーショナルメトリクスの機能や、メトリクスカーニング機能を持っていないためです。また、これらのプロパティは新しい機能であるため、メイリオ以外にも意図通りに動作しない場合があります。

フォントの行間

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

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

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

Typography Line Terms
Typography Line Terms

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

font-size と line-height
font-size と line-height
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;
  
  /*  フォントの色  */
  font-size: #333;
  
  /* カーニングの設定 */
  letter-spacing: 1.5px;
  font-feature-settings: "palt" 1;
  font-kerning: auto;
  
  /* 行間の設定 */
  line-height: 1.75;
}
フォントの設定例
 ページトップに戻る