Browse Foundations

Foundations

Line height

Apply SGDS line height utilities to keep single-line and multi-line text readable.

Line height utilities

Line height (leading) controls the vertical space between lines of text. SGDS semantic leading tokens are responsive — they scale up at tablet (1024px) and desktop (1440px) breakpoints to maintain comfortable reading rhythm alongside larger font sizes.

Responsive

SGDS tailwind token

Mobile

Tablet

Desktop

Usage

sgds:leading-3-xs

16px

Compact labels, badges

sgds:leading-2-xs

20px

Small labels, captions, overlines

sgds:leading-xs

24px

Subtitles, body medium and small

sgds:leading-sm

24px

28px

Small headings (H4)

sgds:leading-md

28px

32px

Medium headings (H3), body large

sgds:leading-lg

32px

36px

40px

Large headings (H2)

sgds:leading-xl

40px

44px

48px

XL headings (H1), display small

sgds:leading-2-xl

44px

52px

56px

Display medium

sgds:leading-3-xl

48px

60px

64px

Display large

Static

SGDS tailwind token

Value

Usage

sgds:leading-16

16px / 1rem

Fixed compact line-height.

sgds:leading-20

20px / 1.25rem

Fixed small-text line-height.

sgds:leading-24

24px / 1.5rem

Fixed body and subtitle line-height.

sgds:leading-28

28px / 1.75rem

Fixed small-heading line-height.

sgds:leading-32

32px / 2rem

Fixed medium-heading line-height.

sgds:leading-36

36px / 2.25rem

Fixed large-heading line-height.

sgds:leading-40

40px / 2.5rem

Fixed large display line-height.

sgds:leading-44

44px / 2.75rem

Fixed display line-height.

sgds:leading-48

48px / 3rem

Fixed display line-height.

sgds:leading-52

52px / 3.25rem

Fixed expanded display line-height.

sgds:leading-56

56px / 3.5rem

Fixed expanded display line-height.

sgds:leading-60

60px / 3.75rem

Fixed hero display line-height.

sgds:leading-64