Responsive

Semantic line height tokens that scale across mobile, tablet, and desktop breakpoints.

Responsive line height tokens

Semantic line height tokens that scale across breakpoints. Use these tokens when vertical rhythm needs to adapt to the screen size alongside responsive font sizes.

CSS variableMobileTabletDesktopExample
--sgds-line-height-3-xs
16px / 1rem16px / 1rem16px / 1rem

Line one Line two

--sgds-line-height-2-xs
20px / 1.25rem20px / 1.25rem20px / 1.25rem

Line one Line two

--sgds-line-height-xs
24px / 1.5rem24px / 1.5rem24px / 1.5rem

Line one Line two

--sgds-line-height-sm
24px / 1.5rem28px / 1.75rem28px / 1.75rem

Line one Line two

--sgds-line-height-md
28px / 1.75rem32px / 2rem32px / 2rem

Line one Line two

--sgds-line-height-lg
32px / 2rem36px / 2.25rem40px / 2.5rem

Line one Line two

--sgds-line-height-xl
40px / 2.5rem44px / 2.75rem48px / 3rem

Line one Line two

--sgds-line-height-2-xl
44px / 2.75rem52px / 3.25rem56px / 3.5rem

Line one Line two

--sgds-line-height-3-xl
48px / 3rem60px / 3.75rem64px / 4rem

Line one Line two

Singapore Government Design System

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