Een lettertype kiezen dat niet naar AI ruikt

Wij gebruiken Inter, ook op deze pagina. Toch staat Inter in elke lijst met kenmerken van AI-websites, ook in die van ons. Dat is geen tegenspraak. Een letter ruikt niet naar AI. Een site waarop één letter alles doet, omdat hij met de tool meekwam, wel.

Hieronder staat waarom AI bij Inter uitkomt, hoe je zelf een combinatie kiest, en hoe je de letters op je site zet. Voor dat laatste gebruiken we deze site als voorbeeld, met de echte bestanden en de echte bestandsgroottes.

Herken je dit?

Inter is de standaard van de standaarden

Alle voorbeelden van Tailwind UI zijn in Inter gemaakt, en de startcode van Next.js laadde Inter tot 2024 standaard. Wie de afgelopen jaren een React-project begon, had dus vaak Inter op regel één, en uit zulke openbare code leerden de modellen. Vraagt niemand om een andere letter, dan wordt het Inter.

Daarmee is niets mis met de letter. Inter is ontworpen voor schermen, heeft een grote x-hoogte, cijfers die netjes onder elkaar staan in een prijslijst, en alle gewichten in één variabel bestand. Het probleem is wat ontbreekt: een tweede letter met een eigen taak.

Op deze site staan de koppen in Kanit ExtraBold, altijd in hoofdletters. Kanit is breed en zwaar en draagt het karakter. Alles wat je leest, staat in Inter, die niet opvalt en daarom lang leesbaar blijft. Het verschil tussen die twee is de keuze.

Zo kies je een letter en zet je hem op je site

1. Kies de letter voor de koppen eerst

Bedenk drie woorden die je bedrijf beschrijven als een ding dat je kunt vastpakken: een werkbank, een bouwbord, een kassabon. “Modern” is geen ding. Zoek daarmee in een catalogus als Google Fonts of bij een letteruitgever, en bekijk elke kandidaat met je eigen koptekst, op de grootte waarop hij komt te staan.

Test ook wat Nederlands vraagt: een IJ aan het begin van een woord in hoofdletters, accenten op één en geïnstalleerd, het euroteken en cijfers.

ÉÉN KETEL, GEÏNSTALLEERD IN IJSSELMONDE.
Eén ketel, geïnstalleerd in IJsselmonde.
€ 1.234,56   0123456789   12:30

2. Kies de tekstletter op verschil

Zet twee letters naast elkaar die duidelijk verschillen: een zware brede kop met een rustige tekstletter, of een kop met schreven boven tekst zonder schreven. Twee schreefloze letters die bijna gelijk zijn, ogen als een vergissing. Test de tekstletter op een telefoon, met een alinea van je eigen tekst op 16 tot 18 pixels.

3. Lees de licentie

Inter en Kanit staan allebei onder de SIL Open Font License 1.1, zonder gereserveerde fontnaam. Je mag ze zelf hosten, kleiner maken en onder hun eigen naam serveren. Heeft een letter onder die licentie wel een gereserveerde naam, dan is een verkleinde versie volgens de FAQ van de licentie een gewijzigde versie, die die naam niet mag dragen tenzij de maker toestemming geeft.

Een betaalde letter heeft meestal een aparte licentie voor het web, vaak geprijsd op het aantal paginaweergaven per maand. Dat je een letter in een ontwerpprogramma mag gebruiken, betekent niet dat je hem op je website mag zetten.

4. Host de bestanden zelf

Laad je een letter van de servers van Google, dan gaat het IP-adres van elke bezoeker naar Google. Een Duitse rechter (Landgericht München, 20 januari 2022) kende een bezoeker daarvoor een schadevergoeding toe. Zelf hosten haalt die verbinding weg en is sneller, omdat de browser geen tweede server hoeft te benaderen.

@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Inter-Variable-latin.woff2') format('woff2');
}

<link rel="preload" href="/fonts/Inter-Variable-latin.woff2"
      as="font" type="font/woff2" crossorigin>

Het attribuut crossorigin op de preload is nodig, ook op je eigen domein. Zonder dat attribuut downloadt de browser het bestand twee keer.

5. Laad alleen de tekens die je gebruikt

Een letterbestand bevat tekens voor talen die je site nooit toont. Met pyftsubset, uit het gratis pakket fonttools, maak je een kleinere versie met alleen het Latijnse schrift. Op deze site ging Inter daarmee van 877 kB als TTF-bestand naar 65 kB als woff2, en Kanit ExtraBold van 178 kB naar 19 kB.

pip install fonttools brotli

pyftsubset Inter-Variable.ttf --flavor=woff2 \
  --unicodes="U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212" \
  --output-file=Inter-Variable-latin.woff2

U+0000-00FF dekt de gewone letters en de accenten van ë, é en ï. U+2000-206F bevat de krullende aanhalingstekens en de streepjes. U+20AC is het euroteken. Laat je die weg, dan staat elke prijs op je site in een andere letter.

6. Voorkom dat de tekst verspringt

Met font-display: swap toont de browser eerst een systeemletter en wisselt hij als jouw letter binnen is. Is die systeemletter breder of smaller, dan verspringt de pagina. Een vervangende letter met aangepaste maten voorkomt dat.

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.1194%;
  ascent-override: 90.4365%;
  descent-override: 22.518%;
  line-gap-override: 0%;
}

body { font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif; }

Waar het misgaat

Wanneer je hulp nodig hebt

Wil je dat iemand de letters kiest, de licentie nakijkt en ze snel laadt, dan hoort dat bij AI-design laten verbeteren. Is je site vooral traag, lees dan eerst hoe je een trage website sneller maakt. Meer over ontwerpen met AI-tools staat bij AI-design.