フォント組み合わせ
フォントを重ねて一つの font-family にし、和欧混植の段落がどう見えるか確認しましょう。ブラウザは文字ごとにリストの「最初にその字を含むフォント」を使うため、並び順が欧文と日本語の字形を直接左右します。
ウェイト
ライブプレビュー
デザイン Design は旅 Journey、タイポグラフィ Typography は文字に 0123 の個性を与える。
並び順の比較
同じ文章を二つの並び順で、違いを見てみましょう。
現在の順
逆順
生成された CSS
なぜ並び順で変わる？
- ブラウザは各文字を描画する際、font-family リストを左から右へ見て、その字を含む最初のフォントを使います。
- 日本語フォントは欧文グリフも内蔵していますが、専用欧文フォントほど洗練されていないことが多い。そこで和欧混植では「欧文フォントを先、日本語フォントを後」が定石です：英数字はきれいな欧文、日本語は自動で日本語フォントにフォールバックします。
- 日本語フォントを先頭に置くと、英数字はそのフォントの欧文グリフ（多くは硬く、全角幅のことも）になり、差がはっきり出ます。
- 最後に汎用フォールバック（sans-serif など）を必ず添え、どの環境でも表示できるようにしましょう。