Vad är en teckensnittstestare?

En teckensnittstestare är ett verktyg som låter dig förhandsgranska hur ett typsnitt ser ut innan du använder det i en design eller webbplats. Istället för att installera ett teckensnitt på ditt operativsystem eller bädda in det i ett projekt kan du ladda det direkt i webbläsaren och se exakt hur bokstäver, siffror och symboler återges. Detta är särskilt användbart för att utvärdera anpassade eller okända typsnitt, eftersom ett typsnitt visuella karaktär — dess proportioner, vikt, mellanrum och rytm — endast kan bedömas i sammanhanget med verklig text.

Moderna webbläsare exponerar FontFace API, vilket gör det möjligt att registrera ett teckensnitt från en lokal fil och tillämpa det på vilket element som helst på sidan utan att ladda upp något till en server. All rendering sker lokalt, så teckensnittsfilen lämnar aldrig din enhet.

Verktygsbeskrivning

Denna teckensnittstestare låter dig ladda upp en teckensnittsfil (TTF, OTF, WOFF eller WOFF2) och förhandsgranska den direkt med helt anpassningsbara typografiinställningar. Du kan justera storlek, radhöjd, bokstavsspacing, ordspacing, vikt, stil, justering och färger, och sedan se resultatet återgivet live över flera exempel — exempeltext, fullständigt alfabet, siffror, symboler och en storleksskala — för att utvärdera typsnittet från alla vinklar.

Typsnittet laddas helt i webbläsaren; ingen uppladdning, konto eller installation krävs.

Exempel

Inmatning: En anpassad .woff2-fil plus exempeltexten The quick brown fox jumps over the lazy dog.

Utmatning: En live-förhandsvisning av den meningen återgiven i det uppladdade typsnittet med vald storlek, vikt och mellanrum, plus separata paneler som visar det stora alfabetet, små alfabetet, siffror, symboler och samma pangram upprepat vid 12, 16, 20, 24, 32, 48, 64 och 96 pixlar.

Funktioner

  • Lokal teckensnittsladdning: Släpp en TTF-, OTF-, WOFF- eller WOFF2-fil och se den tillämpas omedelbar
  • Fullständiga typografikontroller: Justera teckenstorlek, radhöjd, bokstavsspacing, ordspacing, vikt, kursiv och justering
  • Färganpassning: Välj text- och bakgrundsfärger för att testa kontrast och varumärkesanpassade kombinationer
  • Flera exempel: Förhandsgranska typsnittet med anpassad text, fullständigt alfabet, siffror, symboler och en storleksskala
  • Sekretessvänlig: Filer bearbetas i din webbläsare och laddas aldrig upp till en server

Användningsfall

  • Utvärdera ett köpt eller nedladdat teckensnitt: Testa ett typsnitt över storlekar, vikter och färger innan du förbinder det till ett varumärke eller projekt
  • Testa webbteckensnittrendering: Kontrollera hur en .woff2-fil faktiskt visas i webbläsaren, inklusive kerning, mellanrum och kursiv stil
  • Designa typografi för en webbplats eller app: Iterera snabbt på teckenstorlek, radhöjd och bokstavsspacing för att hitta rätt kombination

Format som stöds

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

Alternativ förklarade

  • Exempeltext — Texten som visas i huvudförhandsvisningspanelen; stöder flera rader.
  • Teckenstorlek — Storlek på huvudförhandsvisningstexten i pixlar (8–200). Alfabet-, siffror- och symbolpanelerna återges vid 75 % av detta värde.
  • Radhöjd — Vertikalt mellanrum mellan rader, uttryckt som en procentandel av teckenstorleken (50–300%).
  • Bokstavsspacing — Extra mellanrum mellan enskilda tecken, i pixlar (-10 till 30). Negativa värden stramar åt texten.
  • Ordspacing — Extra mellanrum mellan ord, i pixlar (-10 till 50).
  • Tecknenvikt — Numerisk vikt från 100 (Thin) till 900 (Black). Endast vikter som faktiskt ingår i teckensnittsfilen återges distinkt; andra simuleras av webbläsaren.
  • Kursiv — Växlar font-style: italic. Om typsnittet inte har någon kursiv variant kan webbläsaren syntetisera en lutad version.
  • Textjustering — Vänster, center, höger eller justering för förhandsvisningspanelerna.
  • Textfärg / Bakgrundsfärg — Färger som används i alla förhandsvisningspaneler, användbar för att förhandsgranska typsnittet på dess avsedda bakgrund.

Tips

  • Vissa typsnitt levereras endast med en enda vikt; att byta till fetstil eller tunn kan se identisk ut eller falla tillbaka till en syntetisk webbläsarstil. Kontrollera teckensnittets dokumentation om en vikt ser fel ut.
  • Använd storleksskalapanelen för att upptäcka typsnitt som ledas dåligt vid små storlekar — ett typsnitt som ser elegant ut vid 64px kan bli oläsligt vid 12px.
  • Testa ditt teckensnitt mot både ljusa och mörka bakgrunder; tunna vikter försvinner ofta på mörka bakgrunder och måste ökas.
  • Jämför stora och små alfabetpaneler sida vid sida för att utvärdera x-höjd, versalhöjd och övergripande rytm.

Begränsningar

  • Variabla teckensnittaxlar bortom standard vikt och kursiv exponeras inte individuellt.
  • OpenType-funktioner såsom ligaturer, stilistiska alternativ och små versaler återges med webbläsarens standardvärden och kan inte växlas i användargränssnittet.
  • Mycket stora teckensnittsfiler kan ta en stund att ladda och analysera.