Webdesign - Font-family.

Welk lettertype hoort bij welke font-family

Generische font family

Om optimaal gebruik te kunnen maken van de mogelijkheden, is het verstandig, na het kiezen van een geschikt font voor uw webontwerp, te kijken tot welke familie deze behoort.

In CSS bestaat namelijk de mogelijkheid een tweede en derde font op te geven, waarbij mocht geen van de genoemde fonts aanwezig zijn, een keuze gemaakt wordt uit de font-familie waartoe deze behoren.

Wanneer geen enkel opgegeven lettertype en ook de famlie niet beschikbaar zijn, wordt het standaard lettertype van de browser gebruikt.

Meer: W3C font-families

Vijf generische font-families

Browsers zouden in elk geval voor elk van de vijf generische font-families een aantal standaard fonts beschikbaar moeten stellen. Welke fonts dat zijn, kan per browser verschillen. Hier dient u bij uw keuze rekening mee te houden.

Ook in onderstaande voorbeelden kan het zijn dat het beoogde lettertype hierdoor niet wordt weergegeven!

Een 'veilige' keuze kunt u het beste maken uit de veilige lijst van beschikbare fonts.

In onderstaande tabel is derhalve ook een voorbeeld in de vorm van een afbeelding opgenomen (3e kolom) waarin het lettertype staat afgebeeld.

SERIF

Voorbeelden van de hiertoe behorende fonts:

Lettertype Tekst Afbeelding
Times New Roman Een tekst in het lettertype Times New Roman ziet er zo uit. font times new roman
Bodoni Een tekst in het lettertype Bodoni ziet er zo uit.
Garamond Een tekst in het lettertype Garamond ziet er zo uit. font garamond
Minion Web Een tekst in het lettertype Minion Web ziet er zo uit.
ITC Stone Serif Een tekst in het lettertype ITC Stone Serif ziet er zo uit.
Georgia Een tekst in het lettertype Georgia ziet er zo uit. font georgia
Bitstream Cyberbit Een tekst in het lettertype Bitstream Cyberbit ziet er zo uit.

SANS-SERIF

Voorbeelden van de hiertoe behorende fonts:

Lettertype Tekst Afbeelding
Trebuchet MS Een tekst in het lettertype MS Trebuchet ziet er zo uit. font Trebuchet MS
ITC Avant Garde Gothic Een tekst in het lettertype ITC Avant Garde Gothic ziet er zo uit.
Arial Een tekst in het lettertype Arial ziet er zo uit. font arial
Verdana Een tekst in het lettertype Verdana ziet er zo uit. font verdana
Univers Een tekst in het lettertype Univers ziet er zo uit.
Futura Een tekst in het lettertype Futura ziet er zo uit.
ITC Stone Sans Een tekst in het lettertype ITC Stone Sans ziet er zo uit.
Gill Sans Een tekst in het lettertype Gill Sans ziet er zo uit.
Akzidenz Grotesk Een tekst in het lettertype Akzidenz Grotesk ziet er zo uit.
Helvetica Een tekst in het lettertype Helvetica ziet er zo uit.

CURSIVE

Voorbeelden van de hiertoe behorende fonts:

Lettertype Tekst Afbeelding
Brush Script Een tekst in het lettertype Brush Script ziet er zo uit.
Caflisch Script Een tekst in het lettertype Caflisch Script ziet er zo uit.
Flemish Script Een tekst in het lettertype Flemish Script ziet er zo uit.
Comic Sans MS Een tekst in het lettertype Comic Sans MS ziet er zo uit. font comicsans ms
Adobe Poetica Een tekst in het lettertype Adobe Poetica ziet er zo uit.
Sanvito Een tekst in het lettertype Sanvito ziet er zo uit.
Ex Ponto Een tekst in het lettertype Ex Ponto ziet er zo uit.
Snell Roundhand Een tekst in het lettertype Snell Roundhand ziet er zo uit.
Zapf-Chancery Een tekst in het lettertype Zapf-Chancery ziet er zo uit.

FANTASY

Fantasy fonts, zoals gebruikt in CSS, zijn slechts decoratief bedoelt! Enkele voorbeelden:

Lettertype Tekst Afbeelding
Allegro Een tekst in het lettertype Allegro ziet er zo uit.
Western Een tekst in het lettertype Western ziet er zo uit.
Alpha Geometrique Een tekst in het lettertype Alpha Geometrique ziet er zo uit.
Critter Een tekst in het lettertype Critter ziet er zo uit.
Cottonwood Een tekst in het lettertype Cottonwood ziet er zo uit.
FB Reactor Een tekst in het lettertype FB Reactor ziet er zo uit.
Studz Een tekst in het lettertype Studz ziet er zo uit.

MONOSPACE

Voorbeelden van de hiertoe behorende fonts:

Lettertype Tekst Afbeelding
Courier Een tekst in het lettertype Courier ziet er zo uit.
Courier New Een tekst in het lettertype Courier New ziet er zo uit. font Courier New
Prestige Een tekst in het lettertype Prestige ziet er zo uit.
Everson Mono Een tekst in het lettertype Everson Mono ziet er zo uit.

In bovenstaande voorbeelden hebben we ons beperkt tot de Latin lettertypen. Vanzelfsprekend bestaan er daarnaast ook nog:

  • Greek fonts,
  • Cyrillic fonts,
  • Hebrew fonts,
  • Japanese fonts,
  • Arabic fonts en
  • Cherokee fonts

Welk font is dit?

Het komt nogal eens voor dat u een font ziet op een website en dat u niet weet welk font dat nu toch zou kunnen zijn. Een handige site om dit voor u uit te laten zoeken is: What the font.

Webontwerp:

  • Functioneel ontwerp
    Het functioneel ontwerp geeft inzicht in de structuur en opbouw van de te bouwen website. Het is een schematisch overzicht dat de antwoorden van de vragen; "Welke informatie moet erop komen? Welke informatie moet er niet op komen? Voor wie is de informatie bedoeld? Hoe wordt informatie ontsloten en beschikbaar gesteld? Welke techniek wordt gebruikt?" etc. bevat.
  • Webdesign tools
    Links naar handige programma's en tools voor het maken van een goed webontwerp.
  • Webontwerp - toegankelijk bouwen
    Toegankelijk bouwen, ook wel accessibility, wat is dat en waartoe dient het?
  • Webdesign - Inhoud
    Mensen zoeken naar informatie, uitleg over hoe bepaalde zaken werken, wat er gebeurde op een bepaalde datum of simpelweg vermaak in de vorm van verhalen en anekdotes. Als u daarbij in acht neemt dat we in een informatietijdperk leven, begrijpt u waarom inhoud het hart van uw webontwerp is!
  • Webdesign - Tips
    Hoe en waarmee maak je een goed webontwerp en waar moet je op letten bij het bouwen van je website?
  • Webdesign missers
    Miskleunen, missers en doodzonden in webontwerp.
  • Webdesign - Font kiezen
    Welk lettertype - font gebruikt u voor uw website en hoe wordt deze opgegeven.

 

Webdesign - Fonts - Lettertype