タイポグラフィ

タイポグラフィについて

Startify-UIでは、デザイントークンの一環として、文字サイズ、書体、ウエイト、装飾スタイルなどを包括的に管理するタイポグラフィのルールを設けています。これにより、テキスト周りのデザインの一貫性と可読性が向上し、ユーザーは快適にコンテンツを閲覧することができ、UXの向上に役立ちます。

書体

Startify-UIにおけるタイポグラフィのルールでは、ブランドのアイデンティティを反映するために選定された書体を使用します。読みやすさと視覚的な一貫性を保つために、見出しと本文には異なるフォントを用意することもありますが、全体として調和の取れた組み合わせを基本とします。

デザインによって扱われる書体はさまざまですが、Startify-UIでは、サンセリフ（ゴシック）体、セリフ（明朝）体、モノスペース（等幅）フォントのそれぞれ異なる3つの書体を定義します。デザインの世界観やブランドイメージ、伝える情報の内容や特性に合わせて柔軟に使い分けることが可能です。

各書体はそれぞれCSS変数で定義され、対応するユーティリティクラスも提供されており、簡単に指定した書体を設定することができます。

サイズ

統一されたスケールに基づいて文字サイズを設定しています。これにより、見出し、本文、キャプションなど、さまざまなテキスト要素間でのバランスが保たれ、デザインの調和が取れ、コンテンツの可読性や伝わりやすさにおけるメリットになります。標準的な文字サイズである16pxを基準に、最小の62.5%から最大の400%まで、Startify-UIのデザイントークンで定義されているサイズスケールの値に合わせて段階的に文字サイズが調整されています。

各文字サイズはそれぞれCSS変数で定義され、対応するユーティリティクラスも提供されており、テキスト要素ごとに柔軟な文字サイズの調整が可能です。

ウエイト

文字のウエイト（太さ）は、情報の階層構造を視覚的に示すために重要です。Startify-UIでは、最大での9つのウエイトを使用し、見出しや強調テキストなどに応じて適切に選択します。

各ウエイトはそれぞれCSS変数で定義され、対応するユーティリティクラスも提供されており、テキスト要素ごとに柔軟なウエイトの調整が可能です。

装飾・ケーススタイル

装飾・ケーススタイルには、下線、斜体、大文字などのテキスト装飾や文字変換が含まれます。これらは、特定の情報を強調したり、アクセントを加えたりするために使用されますが、過度な装飾を避け、全体のバランスを保つよう配慮しています。

各装飾・ケーススタイルはそれぞれCSS変数で定義され、対応するユーティリティクラスも提供されており、テキスト要素ごとに柔軟なスタイルの調整が可能です。