← Terug naar overzicht Typografie

Type Scale

Responsive typografie voor optimale leesbaarheid op alle schermgroottes.

Font Families

Work Sans

Headings & UI

Gebruikt voor alle koppen, navigatie en UI elementen. Modern en licht met uitstekende leesbaarheid.

Light 300 Regular 400 Medium 500

IBM Plex Sans

Body Text

Gebruikt voor alle lopende tekst. Ontworpen voor langdurig lezen met uitstekende leesbaarheid.

Regular 400 Medium 500

Type Scale

Alle groottes zijn responsive en passen zich automatisch aan op tablet en mobiel.

Hero 72px / 79px · Work Sans Light

Design met intentie

--font-size-hero / --line-height-hero
H1 48px / 60px · Work Sans Light

Heading niveau 1

--font-size-h1 / --line-height-h1
H2 36px / 45px · Work Sans Light

Heading niveau 2

--font-size-h2 / --line-height-h2
H3 28px / 35px · Work Sans Light

Heading niveau 3

--font-size-h3 / --line-height-h3
H4 22px / 33px · Work Sans Light

Heading niveau 4

--font-size-h4 / --line-height-h4
H5 18px / 27px · Work Sans Light

Heading niveau 5

--font-size-h5 / --line-height-h5
H6 16px / 24px · Work Sans Light

Heading niveau 6

--font-size-h6 / --line-height-h6
Body Large 20px / 34px · IBM Plex Sans

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

--font-size-body-large / --line-height-body-large
Body 17px / 29px · IBM Plex Sans

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

--font-size-body / --line-height-body
Body Small 15px / 23px · IBM Plex Sans

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

--font-size-body-small / --line-height-body-small
Caption 14px / 21px · IBM Plex Sans

Caption tekst voor bijschriften en metadata.

--font-size-caption / --line-height-caption
Label 12px / 18px · Work Sans Medium · Uppercase

Label tekst voorbeeld

--font-size-label / --line-height-label

Font Weights

Aa Light --font-weight-light: 300
Aa Regular --font-weight-regular: 400
Aa Medium --font-weight-medium: 500

Line Heights

Tight

Lorem ipsum dolor sit amet consectetur.

--line-height-tight: 1.1
Snug

Lorem ipsum dolor sit amet consectetur.

--line-height-snug: 1.25
Normal

Lorem ipsum dolor sit amet consectetur.

--line-height-normal: 1.5
Relaxed

Lorem ipsum dolor sit amet consectetur.

--line-height-relaxed: 1.7