ノベルティメディア
media神は文字に宿る!意外と知らない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
は、文字の種類を変換できる機能です。アルファベットをすべて大文字にしたり、先頭だけ大文字に変換するような処理を行うことが可能です。
| アルファベットの先頭1文字を大文字にする |
| すべてのアルファベットを大文字にする |
| すべてのアルファベットを小文字にする |
| すべての文字を全角にする(実験的機能) |
| 半角カタカナを全角カタカナにする(実験的機能) |
ruby-position
ruby-position
は、rubyタグで指定したルビの位置を調整することができるプロパティです。
ルビを文字の上にふるか、下にふるかを設定できます。
font-variant-ligatures
組版においては複数の文字を合体させて、1文字として表示することを合字(リガチャ)と呼びます。
font-variant-ligatures
を指定することで、英字フォントに合字(リガチャ)を設定することが可能です。
text-emphasis
text-emphasis
は文字の上に傍点(「・」や「◯」など)をつけて強調できるプロパティです。
ruby {
text-emphasis: dot;
}
まとめ
いかがでしたでしょうか?
テキスト一つ取っても、CSSで制御できることは実に多くあります。ちょっとした工夫が読みやすさや印象を左右するので、ぜひ今回紹介したプロパティを日々のコーディングに取り入れてみてください。
おすすめ記事/ PICKUP
記事カテゴリー/ CATEGORY
企業の課題はノベルティひとつで完結
ホームページ制作などのWeb制作をはじめ、
システム開発やマーケティング支援などワンストップで対応
まずはお気軽にお問い合わせください
お電話またはメールでお気軽にお問い合わせください。
各種サービスの資料をご用意しています