ウェブタイポグラフィの習作
このウェブサイトを作るときに「よみやすくしたい」と思いました。ウェブタイポグラフィについて調べて、試してみました。
フォントサイズの比率
大見出しのフォントサイズを本文のフォントサイズの2倍にしようと思いました。そうすると、カラム幅が本文のフォントサイズの倍数（偶数）であるときに、おさまりがいいからです。したがって、フォントサイズに「1対2」の数値が欲しくなります。
まずは1.25倍の比率で計算された数値を丸めてみました。丸めている時点で感覚的です。さらに、スマートフォン向けにちょうど良い小さいフォントサイズが手に入れられませんでした。
そこで、調和数列をつかう画期的なアイデアを利用させていただきました。実装は以下のとおりです。
--font-size-xl: calc(1rem * 8 / 4);
--font-size-l: calc(1rem * 8 / 6);
--font-size-base: 1rem;
--font-size-s: calc(1rem * 8 / 9);
--font-size-xs: calc(1rem * 8 / 10);
例えば、基準のフォントサイズが16pxのときは、以下のフォントサイズになります。スマートフォンはこれで間に合いそうです。
- 32px
- 21.3px
- 16px
- 14.2px
- 12.8px
本文のフォントサイズ
本文のフォントサイズは最大で24pxになります。カラム数は1つ、1行の文字数を30文字から36文字、カラム幅を640pxから800pxぐらいにしよう、と考えていました。目安となるカラム幅の約数を見ながら、相性の良さそうな数値を試していました。
最大で24pxにしたのは自分の作業環境にも由来します。27インチ5Kのディスプレイを奥行き80cmのデスクで使っています。解像度は2560×1440です。この環境で16pxの長文を読むとき、無意識にトラックパッドのピンチアウトで拡大していることに気づきました。測ってみると、だいたい21pxに拡大していました。
ディスプレイが大きくなれば目との距離が離れます。すると文字が小さく見えてしまいます。だから長文を読むときは拡大してしまいます。大きい4Kのテレビが普及したように、24インチから32インチぐらいの4Kディスプレイが普及する気がします。
拡大しなくてもよいフォントサイズだと、どんな使用感になるんだろう？という興味があり、少し大きめですが24pxを試してみることにしました。
流動的なフォントサイズ
目と画面の距離に応じて変化する文字の見え方を調整するために、ビューポートのサイズから利用端末と使用状況を決めつけています。clamp()関数を使った基本フォント・サイズの決定が画期的だと思い、利用させていただきました。実装は以下のとおりです。
html {
font-size: clamp(
100%,
(100vmin - 516px) * (8 / (1280 - 516)) + 100%,
100% + 8px
);
}
例えば、ブラウザに設定されたフォントサイズが16pxならば、最小16pxから最大24pxまで変化します。差分は8pxです。
516pxはブレイクポイントです。ブラウザに設定されたフォントサイズが16pxのときに、1行30文字表示できるビューポートが516pxです。1行30文字表示できないビューポートのときに最小値が適用されます。
vwではなくvminを使っています。vwだと、幅は広いけど高さが低い画面サイズのときに文字が大きくなって、表示される情報が減ります。例えば横向きのスマートフォンなど。
1280はブレイクポイントです。ビューポートの短い方が1280以上だと、フォントサイズが最大になります。1280は感覚的な数値です。自分の環境だと、ブラウザのビューポートは1300×1300ぐらいで見ていることが多いです。このときに最大値が欲しかったのです。いくつか別の解像度で具合をチェックしてみて、1280という数字にとりあえず落ち着きました。たぶん、タブレット、ラップトップ、フルHDで18pxから21pxぐらいのフォントサイズになる感じです。
行の長さ
1行30文字を基準にしました。和文の横組みは、長くて30文字から40文字以内にしたほうがよい、という情報を多く見かけました。
いろいろなウェブサイトの1行の文字数をスクリプトでかぞえました。35文字から40文字ぐらいが多かったです。家にある横組みの本をひっぱり出してみました。技術書で40文字程度、文庫で36文字、単行本で32文字などがありました。読み物としては32文字程度が読みやすいな、と個人的に感じました。
Mediumはフォントサイズ21pxでカラム幅680pxなので、和文だと32文字相当です。ただし、和文を優先した設計ではないと思います。 32文字は結構思い切っているように感じましたが、これぐらいでいいのかもな、と感じました。
あとは大日本印刷の読書アシストをはじめて見た時に刺激を受けました。そのときに『ラプンツェル』を最後まで読みました。変な気分になりながらも、読みやすい気がしました。いま確認してみたら1行が30文字程度でした。
カラム幅
カラム幅はmax-width: 30remです。本文フォントサイズの倍数です。大見出しの倍数でもあります。
見出しの行長
記事タイトルである大見出しは、1行15文字を目安にしました。『Yahoo!ニュース』の「トピックス」が約15文字で『NHKニュース』が約30文字でした。主要な検索エンジンで表示される文字数は30字程度です。現実的にも30字あれば事足りる気がします。
文字詰め
文字詰めは特にしていません。見出しでfont-feature-settingsにhaltを指定して約物を調整しているだけです。見出しをpaltで詰めてletter-spacingで広げようと思いました。しかし、paltが無効な場合にletter-spacingだけが無駄に効いてしまうパターンがあるので、やめました。大見出しと本文のフォントサイズがカラム幅の約数であるため、おさまりは良くなりました。
行の高さ
行の高さは2分4分アキを出発点にして、4の倍数にしようと考えていました。例えば、フォントサイズが24pxならline-height: 2.0で48pxです。フォントサイズが16pxならline-height: 1.75で28pxです。
行の高さを4の倍数にする考え方はアトラシアンデザインシステムを参考にしました。ただし、フォントサイズを流動的にしたので、4の倍数ではなくなりました。line-heightを調整するのは面倒でやめました。実装は以下のとおりです。
:root {
--line-height-base: 1.75;
--line-height-tight: 1.3125;
}
@media (min-width: 32em) {
:root {
--line-height-base: 2;
--line-height-tight: 1.5;
}
}
1行の長さが30文字より短くなる場合、バランスをとるために行の高さを狭くしています。
バーティカルリズム
本文の行の高さを基準値として、縦方向の余白に使用しています。1行分や0.5行分の高さを使用しています。それぞれのフォントサイズに対して行の高さを調整していませんが、例えばフォントサイズcalc(1rem * 8 / 9)ならば、9行ごとにリズムが合います。調和数列を使ったフォントサイズ便利です。
フォントの選択
body要素のフォントファミリ指定はsans-serifのみです。コントロールを手放しました。macOSはブラウザによって標準フォントが違います。SafariはHiragino Sansなので相対的に太く見えます。太字のfont-weightだけ調整することを考えましたが、結局なにもしないことにしました。
禁則
家にあるエッセイ、小説、技術書などの本を見ていると、縦組みも横組みも弱い禁則ばかりでした。レイアウトが個性的なエッセイとタイポグラフィに関する本は強い禁則でした。慣習に倣ってline-break: strictは見送りました。
さいごに、記事本文に登場していない、とても参考になった書籍やウェブサイトの一覧です。