FIGMA → CSS

text-box-trim

PhotoshopやIllustratorのように、テキストエリアの上下をトリミングする。

CHECKING

DEFAULT · 余白あり

TYPE

文字ボックスの上下に、フォント由来の余白が残る。同じpaddingでも下に寄って見える。

TRIM · Figmaと同じ

TYPE

キャップハイトとベースラインまで切ると、見た目の上下余白が揃う。

FIGMA 上下トリミング → ベースラインまでのキャップハイト
Figmaの上下トリミング。Figma SansとNoto Sans JPで、通常時は赤線と文字の間に余白があり、text-box-trim後はキャップハイトとベースラインに赤線が付く。

Figmaの「ベースラインまでのキャップハイト」に対応するCSS。