Typography
フォントファミリー・サイズ・ウェイト・行高のプリミティブと、Figma の Text Style に対応する 13 個のレシピ。
Text Styles
Figma の Text Style と一致するレシピ。コード側では .tds-text-{name} utility class を 1 つ当てるだけで size / weight / line-height がまとまって適用される。
- body/xs12px / 400 / 150%サンプル Aa
class: .tds-text-body-xs
- body/s14px / 400 / 150%サンプル Aa
class: .tds-text-body-s
- body/m16px / 400 / 150%サンプル Aa
class: .tds-text-body-m
- heading/l20px / 600 / 125%サンプル Aa
class: .tds-text-heading-l
- heading/xl24px / 600 / 125%サンプル Aa
class: .tds-text-heading-xl
- ui/xxs10px / 400 / 100%サンプル Aa
class: .tds-text-ui-xxs
- ui/xs12px / 500 / 100%サンプル Aa
class: .tds-text-ui-xs
- ui/s14px / 500 / 100%サンプル Aa
class: .tds-text-ui-s
- ui/m16px / 500 / 100%サンプル Aa
class: .tds-text-ui-m
- ui/l18px / 500 / 100%サンプル Aa
class: .tds-text-ui-l
- ui/m/title16px / 600 / 100%サンプル Aa
class: .tds-text-ui-m-title
- definition16px / 500 / 150%サンプル Aa
class: .tds-text-definition
- avatar/xl64px / 600 / 100%サンプル Aa
class: .tds-text-avatar-xl
プリミティブ
Font Family
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serifFont Size
- fontSize.xxs10pxAa
- fontSize.xs12pxAa
- fontSize.s14pxAa
- fontSize.m16pxAa
- fontSize.lData18pxAa
- fontSize.l20pxAa
- fontSize.xl24pxAa
- fontSize.xxl32pxAa
- fontSize.xxxl64pxAa
Font Weight
- fontWeight.regular400Aa
- fontWeight.medium500Aa
- fontWeight.bold600Aa
Line Height
- lineHeight.none1サンプル
- lineHeight.tight1.25サンプル
- lineHeight.normal1.5サンプル