Typography principles

A good typography can capture the audience's attention and engage them with the content. It makes information consumption efficient, helping readers quickly locate and absorb relevant information.

Principles

Legibility

The ease with which one letterform can be distinguished from the next. It feeds into, but is not the same as, readability.

Readability

Readability refers to the ease with which a block of text can be scanned by eye.

Scannability

Scannability is the aggregate effect of writing and formatting techniques.

Rules and guide

Create contrast, skip one

Contrast creates visual order, emphasis, and clarity. It should also be harmoniously different, different enough to create visual interest, but not compete with each other. To achieve that, skip at least one size, weight, and/or colour.

Leading & tracking

The larger and bolder the type, the smaller the tracking. Vice versa!

Line length

Line length is how many characters are on a single line of text. For longer body text, the ideal length is between 40 and 60 characters. For shorter lines of text, the ideal length is 20 to 40 characters.

Alignment

Left-aligned text is the most common setting for left-to-right languages such as English. The F-alignment describes the most common user eye-scanning pattern when it comes to blocks of content.

Typeface

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 Inter
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
0
1
2
3
4
5
6
7
8
9
!
?
@
#
%
&
{
}
+
=

Font weight

Bold

Inter Bold can be used for ALL displays and headings.

This is Inter Bold 700

Semi Bold

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

Regular

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

Light

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

Type system

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.

Base size

The default text size in browsers is 16px/1rem.

16 16 px

Type scale aspect ratio

The aspect ratio of the type system is Minor Third (1.200).

141620242832404856

Line height aspect ratio

In the type system there is 2 aspect ratio for the line height:

  1. Minor third (1.200) for Displays, Headings and Subtitles
  2. Perfect Fifth (1.500) for Bodys, Labels, Caption and Overline
BaselineHeading52 px

Type pairing

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.

Spacing formula

Font size / 4

Example: 28 / 4 = 7 ≈ 8 px (round up to nearest system spacing)

font size 28px

This is a header

8 px

This is a body

Type pairing example

Pairing example A

Display medium bold + Heading medium light (subheading)

48 / 4 = 12 px

Introduction

12 px

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.

Pairing example B

Heading large bold + Body large regular

32 / 4 = 8 px

Introduction

8 px

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.

Pairing example C

Subtitle small semibold + Body small regular

20 / 4 = 5 px ≈ 4 px

Introduction

4 px

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.

Pairing example D

Label medium semibold + caption regular

16 / 4 = 4 px

Introduction

4 px

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.

Singapore Government Design System

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