De lettertypes en het gebruik

Net als bij de kleuren is het voor de uniformiteit best om niet te veel verschillende fonts te gebruiken. 2 tot 3 zou normaal moeten volstaan.
Daarbij nemen we een lettertype voor de teksten, eentje voor de titels (dat kan hetzelfde zijn of variant) en eentje om accenten te leggen of contrasten te maken. 

De titels (=headers) worden ingedeeld volgens hierarchie. Van <h1> tot <h6> met daarnaast de gewone tekst (paragraph).
Ze zijn niet alleen belangrijk voor de stijl en lay-out.  Ook in functie van zoekmachines is het van belang de headers op een correcte manier te gebruiken (vb: slechts 1 <h1> per pagina). 

Afhankelijk van je wensen kunnen we natuurlijk altijd meer en/of andere fonts selecteren

De fonts of lettertypes

Ik geef een overzichtje van de fonts die werden gebruikt. Op de huidige site worden de header tags niet altijd correct ingezet.  
Het overzicht volgens header-tag is dus niet helemaal hiërarchisch, maar brengt de gebruikte fonts wel in beeld.

Het lettertype “avenir-lt-w01_35-light1475496 – 400″ wordt momenteel meest gebruikt (zowel teksten als titels). Toeval of niet, tijdens mijn zoektocht kwam ik het vooral tegen bij Wix sites. Het lettertype Dancingscript zorgt voor accenten.

In een zoektoch naar een mooie combinatie heb ik niet alleen rekening gehouden met de huidige site, maar ook met je logo en andere (fysieke) promo materiaal.

Ik denk niet dat we persé dezelfde lettertypes moeten gebruiken, tegelijk is een totale stijlbreuk zeker ook niet de bedoeling.

Klik op de tabbladen voor een overzicht van de huidige fonts en enkele voorstellen voor de remake. 

Letterypes zijn soms moeilijk te beoordelen en zorgen soms voor keuzestress. Zoek het niet te ver, volg gerust je gevoel.  Misschien nog belangrijker dan de fonts zelf, is het gebruik ervan. Door ze consistent te gebruiken ontstaat uniformiteit, voorspelbaarheid en rust. 

Om de fonts iets makkelijker te vergelijken kan je hieronder enkele voorbeelden bekijken. Het zijn simpele combinaties om de fonts in ‘actie’ te zien.

Header 1: Avenir-it-w01_35

Avenir is a sans-serif font. It goes well with Didot, Georgia, Minion, Helvetica Neue, Comfortaa, Sabon Next, Century School, Pompiere, Helvetica and Brandon Grotesque. Avenir: 30px headers / 14px content.

font-family:avenir-lt-w01_35-light1475496,sans-serif
font-size:20px
color:#000000
font-weight: normal;


Header 2: Dancingscript-regular-400

Heading 2: Dancingscript-regular – 400

font-family:dancingscript-regular
font-weight:normal
font-size:44px;
color:#292929;

Knop: Dancingscript-regular-400

Knop: Dancingscript-regular – 400

font: dancingscript-regular
weight: normal
size: 29px
height: 1.4em ,
style:cursive;

Paragraaf: Avenir-it-w01_35

Paragraph: avenir-lt-w01_35-light1475496, 400 Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nunc ut ipsum eget ligula sollicitudin mollis. Aenean eget diam leo. Sed dolor velit, tempor id turpis vitae, sagittis aliquet elit. Aliquam pellentesque, erat id pellentesque dignissim, magna ex varius urna, a vulputate metus libero et erat.

font-family:avenir-lt-w01_35-light1475496,sans-serif;
font-size:16px;
line-height:1.4em;
color:#000000
font-weight:normal

Header 1: Contrail One

Contrail One

font-family: contrail one
font-size: 80px
color:#000000
font-weight: normal;

 

Header 2: Contrail One

Contrail One

font-family: contrail one
font-size: 50px
color:#000000
font-weight: normal;

 

Header 3: Contrail One

Contrail One

font-family: contrail one
font-size: 32px
color:#000000
font-weight: normal;

 

Header 4: Seaweed script

Seaweed Script

font-family: Seaweed Script
font-size: 42px
color:#000000
font-weight: normal;

 

Paragraaf: Montserrat

Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nunc ut ipsum eget ligula sollicitudin mollis. Aenean eget diam leo. Sed dolor velit, tempor id turpis vitae, sagittis aliquet elit. Aliquam pellentesque, erat id pellentesque dignissim, magna ex varius urna, a vulputate metus libero et erat.

font-family:Montserrat
font-size:16px;
line-height:1.4em;
color:#000000
font-weight:normal

Header 1: Montserrat

Montserrat

font-family:Montserrat 
font-size:72px
color:#000000
font-weight: bold;

 

Header 2: Montserrat

Montserrat

font-family:Montserrat 
font-size:42px
color:#000000
font-weight: normal;

 

Header 3: Montserrat

Montserrat

font-family:Montserrat 
font-size:28px
color:#000000
font-weight: normal;

 

Header 4: Seaweed script

Heading 4: Seaweed Script

font-family: Seaweed script
font-weight:normal
font-size:44px;
color:#00000;

Paragraaf: Montserrat

Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nunc ut ipsum eget ligula sollicitudin mollis. Aenean eget diam leo. Sed dolor velit, tempor id turpis vitae, sagittis aliquet elit. Aliquam pellentesque, erat id pellentesque dignissim, magna ex varius urna, a vulputate metus libero et erat.

font-family:Montserrat
font-size:16px;
line-height:1.4em;
color:#000000
font-weight:normal

Header 1: Roboto Slab

Roboto slab

font-family: Roboto Slab
font-size:72px
color:#000000
font-weight: bold;

 

Header 2: Roboto Slab

Roboto slab

font-family: Roboto Slab
font-size:42px
color:#000000
font-weight: normal;

 

Header 3: Roboto Slab

Roboto Slab​

font-family: Roboto Slab
font-size:28px
color:#000000
font-weight: normal;

Header 4: Seaweed script

Heading 4: Seaweed Script

font-family: Seaweed script
font-weight:normal
font-size:44px;
color:#00000;

Paragraaf: Roboto

Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nunc ut ipsum eget ligula sollicitudin mollis. Aenean eget diam leo. Sed dolor velit, tempor id turpis vitae, sagittis aliquet elit. Aliquam pellentesque, erat id pellentesque dignissim, magna ex varius urna, a vulputate metus libero et erat.

font-family:Roboto 
font-size:16px;
line-height:1.4em;
color:#000000
font-weight:normal

Geschreven lettertypes:

Caveat - L'Atelier Sucré

Caveat Brush- L'Atelier Sucré

Miss Fajardon- L'Atelier Sucré

Mr Darfoe - L'Atelier Sucré

Alex Brush - L'Atelier Sucré

Lettertype bestanden hebben meestal de extensie:  .OTF of .TTC of .ttf of .FNT

roboto

Montserrat orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor sit amet, consectetur adipiscing.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ut ipsum eget ligula sollicitudin mollis. Aenean eget diam leo. Sed dolor velit, tempor id turpis vitae, sagittis aliquet elit. Aliquam pellentesque, erat id pellentesque dignissim, magna ex varius urna, a vulputate metus libero et erat.

Roboto

Montserrat orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor sit amet, consectetur adipiscing.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ut ipsum eget ligula sollicitudin mollis. Aenean eget diam leo. Sed dolor velit, tempor id turpis vitae, sagittis aliquet elit. Aliquam pellentesque, erat id pellentesque dignissim, magna ex varius urna, a vulputate metus libero et erat.

Montserrat

Lora italic fonts: ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor sit amet, consectetur adipiscing.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ut ipsum eget ligula sollicitudin mollis. Aenean eget diam leo. Sed dolor velit, tempor id turpis vitae, sagittis aliquet elit. Aliquam pellentesque, erat id pellentesque dignissim, magna ex varius urna, a vulputate metus libero et erat.

Montserrat

Lora italic fonts: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor sit amet, consectetur adipiscing .

Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ut ipsum eget ligula sollicitudin mollis. Aenean eget diam leo. Sed dolor velit, tempor id turpis vitae, sagittis aliquet elit. Aliquam pellentesque, erat id pellentesque dignissim, magna ex varius urna, a vulputate metus libero et erat.

Esteban

Montserrat orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor sit amet, consectetur adipiscing.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ut ipsum eget ligula sollicitudin mollis. Aenean eget diam leo. Sed dolor velit, tempor id turpis vitae, sagittis aliquet elit. Aliquam pellentesque, erat id pellentesque dignissim, magna ex varius urna, a vulputate metus libero et erat.

Montserrat

Esteban ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor sit amet, consectetur adipiscing.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ut ipsum eget ligula sollicitudin mollis. Aenean eget diam leo. Sed dolor velit, tempor id turpis vitae, sagittis aliquet elit. Aliquam pellentesque, erat id pellentesque dignissim, magna ex varius urna, a vulputate metus libero et erat.

Contrail One

Lusitana orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor sit amet, consectetur adipiscing .

Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ut ipsum eget ligula sollicitudin mollis. Aenean eget diam leo. Sed dolor velit, tempor id turpis vitae, sagittis aliquet elit. Aliquam pellentesque, erat id pellentesque dignissim, magna ex varius urna, a vulputate metus libero et erat.

Contrail One

Lustria orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor sit amet, consectetur adipiscing .

Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ut ipsum eget ligula sollicitudin mollis. Aenean eget diam leo. Sed dolor velit, tempor id turpis vitae, sagittis aliquet elit. Aliquam pellentesque, erat id pellentesque dignissim, magna ex varius urna, a vulputate metus libero et erat.

Montserrat

Josefin sans orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor sit amet, consectetur adipiscing .

Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ut ipsum eget ligula sollicitudin mollis. Aenean eget diam leo. Sed dolor velit, tempor id turpis vitae, sagittis aliquet elit. Aliquam pellentesque, erat id pellentesque dignissim, magna ex varius urna, a vulputate metus libero et erat.

Roboto

Josefin sans orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor sit amet, consectetur adipiscing .

Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ut ipsum eget ligula sollicitudin mollis. Aenean eget diam leo. Sed dolor velit, tempor id turpis vitae, sagittis aliquet elit. Aliquam pellentesque, erat id pellentesque dignissim, magna ex varius urna, a vulputate metus libero et erat.

Contrail One

Dancing script

Montserrat

Dancing script

Roboto mono

Dancing script

Roboto Slab

Dancing script

Esteban

Dancing script

Contrail One

Dancing script

Montserrat

Dancing script

Roboto mono

Dancing script

Roboto Slab

Dancing script

ESTEBAN

Dancing script

Contrail One

Seaweed script

Montserrat

Seaweed script

Roboto mono

Seaweed script

Roboto Slab

Seaweed script

ESTEBAN

Seaweed script

Contrail One

Seaweed script

Montserrat

Seaweed script

Roboto mono

Seaweed script

Roboto Slab

Seaweed script

Esteban

Seaweed script

Roboto Slab (header) + Roboto (tekst)

Subtitle

About Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Mauris eros dolor pellentesque sed luctus dapibus lobortis orci.

Our History

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat justo sed efficitur cursus. Mauris fringilla quam vitae lacinia viverra. Mauris eros dolor, pellentesque sed luctus dapibus, lobortis a orci.

Eu ultrices vitae auctor eu augue ut. Feugiat sed lectus vestibulum mattis ullamcorper velit. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Imperdiet sed euismod nisi porta. Auctor neque vitae tempus quam pellentesque. Sit amet nisl purus in mollis nunc. Ipsum dolor sit amet consectetur adipiscing. Non curabitur gravida arcu ac tortor dignissim convallis aenean. Quisque egestas diam in arcu. In mollis nunc sed id semper risus in.

Mission

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat justo sed efficitur cursus. Mauris fringilla quam vitae lacinia viverra Mauris eros dolor.

Vision

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat justo sed efficitur cursus. Mauris fringilla quam vitae lacinia viverra Mauris eros dolor.

Montserrat (all)

Subtitle

About Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Mauris eros dolor pellentesque sed luctus dapibus lobortis orci.

Our History

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat justo sed efficitur cursus. Mauris fringilla quam vitae lacinia viverra. Mauris eros dolor, pellentesque sed luctus dapibus, lobortis a orci.

Eu ultrices vitae auctor eu augue ut. Feugiat sed lectus vestibulum mattis ullamcorper velit. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Imperdiet sed euismod nisi porta. Auctor neque vitae tempus quam pellentesque. Sit amet nisl purus in mollis nunc. Ipsum dolor sit amet consectetur adipiscing. Non curabitur gravida arcu ac tortor dignissim convallis aenean. Quisque egestas diam in arcu. In mollis nunc sed id semper risus in.

Mission

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat justo sed efficitur cursus. Mauris fringilla quam vitae lacinia viverra Mauris eros dolor.

Vision

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat justo sed efficitur cursus. Mauris fringilla quam vitae lacinia viverra Mauris eros dolor.

Header Contrail One + Tekst Montserrat

Subtitle

About Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Mauris eros dolor pellentesque sed luctus dapibus lobortis orci.

Our History

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat justo sed efficitur cursus. Mauris fringilla quam vitae lacinia viverra. Mauris eros dolor, pellentesque sed luctus dapibus, lobortis a orci.

Eu ultrices vitae auctor eu augue ut. Feugiat sed lectus vestibulum mattis ullamcorper velit. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Imperdiet sed euismod nisi porta. Auctor neque vitae tempus quam pellentesque. Sit amet nisl purus in mollis nunc. Ipsum dolor sit amet consectetur adipiscing. Non curabitur gravida arcu ac tortor dignissim convallis aenean. Quisque egestas diam in arcu. In mollis nunc sed id semper risus in.

Mission

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat justo sed efficitur cursus. Mauris fringilla quam vitae lacinia viverra Mauris eros dolor.

Vision

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat justo sed efficitur cursus. Mauris fringilla quam vitae lacinia viverra Mauris eros dolor.

Header Esteban + Tekst Josefin sans

Subtitle

About Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Mauris eros dolor pellentesque sed luctus dapibus lobortis orci.

Our History

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat justo sed efficitur cursus. Mauris fringilla quam vitae lacinia viverra. Mauris eros dolor, pellentesque sed luctus dapibus, lobortis a orci.

Eu ultrices vitae auctor eu augue ut. Feugiat sed lectus vestibulum mattis ullamcorper velit. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Imperdiet sed euismod nisi porta. Auctor neque vitae tempus quam pellentesque. Sit amet nisl purus in mollis nunc. Ipsum dolor sit amet consectetur adipiscing. Non curabitur gravida arcu ac tortor dignissim convallis aenean. Quisque egestas diam in arcu. In mollis nunc sed id semper risus in.

Mission

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat justo sed efficitur cursus. Mauris fringilla quam vitae lacinia viverra Mauris eros dolor.

Vision

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat justo sed efficitur cursus. Mauris fringilla quam vitae lacinia viverra Mauris eros dolor.

Combinaties

Montserrat

Mr Dafoe script

Contrail One: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor sit amet, consectetur adipiscing .

Montserrat: Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ut ipsum eget ligula sollicitudin mollis. Aenean eget diam leo. 

Montserrat

Dancing script

Roboto

Dancing script

Roboto: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor sit amet, consectetur adipiscing .

Esteban: Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ut ipsum eget ligula sollicitudin mollis. Aenean eget diam leo. 

Montserrat

Caveeat script

Scroll to Top