神は文字に宿る！意外と知らないCSSのフォント設定8選

こんにちは。フロントエンドエンジニアの藤川です。

Webサイトには画像や動画、音声など色んな要素がありますが、情報を届けるのはやっぱりテキスト。フォントや行間、文字サイズをちょっと調整するだけで、読みやすさもデザインの印象もガラリと変わります。

この記事では、普段あまり意識しないテキスト周りのCSSプロパティにスポットを当てて、その使い方と効果をシンプルにまとめました。普段のコーディングにサッと取り入れて、テキスト周りをアップデートしてみてくださいね。

font-display

font-displayは、Webフォントの読み込み状況に応じてテキストの表示を制御できる機能です。

Webフォントが読み込まれるまでの間に文字がチラつくFOUT（Flash of Unstyled Text）や、逆に何も表示されないFOIT（Flash of Invisible Text）といった現象の対策として活用できます。また、LCP（Largest Contentful Paint）の改善にも効果があります。

なお、Google Fonts など、テキストの表示遅延（FOIT）を防ぐ目的からfont-display: swap が指定されることが推奨されている場合もあります。

font-kerning

font-kerningは文字通り、フォントをカーニング（文字詰め）できるプロパティです。

日本語フォントでこちらのプロパティに対応しているものは少ないですが、英字フォントであれば対応しているものも多く、WebながらDTPのような文字詰めを実現可能です。

また、日本語フォントでも後述のfont-feature-settingsを組み合わせることで、カーニングを有効にできるケースもあります。

font-feature-settings

OpenType フォントには、文字組みやタイポグラフィを制御する多くの機能が含まれており、それらを CSS から指定できるのが font-feature-settings です。

ここでは、特に日本語環境で実用性の高いタグをいくつか紹介します。

text-underline-offset

text-decoration: underlineを指定したとき、下線の位置を調整することができるプロパティです。

p {
 text-decoration: underline;
 text-underline-offset: 10px; // 下線を下に10pxずらす
}

text-transform

text-transformは、文字の種類を変換できる機能です。アルファベットをすべて大文字にしたり、先頭だけ大文字に変換するような処理を行うことが可能です。

ruby-position

ruby-positionは、rubyタグで指定したルビの位置を調整することができるプロパティです。

ルビを文字の上にふるか、下にふるかを設定できます。

font-variant-ligatures

組版においては複数の文字を合体させて、1文字として表示することを合字（リガチャ）と呼びます。

font-variant-ligaturesを指定することで、英字フォントに合字（リガチャ）を設定することが可能です。

text-emphasis

text-emphasisは文字の上に傍点（「・」や「◯」など）をつけて強調できるプロパティです。

ruby {
  text-emphasis: dot;
}

まとめ

いかがでしたでしょうか？

テキスト一つ取っても、CSSで制御できることは実に多くあります。ちょっとした工夫が読みやすさや印象を左右するので、ぜひ今回紹介したプロパティを日々のコーディングに取り入れてみてください。