Typografie draagt bij aan een consistente en toegankelijke gebruikerservaring. Vaste lettertypes en hiërarchie zorgen voor heldere informatie.
Lettertype
Het lettertype Flanders Art Sans is een fontfamilie die speciaal voor de Vlaamse overheid is ontwikkeld en mag alleen gebruikt worden voor projecten van en voor de Vlaamse overheid.
Medewerkers van de Vlaamse overheid kunnen het lettertype downloaden op Vlaanderen Intern’s hub voor communicatie (aanmelden vereist).
Niveau 4 (lokaal bestuur) maakt gebruik van een neutrale alternatieve font, zijnde Source Sans Pro.
Typeschaal
Onze typeschaal gebruikt veelvouden van 4 (of 2) voor lettergroottes en regelafstand om uit te lijnen met ons verticale raster van 4px.
| Lettergrootte | Regelafstand |
|---|---|
| 12 px | 16 px |
| 14 px | 20 px |
| 16 px | 24 px |
| 18 px | 28 px |
| 20 px | 28 px |
| 22 px | 30 px |
| 26 px | 34 px |
| 32 px | 40 px |
| 44 px | 52 px |
Responsieve typografie
De tekststijlen passen zich aan het schermformaat aan. Op brede schermen gebruiken we grotere letters, terwijl smalle schermen kleinere opgemaakte tekst krijgen.
Hier is een voorbeeld van hoe typografie eruitziet op verschillende schermen:
Resources
Design
In Figma zijn deze stijlen gedefinieerd als Figma styles. Let er bij het ontwerpen in Figma op dat je de juiste typografie-style kiest (desktop H3, mobile H3 small)
| Desktop | Mobiel |
|---|---|
| H1 | H1 small |
| H2 | H2 small |
| H3 | H3 small |
| H4 | H4 small |
| H5 | H5 small |
| H6 | H6 |
| body/large | body/medium |
| body/medium | body/small |
| body/small | body/xsmall |
Development
Meer informatie en documentatie omtrent typografie, titels en diens varianten, kan je terugvinden in Storybook.