ユーザーの好みに合わせてフォントを調整し、コンテンツを快適に読めるようにする方法。
ユーザーを設計プロセスに取り込むことは、ユーザー、デザイナー、デベロッパーにとってエキサイティングな時間でした。ユーザーは、エクスペリエンスにアクセスして、コンテンツの利用をシームレスに開始できます。ユーザーの好みは、デザイン結果に十分に統合されています。
このブログ投稿では、可変フォントで CSS メディアクエリを使用して、読書体験をさらにカスタマイズする方法について説明します。フォントのグレードと太さは font-variation-settings でカスタマイズできるため、ダークモードや高コントラストなどのさまざまな設定やコンテキストに合わせて微調整できます。これらの設定を取得して、そのユーザー エクスペリエンスに合わせてバリアブル フォントを調整できます。
- ダークモードでは、グラデーションが若干減少します。
- 高コントラストでは、より太いフォントが使用されます。
- 低コントラストでは、フォントが細くなります。
この有意義な瞬間を実現する 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; } } 
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 で確認できます。