Wat is een lettertypetester?

Een lettertypetester is een tool waarmee je kunt voorvertonen hoe een lettertype eruit ziet voordat je het in een ontwerp of website gebruikt. In plaats van een lettertype op je besturingssysteem te installeren of in een project in te sluiten, kun je het rechtstreeks in de browser laden en precies zien hoe letters, cijfers en symbolen worden weergegeven. Dit is vooral handig voor het evalueren van aangepaste of onbekende lettertypen, omdat het visuele karakter van een lettertype — de verhoudingen, dikte, spatiëring en ritme — alleen in context met echte tekst kan worden beoordeeld.

Moderne browsers stellen de FontFace API beschikbaar, waardoor het mogelijk is om een lettertype uit een lokaal bestand te registreren en toe te passen op elk element op de pagina zonder iets naar een server te uploaden. Alle weergave gebeurt lokaal, dus het lettertypebestand verlaat je apparaat nooit.

Beschrijving van de tool

Deze lettertypetester stelt je in staat om een lettertypebestand (TTF, OTF, WOFF of WOFF2) te uploaden en het direct voor te vertonen met volledig aanpasbare typografische instellingen. Je kunt grootte, regelafstand, letterspatiëring, woordspatiëring, dikte, stijl, uitlijning en kleuren aanpassen, en vervolgens het resultaat live zien weergegeven in meerdere voorbeelden — voorbeeldtekst, volledig alfabet, cijfers, symbolen en een schaalverdeling — om het lettertype vanuit elk perspectief te evalueren.

Het lettertype wordt volledig in de browser geladen; geen upload, account of installatie is vereist.

Voorbeelden

Invoer: Een aangepast .woff2-bestand plus de voorbeeldtekst The quick brown fox jumps over the lazy dog.

Uitvoer: Een live voorvertoning van die zin weergegeven in het geüploade lettertype met de gekozen grootte, dikte en spatiëring, plus afzonderlijke panelen met het hoofdletteralfabet, het kleine-letteralfabet, cijfers, symbolen en dezelfde pangram herhaald op 12, 16, 20, 24, 32, 48, 64 en 96 pixels.

Functies

  • Lokaal lettertype laden: Sleep een TTF-, OTF-, WOFF- of WOFF2-bestand in en zie het onmiddellijk toegepast
  • Volledige typografische besturingselementen: Pas lettergrootte, regelafstand, letterspatiëring, woordspatiëring, dikte, cursief en uitlijning aan
  • Kleuraanpassing: Kies tekst- en achtergrondkleuren om contrast en merkconforme combinaties te testen
  • Meerdere voorbeelden: Bekijk het lettertype met aangepaste tekst, het volledige alfabet, cijfers, symbolen en een schaalverdeling
  • Privacyvriendelijk: Bestanden worden in je browser verwerkt en nooit naar een server geüpload

Gebruiksscenario's

  • Een gekocht of gedownload lettertype evalueren: Probeer een lettertype in verschillende groottes, diktes en kleuren voordat je het aan een merk of project toewijdt
  • Weblettertype-weergave testen: Controleer hoe een .woff2-bestand daadwerkelijk in de browser wordt weergegeven, inclusief kerning, spatiëring en cursieve stijl
  • Typografie voor een website of app ontwerpen: Itereer snel op lettergrootte, regelafstand en letterspatiëring om de juiste combinatie te vinden

Ondersteunde formaten

  • TTF (TrueType Font)
  • OTF (OpenType Font)
  • WOFF (Web Open Font Format)
  • WOFF2 (Web Open Font Format 2.0)

Opties uitgelegd

  • Voorbeeldtekst — De tekst die in het hoofdvoorvertoningspaneel wordt weergegeven; ondersteunt meerdere regels.
  • Lettergrootte — Grootte van de voorvertoningst ekst in pixels (8–200). De alfabet-, cijfer- en symboolpanelen worden weergegeven op 75% van deze waarde.
  • Regelafstand — Verticale spatiëring tussen regels, uitgedrukt als percentage van de lettergrootte (50–300%).
  • Letterspatiëring — Extra spatie tussen individuele tekens, in pixels (-10 tot 30). Negatieve waarden verkleinen de tekst.
  • Woordspatiëring — Extra spatie tussen woorden, in pixels (-10 tot 50).
  • Letterdikte — Numerieke dikte van 100 (Thin) tot 900 (Black). Alleen diktes die daadwerkelijk in het lettertypebestand zijn opgenomen, worden duidelijk weergegeven; anderen worden door de browser gesimuleerd.
  • Cursief — Schakelt font-style: italic in. Als het lettertype geen cursieve variant heeft, kan de browser een schuine versie synthetiseren.
  • Tekstuitlijning — Links-, midden-, rechts- of uitgevulde uitlijning voor de voorvertoningspanelen.
  • Tekstkleur / Achtergrondkleur — Kleuren die in elk voorvertoningspaneel worden gebruikt, handig voor het voorvertonen van het lettertype op de beoogde achtergrond.

Tips

  • Sommige lettertypen hebben slechts één dikte; overschakelen naar vet of dun kan identiek lijken of terugvallen op een synthetische browserstijl. Controleer de documentatie van het lettertype als een dikte er verkeerd uitziet.
  • Gebruik het schaalverdeling-paneel om lettertypen op te sporen die slecht worden weergegeven bij kleine groottes — een lettertype dat elegant uitziet op 64px kan onleesbaar worden op 12px.
  • Test je lettertype tegen zowel lichte als donkere achtergronden; dunne gewichten verdwijnen vaak op donkere achtergronden en moeten worden verhoogd.
  • Vergelijk de panelen met hoofdletters en kleine letters naast elkaar om x-hoogte, kapitaalhoogte en algemeen ritme te evalueren.

Beperkingen

  • Variabele lettertypeas sen buiten standaard dikte en cursief worden niet afzonderlijk weergegeven.
  • OpenType-functies zoals ligaturen, stilistische alternatieven en kleine kapitalen worden weergegeven met behulp van de standaardinstellingen van de browser en kunnen niet in de UI worden in-/uitgeschakeld.
  • Zeer grote lettertypebestanden kunnen even duren om te laden en te parseren.