CSS でユーザーの好みに合わせてタイポグラフィを調整する

ユーザーの好みに合わせてフォントを調整し、コンテンツを最大限快適に読めるようにする方法。

Adam Argyle

ユーザーをデザイン プロセスに組み込むことは、ユーザー、デザイナー、デベロッパーにとってエキサイティングな時間でした。ユーザーは、エクスペリエンスにアクセスして、コンテンツの利用をシームレスに開始できます。ユーザーの設定は、デザイン結果に豊富に統合されます。

このブログ投稿では、可変フォントと CSS メディアクエリを使用して、読みやすさをさらに高める方法について説明します。フォント グレードと太さは font-variation-settings でカスタマイズできるため、ダークモードや高コントラストの設定など、さまざまな設定やコンテキストに応じたマイクロチューニングが可能になります。これらの設定に基づいて、そのユーザー エクスペリエンスに合わせて可変フォントを作ることができます。

  • ダークモードでは、グラデーションが若干抑えられます。
  • コントラストを高くするとフォントが際立ちます。
  • コントラストが低い場合は、フォントが細くなります。
https://codepen.io/argyleink/pen/mdQrqvj

以下では、この有意な瞬間を実現する CSS と可変フォントについて、各部分を詳しく説明します。

セットアップ

CSS とフォント バリエーションの設定値に注目すると同時に、内容を確認できるように、作業のプレビューに使用できるマークアップを以下に示します。

<h1>Variable font weight based on contrast preference</h1>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Officia, quod? Quidem, nemo aliquam, magnam rerum distinctio
  itaque nisi nam, cupiditate dolorum ad sint. Soluta nemo
  labore aliquid ex, dicta corporis.
</p>

CSS を追加しなくても、フォントサイズはすでにユーザー設定に適応しています。font-size をピクセルで設定するとユーザー設定が破棄される仕組みと、フォントサイズを rem で設定する必要がある理由を示す別のデモの動画は次のとおりです。

最後に、デモを中央に配置してサポートするために、CSS を少し追加します。

@layer demo.support {
  body {
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
  }

  h1 {
    text-wrap: balance;
  }
}

ダークモードとライトモードの両方で、これまでのデモのスクリーンショット プレビュー。

このデモ設定を使用すると、この優れたタイポグラフィ UX 機能のテストと実装を開始できます。

Roboto Flex 可変フォントの読み込み

アダプティブ ストラテジーは、カスタマイズに意味のある軸を持つ可変フォントを使用します。具体的には、GRAD と wght が必要です。この記事で紹介する対象アダプティブ ユーザー設定はカラーパターンとコントラストを対象としており、どちらもユーザーの希望に合わせてこれらの軸を調整します。

CSS の @font-face API を使用して、可変フォントを読み込みます。

@font-face {
  font-family: "Roboto Flex";
  src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype');
}

次に、フォントを選択したコンテンツに適用します。次の CSS は、すべてに適用されます。

@layer demo.support {
  body {
    font-family: Roboto Flex;
  }
}

これまでのデモのスクリーンショットのプレビュー。フォントが Roboto Flex にダークモードとライトモードの両方に表示されます。

CSS カスタム プロパティとメディアクエリを活用する

フォントが読み込まれたら、ユーザー設定をクエリし、変数フォント設定をそれに応じて調整できます。

設定がないときの設定（デフォルト）

次の初期スタイルはデフォルトのスタイルです。つまり、ユーザーが設定を指定していない場合のスタイルです。

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }
}

高コントラストが設定されている場合の設定

システム設定で高コントラストの使用を望んでいる場合は、--base-weight の値を 400 から 700 に増やします。

@layer demo {
  @media (prefers-contrast: more) {
    body {
      --base-weight: 700;
    }
  }
}

読みやすさが向上しました。

コントラストを低く設定した場合の設定

システム設定でコントラストを低くすることを指定しているユーザーについては、--base-weight の値を 400 から 200 に下げます。

@layer demo {
  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }
}

読みながらのコントラストが低くなりました。

設定がダークモードに設定されている場合の設定

@layer demo {
  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

これにより、暗い背景に明るい文字と明るい背景に暗い文字の知覚上の違いが考慮されるようになりました。

連携が生み出すメリット

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }

  @media (prefers-contrast: more) {
    body {
      --base-weight: 700;
    }
  }

  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }

  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

または、CSS のネストですべてをまとめることもできます。

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;

    @media (prefers-contrast: more)     { --base-weight: 700 }
    @media (prefers-contrast: less)     { --base-weight: 200 }
    @media (prefers-color-scheme: dark) { --base-grade: -25 }
  }
}

これにより、ユーザーの設定に合わせてフォントが調整される読み上げエクスペリエンスが実現します。ソースコード全体は、以下の Codepen で確認できます。