ノベルティメディア

media

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

神は文字に宿る!意外と知らないCSSのフォント設定8選
藤川 拓也
神は文字に宿る!意外と知らない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 が指定されることが推奨されている場合もあります。

説明

auto

ブラウザのデフォルトに従う

block

フォントが読み込まれるまでブロックする(表示させない)

swap

フォールバックを表示し、読み込みが終了したらフォントを差し替える

fallback

フォントを読み込む間、短い時間ブロックする。フォントが読み込まれなかった場合はフォールバックフォントを表示する

optional

ブロックせず、読み込みを急がずにフォールバックフォントを表示する

font-kerning

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

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

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

font-feature-settings

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

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

タグ名

主な用途・効果

"kern"

文字ペアの間隔を自動調整(カーニング)

"liga"

fifl などの標準的な合字を有効化

"clig"

文脈に応じたリガチャ(筆記体など)を適用

"palt"

全角の記号や句読点の幅を自然に詰める(プロポーショナル字形)

"onum"

オールドスタイル数字(上下に揺れる活字風の数字)を表示

"tnum"

等幅数字(表組み用に数字の幅を揃える)

text-underline-offset

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

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

text-transform

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

text-transform: capitalize;

アルファベットの先頭1文字を大文字にする

text-transform: uppercase;

すべてのアルファベットを大文字にする

text-transform: lowercase;

すべてのアルファベットを小文字にする

text-transform: full-width;

すべての文字を全角にする(実験的機能)

text-transform: full-size-kana;

半角カタカナを全角カタカナにする(実験的機能)

ruby-position

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

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

font-variant-ligatures

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

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

text-emphasis

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

ruby {
  text-emphasis: dot;
}

まとめ

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

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

この記事をシェアする
藤川 拓也

藤川 拓也

Engineer

神奈川県出身。実家の車は湘南ナンバーです。 ノベルティにはフロントエンドエンジニアとして入社しました。デザイナー出身で、デザイナーとエンジニアの架け橋的な存在になることを目標としています。 趣味は映像制作、お笑い、深夜ラジオ、写真、音楽鑑賞など。最近ハマっていることは、激辛料理を食べること、中国に住んでいる太った猫のインスタを見ること。

Webプロモーション・業務改善は
ノベルティひとつで完結

はじめての依頼にも
全力でサポートさせていただきます

メールでのお問い合わせ
各種サービス案内などをダウンロード

おすすめ記事/ PICKUP

    記事カテゴリー/ CATEGORY

      Webプロモーションや業務改善・DX化

      企業の課題はノベルティひとつで完結

      ホームページ制作などのWeb制作をはじめ、
      システム開発やマーケティング支援などワンストップで対応
      まずはお気軽にお問い合わせください

      お問い合わせ

      お電話またはメールでお気軽にお問い合わせください。

      資料ダウンロード

      各種サービスの資料をご用意しています