CSS Components / Utilities / Typography

Utilities: Typography

Garden's bedrock resets apply a system font to page HTML. If not using bedrock, you can achieve the same result by using the .u-font-family-system utility (as this page does) or by leveraging Garden CSS variables to set this same system font stack in your code. Base font size is 14px and line height is 20px.

Small Medium Large Extra-Large XXL XXXL

Small .u-fs-sm (12px)

Monospace .u-font-family-monospace (11px)

  • REGULAR .u-regular

  • SEMIBOLD .u-semibold

Medium .u-fs-md (14px)

Monospace .u-font-family-monospace (13px)

  • REGULAR .u-regular

  • SEMIBOLD .u-semibold

Large .u-fs-lg (18px)

Monospace .u-font-family-monospace (17px)

  • REGULAR .u-regular

  • SEMIBOLD .u-semibold

Extra-Large .u-fs-xl (22px)

XXL .u-fs-xxl (26px)

XXXL .u-fs-xxxl (36px)

Playground