このページは Cloud Translation API によって翻訳されました。

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 で確認できます。