Legibility
Make each letterform easy to tell apart. Legibility supports readability.
Use typography to organise content, support reading, and create a clear hierarchy across SGDS interfaces.
Make each letterform easy to tell apart. Legibility supports readability.
Make blocks of text easy to scan so users can read comfortably.
Use writing, headings, spacing, and structure to make content easy to scan.
Use contrast for order and emphasis. Skip one size, weight, or colour step.
Use tighter tracking for larger, bolder type and looser tracking for smaller type.
Keep long body text to 40 to 60 characters per line, and short text to 20 to 40.
Inter is a typeface carefully crafted & designed for computer screens. Inter features a tall x-height to aid in readability of mixed-case and lower-case text.
Each set of weights serve a different purpose.
Download InterInter Bold can be used for ALL displays and headings.
This is Inter Bold 700
Inter Semi Bold can be used for subtitles, labels and buttons but should NEVER be used for body copy.
This is Inter Semi Bold 600
Inter Regular can be used for ALL body copy, long-form paragraph content, footnotes (such as terms and conditions text), captions and labels.
This is Inter Regular 400
Inter Light can be used for displays, headings, subtitles and placeholder text but should NEVER be used for body copy.
This is Inter Light 300
The type system includes a range of contrasting styles that support the needs of your product and its content.
The type scale is a combination of 40 styles that are supported by the type system. It contains reusable categories of text, each with an intended application and meaning.
The default text size in browsers is 16px/1rem.
The aspect ratio of the type system is Minor Third (1.200).
In the type system there is 2 aspect ratio for the line height:
SGDS has developed a pairing formula and the formula is the only pairing option that is allowed in system communications.
Never pair two weights that are one grade away from each other. For example, Bold and Regular.
Font size / 4 Example: 28 / 4 = 7 ≈ 8 px (round up to nearest system spacing)
This is a header
This is a body
Display medium bold + Heading medium light (subheading)
48 / 4 = 12 px
Introduction
An agency should consider using the privacy statement template appended below, and to only deviate from it when there are good reasons to do so.
Heading large bold + Body large regular
32 / 4 = 8 px
Introduction
An agency should consider using the privacy statement template appended below, and to only deviate from it when there are good reasons to do so.
Subtitle small semibold + Body small regular
20 / 4 = 5 px ≈ 4 px
Introduction
An agency should consider using the privacy statement template appended below, and to only deviate from it when there are good reasons to do so.
Label medium semibold + caption regular
16 / 4 = 4 px
Introduction
An agency should consider using the privacy statement template appended below, and to only deviate from it when there are good reasons to do so.
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.