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

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

ユーザーの環境に合わせてフォントを調整する好みに合わせて内容を調整できるので

Adam Argyle

ユーザーをデザインプロセスに引き込むことは、ユーザーにとってデザイナー、デベロッパーです。ユーザーはニュースメディアのエクスペリエンスにアクセスし、その嗜好がデザイン結果に組み込まれています。

このブログ投稿では、可変フォントでの CSS メディアクエリを使用して調整する方法を解説します。読書体験をさらに充実させていきますフォントグレードと太さをカスタマイズ可能 font-variation-settings を使用し、さまざまな設定に応じてマイクロチューニングできる設定することができます。Google のユーザーエクスペリエンスに合わせて可変フォントを調整できます。

ダークモードでは、グラデーションが若干軽減されます。
コントラストを高くするとフォントが際立ちます。
低コントラストでは、フォントが薄くなります。

で確認できます。 <ph type="x-smartling-placeholder">

</ph>

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 をピクセル単位に設定する方法を示す別のデモの動画です次のようにして、ユーザーの好みと、フォントサイズを rems 単位で設定する必要がある理由を説明します。

最後に、このデモを中心に据えて、簡単な 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 で確認できます。