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

Font size

Primitive font size design tokens used across the SGDS type scale.

Font size tokens

CSS variable

Figma token

CSS variable

Value (px/rem)

Example

--sgds-font-size-12

12px / 0.75rem

Ag

--sgds-font-size-14

14px / 0.875rem

Ag

--sgds-font-size-16

Base

16px / 1rem

Ag

--sgds-font-size-18

Responsive

18px / 1.125rem

Ag

--sgds-font-size-20

20px / 1.25rem

Ag

--sgds-font-size-22

Responsive

22px / 1.375rem

Ag

--sgds-font-size-24

24px / 1.5rem

Ag

--sgds-font-size-26

Responsive

26px / 1.625rem

Ag

--sgds-font-size-28

28px / 1.75rem

Ag

--sgds-font-size-30

Responsive

30px / 1.875rem

Ag

--sgds-font-size-32

32px / 2rem

Ag

--sgds-font-size-36

Responsive

36px / 2.25rem

Ag

--sgds-font-size-40

40px / 2.5rem

Ag

--sgds-font-size-44

Responsive

44px / 2.75rem

Ag

--sgds-font-size-48

48px / 3rem

Ag

--sgds-font-size-52

Responsive

52px / 3.25rem

Ag

--sgds-font-size-56

56px / 3.5rem

Ag

Singapore Government Design System

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