Windows 11 の文字体裁

  • [アーティクル]

Segoe UI 変数でレンダリングされた単語

言語の視覚的表現である文字体裁において、何よりも重要な役割は情報を伝達することです。 Windows 11 書体システムを使用すると、コンテンツ内に構造と階層を作り出すのに役立ち、UI の読みやすさと読みやすさを最大限に高めます。

Segoe UI Variable は、Windows 用の新しいシステム フォントです。 これは、従来の Segoe の刷新版であり、可変フォント テクノロジーを使用して、非常に小さいサイズで優れた読みやすさを動的に提供し、表示サイズのアウトラインを改善します。

メトリック

タイプフェイスのいくつかの側面が強調表示された Segoe UI 変数にレンダリングされた

重み

ウェイト名 ウェイト軸の値 ビジュアル
"ライト" 300 Segoe UI 変数ライトでレンダリングされた
Semilight 350 Segoe UI 変数 semilight でレンダリングされた
通常 400 Segoe UI 変数の標準でレンダリングされる
Semibold 600 Segoe UI 変数でレンダリングされた
太字 700 Segoe UI 変数太字でレンダリングされた

光軸

Segoe UI 変数でレンダリングされる小文字で、レンダリングされるコンテキストに基づいて、さまざまな図形のアウトラインが表示されます。

Segoe UI Variable は、ウェイトと光学サイズの 2 つの軸をサポートしています。 ウェイト軸は増分方式です。光学サイズ軸は自動で、既定でオンになっています。 光学サイズ軸は、フォントのカウンターの形状とサイズを制御して、小さいサイズでの読みやすさと大きいサイズでの個性を優先します。

Segoe Fluent Variable の使用

タイプ ランプ

Windows 11 では、UI のさまざまな種類のテキストに対して次の値を使用します。

例 体重 サイズまたは行の高さ
キャプション テキストの例 Small 12/16 epx
本文の例 Text 14/20 epx
本文の強いテキストの例 Text semibold 14/20 epx
本文の大きなテキストの例 Text 18/24 epx
字幕テキストの例 Display semibold 20/28 epx
タイトル テキストの例 Display semibold 28/36 epx
タイトルの大きなテキストの例 Display semibold 40/52 epx
表示テキストの例 Display semibold 68/92 epx

Windows 11 での文字体裁のベスト プラクティス

Windows 11 では、テキストが表示されているコンテキストに基づいて、次の属性を備える Segoe UI Variable が使用されます。

属性 Value メモ
Weight Regular、Semibold ほとんどのテキストには Regular ウェイトを使用し、タイトルには Semibold を使用します
位置合わせ Left、Center 既定では左揃え、アイコンの下のテキストなどのまれなケースでのみ中央揃え
最小値 14px Semibold、12px Regular これらのサイズとウェイトよりも小さいテキストは、一部の言語では判読できません
壳 文の先頭文字を大文字にする タイトルを含むすべての UI テキストで、文の先頭文字を大文字にします
切り捨て 省略記号とクリッピング ほとんどの場合、省略記号を使用します。クリッピングはまれなケースでのみ使用されます

例

ヒント

WinUI 3 ギャラリー アプリを開き、文字体裁の原則の動作を確認します。

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。