Get startedFoundationsComponentsPatternsGuidelinesResourcesAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Line height

Line height (leading) utilities and their responsive values across breakpoints.

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.

ResponsiveStatic
SGDS tailwind tokenMobileTabletDesktopUsage
sgds:leading-3-xs
16px16px16pxCompact labels, badges
sgds:leading-2-xs
20px20px20pxSmall labels, captions, overlines
sgds:leading-xs
24px24px24pxSubtitles, body medium and small
sgds:leading-sm
24px28px28pxSmall headings (H4)
sgds:leading-md
28px32px32pxMedium headings (H3), body large
sgds:leading-lg
32px36px40pxLarge headings (H2)
sgds:leading-xl
40px44px48pxXL headings (H1), display small
sgds:leading-2-xl
44px52px56pxDisplay medium
sgds:leading-3-xl
48px60px64pxDisplay large

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.