プロンプトとコンテキスト
デザインシステムでブランドフォントを使用しているものの、ネットワーク環境、ライセンス、またはスクリプトの対応範囲によって、ブラウザがフォールバックフォントを使用する場合があります。font-size-adjust が小文字の知覚サイズのジャンプをどのように軽減できるか、またモバイルのテキスト自動サイズ調整（autosizing）とどう異なるかを説明してください。
面接官がテストしていること
- x-height（エックスハイト）とフォントサイズが異なるメトリクスであることの理解。
- フォールバックのキャリブレーション、ローディング、およびプログレッシブエンハンスメントの境界を定義する能力。
- 視覚的な一貫性、スクリプト対応、アクセシビリティチェックを組み合わせる能力。
最初に明確にすべき質問
- プライマリフォントとフォールバックフォントはどのスクリプト（文字体系）をカバーしていますか？
- 目標はロード時のジャンプを抑えることですか、それとも恒久的なフォールバックの可読性を保つことですか？
- モバイルテキストの自動サイズ調整は許可されていますか？また、どのようなサイズや行高（line-height）のトークンがすでに存在していますか？
30秒の回答
font-size-adjust は、フォントメトリクスを使用して小文字の相対的な高さを調整（キャリブレーション）します。プライマリフォントとフォールバックフォントを測定し、明示的な比率または from-font をプログレッシブに使用します。グリフの幅、行高、または CJK メトリクスを同一にすることはできないため、スクリプト、ズーム、ロード失敗、ロービジョン向け設定をテストします。text-size-adjust はモバイルテキストの自動サイズ調整のための別のコントロールであり、フォールバックフォントのキャリブレーションツールではありません。
ステップバイステップの深掘り
1. サイズと x-height を切り離す
font-size-adjust は、小文字の高さをプライマリフォントと同等の読みやすい高さに保ちます。16px に設定された2つのフォントでも x-height が異なる場合があり、フォールバックが小さく見えたり大きく見えたりします。このプロパティは相対的なメトリクスを調整するものであり、プライマリ書体を再現するものではありません。
2. 明示的な比率または from-font を選択する
チームがプライマリメトリクスを測定済みである場合は、明示的な値が有効です。from-font を使用すると、対応しているブラウザが利用可能なフォントからメトリクスを読み取り、手動調整された定数を減らすことができます。ただし、ブラウザマトリクスとフォントファイルの検証は依然として必要です。
3. キャリブレーションをタイポグラフィトークンの近くに保つ
:root {
--body-size: 1rem;
}
body {
font-family: "Brand Sans", "Fallback Sans", sans-serif;
font-size: var(--body-size);
font-size-adjust: from-font;
line-height: 1.5;
}このプロパティは要素とその子孫に影響を与えます。body タイポグラフィトークンの近くに配置することで、無関係なコンポーネントが勝手に補正値を作り出すのを防ぎます。プロパティがサポートされていない場合でも、読みやすいフォントスタックがフォールバックとして機能します。
4. ロード順序の処理
キャリブレーションによって、フォントの切り替えによるすべての変化が解消されるわけではありません。計画的な font-display ポリシー、プリロードの決定、および許容可能なフォールバックと組み合わせてください。初期の可読性、テキストのリフロー、最終フォントの状態を個別に測定し、動きをゼロにすることだけを目的にコンテンツを非表示にしないでください。
5. スクリプトとロケールのテスト
ラテン文字の小文字の比率は、中国語、日本語、アラビア語、または混在テキストの普遍的な代用にはなりません。ローカライズされたサンプルを作成し、句読点、数字、ウェイト、折り返し、行高を検査してください。1つの比率をグローバルな正解として扱うのではなく、必要に応じてロケール固有のトークンを使用してください。
6. text-size-adjust と区別する
text-size-adjust は、モバイルビューポートでのブラウザによるテキスト拡大を制御します。フォールバックの x-height を調整するものではありません。プロパティを選択する前に、問題がフォントメトリクスなのかモバイルレイアウトの挙動なのかを特定し、誤った問題を修正するためにアクセシビリティの挙動を無効化しないようにしてください。
7. 観察可能な合否基準を定義する
実際の対象ブラウザおよびデバイス上で、フォントのロード成功、レイアウトの変化、ズームによるテキストの途切れ、ユーザーのフォント設定下での可読性を記録します。視覚的回帰テスト、スクリーンリーダー、キーボード、ハイコントラストのチェックをリリースの判定条件に含めます。
模範回答
私はこれをタイポグラフィメトリクスのガバナンスとして扱います。プライマリとフォールバックの x-height をサンプリングし、明示的な比率または from-font を body トークンの近くに適用し、信頼性の高いスタックを維持します。これにより小文字の相対的な可読性は向上しますが、幅、行高、または混在する CJK レイアウトを同一に保つことは保証できないため、フォントのロード成功/失敗、スクリプト、ブラウザズーム、モバイルデバイスをテストします。モバイルの自動サイズ調整は text-size-adjust の領域です。合否判定には、1枚のスクリーンショットではなく、レイアウト、文字の途切れ、可読性、アクセシビリティのエビデンスを使用します。
よくある間違い
font-size-adjustがすべてのフォントを同じサイズにすると主張すること。from-fontがすべてのブラウザやフォントファイルで保証されていると見なすこと。text-size-adjust: noneによるモバイル拡大の無効化を汎用的な修正策とすること。- 英語のファーストビューのみをテストし、ローカルスクリプトやロード失敗を決してテストしないこと。
- ズーム、ユーザーのフォント設定、スクリーンリーダーを無視して、レイアウトメトリクスのみに注目すること。
フォローアップの質問と回答
デザイン上、幅の一致も必要な場合はどうしますか？
このプロパティが相対的な高さのメトリクスのみを処理することを伝えます。より近いフォールバックを選択するか、スペーシングを調整するか、折り返しを再設計します。1つの比率がすべてのメトリクスを解決すると約束してはいけません。
from-font が利用できない場合、どのようにフォールバック（デグレード）させますか？
スタックとデフォルトサイズを読みやすい状態に保ち、明示的な値に対して機能検出またはプログレッシブエンハンスメントを使用します。未対応の挙動はブラウザの正常な状態として扱い、テキストの表示をブロックする理由にはしません。
フォントの切り替えによってボタンが動くのを防ぐにはどうすればよいですか？
十分なスペースを確保し、フォールバックを調整し、プライマリフォントが読み込まれる前後の幅を測定します。重要なアクションが非表示のテキストや予測不能な自動サイズ調整に依存してはなりません。
CJK ページでも同じ値を使用すべきですか？
盲目的に再利用してはいけません。CJK は小文字の x-height と同じ概念にはマッピングされないため、ローカルフォントと行高のサンプルを個別に検証してください。
アクセシビリティが損なわれていないことをどのように示しますか？
ブラウザのズーム、システムフォント設定、リフロー後のフォーカス順序、スクリーンリーダーの出力、ハイコントラストをテストします。固定ピクセルのスクリーンショットだけでは十分な証拠にはなりません。
面接でブラウザのサポート状況についてどのように話しますか？
対象となるブラウザマトリクスと機能検出プランを示し、未対応の場合でも読みやすいスタックを用意します。マトリクスやテストの証拠なしに普遍的なサポートを主張することは避けます。