Espied カスタム:フォントについて検討する

前回は、ランディングページの投稿リストを整えて、大まかに全体のテイストを整えてみました。

今回はフォントをちょっとイジってみましょう。

明朝(Serif:セリフ)に挑戦してみるか

好き嫌いが分かれるトコロだけど、今回は Serif で遊んでみましょう。

日本語サイトはゴシック(Sans-Serif:サンセリフ)やたら多いですが、英文サイトでは Serif体が多く使われています。本来、明朝体は読みやすいフォントです。書籍ではゴシック体だけで構成されたものは無いでしょう。

WEBサイトで明朝体が敬遠されてきた理由は、おそらく、実際に酷い見栄えだったからでしょう。でも、最近では充分に使えるぐらいに進化してきたのではないでしょうか。

今回はWEBフォントはやめときます

WEBフォントでスタイリッシュにキメたい衝動に駆られますが、今回はやめときます。無難、快適、読みやすく・・・を目指しますから、デメリットを超えるほどの必要性は無いとします。
(また今度挑戦することにします)

  • 7行目:比較的インストールされている游明朝体(YuMincho)を指定
  • 8行目:明朝体が適用されると、やはり少し弱い感が否めません。悩みどころですが 500(400がnomalにあたります)としてみました。
  • 9行目:近年ではWEBのフォントサイズは以前より大きい傾向です。14-16pxあたりがトレンドみたいです。
  • 10行目:行間ですね。1.2-2の間が読みやすいようで、英文では1.46がおススメのようです。色々試してみて全体のバランスを見ながら決めると良いでしょう。
  • 18行目:タイトルはゴシックで。個人的には Roboto が好きなので優先順位を上げています。
  • 19行目:本文の明朝とのバランスで煩くないよう、細くしています。

ジャンプ率

「ジャンプ率」とはフォント間のサイズの比率のことで、適正なジャンプ率はメリハリを生みます。特にWEBサイトは流し読みされる利用シーンが多いので、リズムのあるジャンプ率は読者が必要な情報を発見しやすくするでしょう。

「大見出し」を 38px 前後に設定するのが現在の主流のようです。本文が 14-16px あたりが主流だとすると、大見出しは 2.5rem 前後(2.5倍程度のサイズ)ということになります。ページのタイトルを大見出しとして、このサイズを設定してみます。

そのほかの見出し…例えば本文集の H 要素ですね。これは 20-32px で設定されることが多いようです。例えば本文中の H1 を 32px(2.1rem)とするのがソノマンマですが、大見出しとのジャンプ率が低くメリハリに欠けると感じました。
ですから少し大見出しとのジャンプ率を広げて、27px(1.8rem)とし、H2-H5は均等のジャンプ率で振ってみました。

文字詰め

最近、font-feature-setting というCSSプロパティが使える(?)ようになりました。対応ブラウザもモダンなものならサポートされている様子です。

利用できる条件は、OpenTypeフォントであることとプロポーショナルメトリクス情報が含まれていることの2点です。有名なフォントでいうと「ヒラギノ角ゴシック体」や「ヒラギノ明朝体」「游ゴシック体」「游明朝体」「Noto Sans CJK JP」で利用できます。

font-feature-setting の仕様については「Adobe:CSS での OpenType 機能の構文(PDF)」が詳しいです。

記事本文の行間については、試行錯誤しながら決定しています。

これで正解というものはない

セオリーやガイドラインがすべてではなく、どうやったらWEBサイトが快適に(読みやすく)なるかという視点で試行錯誤を繰り返してみましょう。WEB上でのこれらの表現は、いまだ進化し続けていますから。

次回は、実際に使ってみて、気づいた点を微調整します。