行送り
Leading行と行の垂直方向の間隔です。狭すぎると窮屈に、広すぎると段落のまとまりが弱くなります。
よい組版は、一つひとつの考えに余白を与えます。行の間隔や一行の長さが、読むときのリズムを作ります。設定を一つ変えて、同じ文章の印象がどう変わるかを見てみましょう。明確な階層は、要点を見つけやすくします。
行の高さ
タイポグラフィ
日本語UIでよく使う
トラッキング
Tracking単語や文章全体の文字間隔を一括で調整します。英大文字のラベルは、少し広げると読みやすくなる場合があります。
文字間隔
テキストのはみ出し
Text overflow文字が領域に収まらない状態です。省略記号（…）は続きを示し、折り返しは高さに余裕がある場合に内容を保ちます。
Alexandra Kim
プロダクトデザイナー · デザインシステムとユーザー体験
複雑なアイデアをわかりやすく使いやすい製品に変え、毎日の操作を自然で心地よいものにします。
テキストの幅
欧文と和欧混植
欧文のブランド名、書体の組み合わせ、和欧混植に。
カーニング
Kerning特定の文字ペアの間隔を個別に調整します。文字列全体を調整するトラッキングとは異なり、局所的な隙間を整えます。
AIDevCourse
AI と vC の間隔だけを変え、ほかの間隔は保ちます。
エックスハイト
X-height大文字の高さに対する、x などの小文字の高さ。x ハイトが高いフォントは同じサイズでも大きく見えるため、どちらも 16px でも見た目の大きさが大きく異なることがあります。
ベースライン
同じ文字サイズです。ガイド線はブラウザで測った x または H の高さを示します。
ハイフネーション
Hyphenation単語をハイフンで区切って複数行に分けます。狭い段や両端ぞろえに有効で、自動処理は言語とブラウザに依存します。
Thoughtful typography makes extraordinary interactions feel understandable.