Line height

Line height tokens used across the SGDS typography system.

Line height tokens

Primitive line height tokens define the base scale for vertical rhythm. These fixed values are referenced by semantic tokens and can be used directly when precise control is needed.

CSS variableValueExample
--sgds-line-height-16
16px / 1rem

Line one Line two

--sgds-line-height-20
20px / 1.25rem

Line one Line two

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

Line one Line two

--sgds-line-height-28
28px / 1.75rem

Line one Line two

--sgds-line-height-32
32px / 2rem

Line one Line two

--sgds-line-height-36
36px / 2.25rem

Line one Line two

--sgds-line-height-40
40px / 2.5rem

Line one Line two

--sgds-line-height-44
44px / 2.75rem

Line one Line two

--sgds-line-height-48
48px / 3rem

Line one Line two

--sgds-line-height-52
52px / 3.25rem

Line one Line two

--sgds-line-height-56
56px / 3.5rem

Line one Line two

--sgds-line-height-60
60px / 3.75rem

Line one Line two

--sgds-line-height-64
64px / 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.