Typography
Root text
- Grootte: 16px
- Lettertype: Montserrat
- Kleur: GZ Black
- Letterafstand: 1.3px
Root text wordt gebruikt als blauwdruk voor paragrafen en zijn font-grootte wordt als basis gebruikt voor een groot gedeelte van de typografie en spacings.
Body text
- Grootte: 16px
- Lettertype: Montserrat
- Kleur: GZ Black
- Letterafstand: 1.3px
Body text wordt gebruikt als basis voor paragrafen normale stukken tekst.
Headings
Bij kopteksten dien je twee zaken te onderscheiden: styling en element. Met het element bedoelen we de daadwerkelijke HTML code die in de pagina wordt gezet om het element te tonen (bijv.: <h1>Kop tekst</h1>. Met styling bedoelen we hoe de tekst getoond wordt. Dit is een belangrijk verschil! Soms wordt namelijk een tweede H1 (element) aan een pagina toegevoegd omdat er behoefte is aan nog een grote titel halverwege de tekst. Doe dit niet! Dit doet namelijk afbreuk aan de SEO scores van de pagina in kwestie. Kies in zo’n geval voor een H2 element, en selecteer onder de typografie instellingen van de kop tekst als grootte het gewenste formaat voor de tekst die je wilt.
H1
- Grootte: 47px
- Lettertype: Montserrat
- Kleur: GZ Black
- Letterafstand: 1.3px
Kop tekst: H1
LET OP: er mag maar 1 H1 op de pagina staan i.v.m. SEO!
De H1 op de pagina is de belangrijkste kop, en is meestal gelijk met de pagina titel in de backend (vaak automatisch).
H2
- Grootte: 37px
- Lettertype: Montserrat
- Kleur: GZ Black
- Letterafstand: 1.3px
Kop tekst: H2
H3
- Grootte: 29px
- Lettertype: Montserrat
- Kleur: GZ Black
- Letterafstand: 1.3px
Kop tekst: H3
H4
- Grootte: 23px
- Lettertype: Montserrat
- Kleur: GZ Black
- Letterafstand: 1.3px
Kop tekst: H4
H5
- Grootte: 18px
- Lettertype: Montserrat
- Kleur: GZ Black
- Letterafstand: 1.3px
Kop tekst: H5
H6
- Grootte: 16px
- Lettertype: Montserrat
- Kleur: GZ Black
- Letterafstand: 1.3px
Kop tekst: H6
Kleurgebruik
Kleurstalen
Donker op licht
Red
#FF0026
Green
#019880
Yellow
#F0DC3C
Blue
#2F58FE
Grey
#A4A4A4
Black
#0d0d0d
Light Red
#FFE5E9
Light Green
#E5F6F5
Light Yellow
#FAFADC
Light Blue
#EDF1FF
White
#F7F7F7
True white
#ffffff
Lay-out
Standaard
48rem
De standaard breedte voor content is 42 keer de grootte van het body lettertype.
Wijd
1200px
De wijdere lay-out is 1200 pixels breed.
Volledig
100vw
De volledige lay-out vult de volledige breedte van de pagina.
Spacing options
Kleine sidenote over spacing: sommige spacings zijn relatief tot de lettergroottes van de elementen waar ze in staan. Dit is relatief tot de lettergrootte van het element waar ze in staan (row, stack, group, etc.), niet het element er voor of erna. Zie hieronder de paddings van de knoppen bij verschillende letterype-groottes als voorbeeld.
Tiny
0.25em
Tiny spacing wordt gebruikt op plekken waar behoefte is om een kleine ruimte om een object of tekst heen te creรซren. Het is een kwart van de tekst grootte van het element waar hij in gebruikt wordt. (Dit is dus relatief!)
Half text
0.5em
Half text spacing wordt gebruikt als de verticale padding in knoppen en is de helft van de tekst grootte van het element waar hij in gebruikt wordt. (Dit is dus relatief!)
Text
1em
Text spacing is net zo groot als de tekst grootte van het element en wordt gebruikt als tussenruimte bij knoppen en tussen tekstelementen. (Dit is dus relatief!)
Element
3rem
Element spacing wordt gebruikt als de gap tussen (tekst-)elementen die bij elkaar horen en heeft drie keer de grootte van het standaard Root lettertype.
Group
6rem
Group spacing wordt gebruikt als de gap tussen elementen die niet bij elkaar horen en is 6 keer de grootte van het Root lettertype. Ook word deze gebruikt als padding bij secties met gekleurde achtergronden.
Section
9rem
Section spacing wordt gebruikt voor de ruimte tussen verschillende pagina onderdelen 9 keer de grootte van het Root lettertype.
Elementen
Knoppen
Knoppen hebben aan de boven en onderkant Half text padding, aan de zijkanten is dit Half more. Toegestane kleuren zijn hierboven bij Colors te zien, daar kan je ook zien welke tekst kleur bij welke achtergrond kleur gevoerd dient te worden.
Paragraaf
De styling van paragraafteksten zijn gestijlt zoals de root tekst. Zie typografie root tekst hierboven.
Afbeelding
Koptekst
Kopteksten
Kopteksten zijn headings. Let op: het is belangrijk dat de waarde van de kop-tekst (h1 t/m h6) gekozen wordt voor SEO doeleinden, geen style doeleinden! Als je een h2 wilt die ge-styled is als een h3, kan dat via het Typografie tabje. De relevante styling is te vinden onder typografie -> headings hieboven.
Galerij
Todo: galerij styling uitwerken
Lijst
- Lijst item 1
- Lijst item 2
Todo: lijst uitwerken
Lees meer
Todo: lees meer uitwerken
Citaat
Inhoud van het Citaat
Auteur van het citaat
Todo: uitwerken styling citaat
Audio
Todo: uitwerken styling audiospeler
Kalender
Code
asdaTodo: uitwerken styling code blok
Details
Todo: uitwerken styling details element
Insluiten
Todo: uitwerken styling iFrame element
Bestand
Todo: uitwerken styling bestand
Media & tekst
Todo: uitwerken styling media & tekst
Voorgeformatteerd
Todo: uitwerken styling voor-geformateerd element
Pull-quote
Todo: uitwerken styling pull-quote
Zoeken
Todo: uitwerken styling zoekbalk
Scheidingsteken
Todo: uitwerken styling scheidingsteken
Social iconen
Todo: uitwerken styling social media iconen
Tabel
| Tabel header | Tabel header 2 |
| Tabel inhoud | Nog meer inhoud |
Todo: uitwerken styling tabellen
Strofe
Todo: uitwerken styling strofes
Video
Todo: uitwerken styling video’s
Avatar
Todo: uitwerken styling avatars
Datum
Todo: uitwerken styling datumweergave