CSSのフォント指定に関する考察　2017年夏

前田大地

2017年08月10日

時代は変わり、CSSまわりはIE10以下ですら考慮する必要がなくなりました。ウェブ制作者として嬉しい限りです。長年ウェブ制作者を悩ませてきたCSSでのフォント指定も、少しずつ答えが見えてきたかもしれません。今回は、CSSのフォント指定についてのお話です。

フォントファミリー
ウェブフォント
- 基本形
- ウェブサービスの利用
フォントサイズ
- 基本形
行間
字間
まとめ

フォントファミリー

CSSのフォントファミリーの指定は、制作者によってパターンが非常に多いです。けっこういい加減な記述をしているサイトもよく見かけます。基本形をまとめてみましょう。

最小版

font-family: sans-serif;

すべてをブラウザのデフォルトフォントに任せる、制作者にとって理想的な記述です。ユーザーがMacならこれで何の問題もないでしょう。WindowsではMS Pゴシックを標準にしているブラウザが多いため、実際にはほとんど採用されない書き方でもあります。

通常版

font-family: 'Hiragino Kaku Gothic ProN', 'メイリオ', sans-serif;

WindowsでMS Pゴシックだと嫌だ！という場合は、メイリオを追加してあげましょう。Macでメイリオになるのを防ぐために、更にヒラギノを先頭に追加します。

San Francisco

font-family: -apple-system, 'BlinkMacSystemFont', 'Hiragino Kaku Gothic ProN', 'メイリオ', Sans-Serif;

San Franciscoは、MacやiOS端末のシステムフォントで「小さな文字サイズでも見やすい」先進的なフォントです。ただし、小さい文字であれば日本語のほうがつぶれやすいのは明白です。日本語中心のサイトでわざわざ指定する必要があるかは分かりません。

游ゴシック

font-family: 'Hiragino Kaku Gothic ProN', '游ゴシック', 'メイリオ', sans-serif;

通常版のメイリオを游ゴシックに置き換えたパターンです。游ゴシックは、Win、Macの両方にインストールされているフォントとして注目されています。しかし、そもそもwin7に游ゴシックはインストールされていませんし、シェアの高いモバイル端末も同様です。しかも、WinとMacではインストールされている太さが異なります。現時点では、メイリオの代替として使用するのが無難です。本当に見た目を統一したいのであれば、Webフォントを使うべきでしょう。

殺し合いの螺旋から俺は降りる！

Webフォントでnoto sansを使いましょう。見た目もそう悪くありません。最近では、案外これが有力な選択肢なんじゃないかと思えるようになってきました…。

Google Fonts + 日本語早期アクセス

フォント名の表記について

フォント名の表記は、日本語表記と英語表記があります。OSやブラウザによって認識できるものが違うので、両方表記することも多いです。WinとMacで表記名が異なるフォントもあります。超ざっくり言えば、Macは英語、Winは日本語で記述しておけば大体認識されます。超ざっくりですけどね。

数年前に書いた記事ですが、考え方は同じなので参考にしてください。

CSSのfont-family指定に関する考察 2014年版

ウェブフォント

ウェブフォントを使用するCSSの記述は以下の通り。

基本形

@font-face {
  font-family: 'example';
  src: url('example.woff2') format('woff2'),
       url('example.woff') format('woff');
}

h1 {
  font-family: 'example', sans-serif;
}

@font-faceで、フォント名を登録して、使いたい箇所にfont-familyで登録名を指定します。フォントファイルの形式はいろいろありますが、woff、woff2を押さえておけば問題ないでしょう。

少し前の記事ですが、こちらもどうぞ。
CSSのWebフォント指定に関する考察 2016年版

ウェブサービスの利用

ウェブフォントを提供するサービスを利用する手もあります。ライセンスも明確ですので、自前でフォントファイルを用意するよりも色々な意味で手軽なのではないでしょうか。

フォントサイズ

CSSのフォントサイズ指定は、現在「rem」を使用することが多いです。htmlタグに基準となるサイズを絶対値で指定して、それ以外の箇所は相対値を指定するのがミソ。「rem」は、「％」や「em」に比べて、入れ子になっている箇所のサイズ計算を気にする必要がないため、CSSのモジュール化にも相性バッチリです。

基本形

html {
  /* 基準となるサイズ */
  font-size: 10px;
}

body {
  font-size: 1.6rem; /* 16px */
}

例えばブレイクポイントを768pxに設定したレスポンシブの場合、

html {
  font-size: 9px; /* sp基準値 */
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 768px) {
　　html {
　　  font-size: 10px; /* pc基準値 */
　　}
}

body {
  font-size: 1.6rem;
}

h1 {
  font-size: 2.4rem;
}

こんな感じで、htmlタグの基準サイズだけ調整してあげれば、他の要素は相対的にサイズが変わります。とっても合理的。

行間

CSSで行間を指定するときはline-heightを使用します。あえて単位をつけないことで、子要素でも自身のfont-sizeを基準とした相対的な高さが確保されます。逆に単位を付けると、絶対値が子要素に継承されます。

html {
  font-size: 10px;
  line-height: 2; /* 相対値で指定 */
}

body {
  font-size: 1.6rem; /* line-heightを指定しなくても相対値が引継がれる */
}

個人的には1.5だと若干詰まった感じがするので、1.75もしくは2くらいを目安に指定することが多いです。

字間

字間の自動カーニングには、CSS3のfont-feature-settingsを使います。

font-feature-settings: 'palt' 1;

上記を指定すると、フォントの中に含まれるカーニング情報によって、適切に字詰めされます。ただし、カーニング情報がないフォント（メイリオなど）では字詰めされません。日本語では全角の「」や（）などの約物がよく使用されると思います。特に先頭に約物がある場合、これらの余計なスペースを詰めてくれるため、キレイに揃って見せることができます。

letter-spacing: 0.1em;

字間を調整したい場合にはletter-spacingを使用します。

個人的には、font-feature-settingsでカーニングを調整すると、字間が詰まるため目が疲れます（締まって見やすい、という人も多いですが）。その上で、letter-spacingを設定してゆったりとした字間に調整することもできますが、Windowsで主流のメイリオでは、letter-spacingだけ有効になり字間が開きすぎてしまう・・・あ、そうか、だからWinでは游ゴシックを積極的に使う意味があるのか。なんだか納得。…ということなのですが、当サイトでは、まだカーニングは使用せずに様子見の段階です。