タイポグラフィとマークアップ
さいしょに
この記事ではタイポグラフィの側面からマークアップの Tips を紹介します。
予め述べますが、一般的なサイトではあまり役立つ情報はありません。
なぜならブラウザがよしなに初期値を調整していることが多いためです。
しかし「タイトルやマーカーではちょうどいいが、本文に用いられる数字だけ浮いてみえる。」「同じフォントを用いたいがh2以上だと不自然に見えるので letter-spacing を詰めた」といったニッチなケースでたまに出番があります。
1. 文字
タイポグラフィは文字、文章、段落の3要素に関与しますが、フォント(文字)は文字通り文字に影響するプロパティです。
a. 理想的なフォントサイズの模索
デバイスによる違い
フォントサイズは 16px(ブラウザ標準)が理想とされていましたが、レスポンシブが浸透した今はどのデバイスでも 16px が最前とはいえなくなってきました。
もっとも 16px が美しく表示されるのは小型タブレットですが、これは活字印刷された媒体と大きさが近いからでしょう。
PCでは、モバイルより焦点距離が遠くなることを挙げて 18px (1.125rem)が最適だろうと言われています(Web Typography, Richard Rutter, 2017)。たとえば Note はこの基準でフォントサイズを決定しているようです。
いっぽうでモバイル、特にスマートフォンでは文字サイズは 20pxを目安にすべきだ、という主張もあります(Your Body Text Is Too Small, Christian Miller, 不明.)。スマホを”健康的な”距離で見ようとするとどうしても文字は小さく見えるためでしょうか。 状況による違い
たとえば Zenn では PC 16px, SP 15px です。これは技術記事が集まりやすいという性質上、フォントサイズが大きくなって行数が膨らむ弊害が他のサービスより大きいためでしょう。メールアプリの Spark も、アプリにしては小さめの 16px です。これらの例ではスクロールせずに見られる範囲が広いことが重要です。
一方で 字幕需要の高そうな動画サービスである TED の字幕では、1.44rem (およそ 23px)が採用されています。短い時間に情報を得なければならないので大きく表示されます。
なだらかなサイズ曲線
見出しのフォントサイズ、とくに h1 など大きなものは rem と vmin を合わせることでなだらかなサイズ変更が可能です。
たとえば Figma上で PC 72px, SP 36px と提示されている h1 に対して、タブレットや微妙な大きさの窓での閲覧時でも自然な大きさで表現できます。
font-size: calc(XXXrem + YYYvmin)
b. OpenType フォント機能の利用
詳細は以下の記事にまとまっていますが、いくつか(ニッチなプロパティの中では)利用頻度の高そうなものをピックアップします。
MDN Web Docs
font-variant-numeric
数字は基本的に文字に合いません。ただし font-variant-numeric でマシにはできます。
0とOを区別したい場面で slashed-zero を利用
本文で邪魔な数字を下げるために oldstyle-nums を指定し、見出しでは lining-nums でベースラインへ
価格など数字が主役の場面で可読性のため tabular-nums を指定
など様々な値があります。
font-variant-ligatures
fi ftt tt fi
見出しなどで合字を無効にしたい場合は none を指定します。
2. 文章
a. 文字同士の間隔
Web Typography ( Richard Rutter, 2017 ) では可読性と美観を損ねるため letter-spacing を利用すべきでない、といった旨を書いています。
font-kerning は文字の間を字体それ字体に定義された内容で詰める/空けるプロパティで、デフォルトでは文字サイズが小さい時(ブラウザ依存)のみ無効になるようです。
ブラウザやサービスにもよりますが、本文で無効にし、見出しで有効にするような設定をしたうえで、スポットでカーニングを調整することで可能な限り対応していきたいです。
b. その他の Tips
リストの文章が複数になったときマーカーの下に回り込んでしまう現象:ul にマイナスの text-indent を設定して li の margin-left で打ち消す
古典的なオーダーリスト:li::before にマイナスの margin-left を設定して本文幅から外に出す(SP主流になって廃れた?)
3. 段落
a. 行間
通念上、欧文では 1.4 ~ 1.7、和文では 1.6 ~ 2.0 が最適と言われています。この幅を決定付けるのはサービスの性質という大きな括りよりは文章のある場所による影響が大きそうです。たとえば記事本文において 日経 1.8、Zenn 1.9、Note 2.0 でほぼ差はありません。しかし記事一覧で本文の走りが掲載されるようなケースでは 日経 1.65、Note 1.5 と小さくなる傾向があります。またもちろん見出しの line-height も小さめです。
意図して崩す場合も
5Gの速さ。スマートフォンで最速のA14 Bionicチップ。
エッジからエッジまで広がるOLEDディスプレイ。耐落下性能を
4倍向上させるCeramic Shield。どのカメラでも使えるナイトモード。
そのすべてを2つの完璧なサイズで。iPhone 12、登場
この iPhone 12 のキャッチフレーズはなんと line-height: 1.186 ~ 1.2318 しかありません。
文字を太く大きくぎっしりと詰めて、まるでモザイク画像のように設置された文章は、
他の画像に負けないインパクトを持っています。
タイポグラフィはあくまで歴史が証明した「読みやすさ」の探究であって、
要約すると「すごい」としか書いていないことがわかり切っている今回のようなケースでは、
読みやすさより全体とのバランスが重視されるのかもしれません。
b. ハイフネーションと改行位置
段落に改行はつきもので、改行と切っても切り離せないのがハイフネーションです。ただし和文には存在するもののメジャーではないのでここでは割愛します。もし活用するなら -ms-hyphenate-limit-chars -ms-hyphenate-limit-last -ms-hyphenate-limit-zone などが参考になるはずです。
本題は改行位置です。
和文で単語の途中で改行されたくない場合 一応 span, wbr がありますが信頼性は高くありません。見出しに用いる場合はなまじ span を使うより word-break: keep-all; かつ <wbr /> を指定する方が確実で良いでしょう。 ­
tamuraryoya.icon 圧の強いPR
c. その他の Tips
字下げ:text-indent
水平要素:hr要素(フルーロンとかに使いやすいです)
ドロップキャップ::first-of-type::first-letter に initial-letter (float とかで無理やり実装しなくてよくなります)
nishiyamayudai.icon これ知らなかった、オシャレ欧文でよく見るので試してみたい
引用:backquote 要素(before や after に ch でマージンをつけて調整すると崩れにくいです)
4. webフォントとパフォーマンス
力尽きた。あとでかく
Font-weight で 400(: normal) と 700(: bold) 以外を指定すると不要に読み込まれる可能性があるとか、webフォントを何種類も使うと悲惨なことになるとか、一部の文字だけ呼び出すとか
フォントの呼び出しサイズは ICS の人とかのツイートのリンク貼り付ける
tamuraryoya.icon Google Fonts と同じ手法でサブセット化するのは試したことあります
質問
日本語と英語が混在しているときに line-height を別指定する方法はあるのか?
tamuraryoya.icon 数字だけ別フォントを指定する、みたいなことをCSSだけでできますっけ?