Typografie en de type-scale tool
Beheer je tekst-stijlen per device en laat de type-scale tool een nette reeks formaten voor je uitrekenen.
± 9 min lezen
Consistente typografie is wat een offerte er verzorgd uit laat zien. In plaats van elk tekst-element los in te stellen, beheer je centrale tekst-stijlen op de Stijl-pagina en koppel je je teksten daaraan. Pas je later een stijl aan, dan verandert alles wat eraan hangt in één keer mee.
De stijlen werken met t-shirt-labels: Display XL/L/M/S/XS voor grote titels, Headline voor koppen, Body voor lopende tekst en Label voor kleine bijschriften. Elk label heeft per device (Desktop, Mobiel, PDF) zijn eigen grootte, zodat een titel op een telefoon niet van de pagina loopt en in de pdf netjes past.
De formaten hoef je niet handmatig te verzinnen. De type-scale tool rekent een hele reeks voor je uit op basis van een curve, een minimum en maximum grootte, het aantal stappen en de regelafstand. Je sleept aan de curve, ziet de voorbeelden live mee bewegen, en koppelt elke stap aan een label. Deze gids loopt door beide schermen heen.
Wat kun je hiermee
- Tekst-stijlen beheren per device: Desktop, Mobiel en PDF apart
- Werken met t-shirt-labels: Display XL/L/M/S/XS, Headline, Body en Label
- Elke grootte zien als concreet voorbeeld met het px-formaat ernaast
- Een hele reeks formaten genereren met de type-scale tool via een curve
- Font, gewicht, aantal stappen, min/max grootte en regelafstand instellen
- De stijlen exporteren als JSON om ze te bewaren of te hergebruiken
Voor je begint
- Je hebt een offerte geopend in de editor
- Je weet welk lettertype je wilt gebruiken (zie eventueel "Eigen lettertypen gebruiken")
- 1
Open de Stijl-pagina
Klik links bij Speciale pagina’s op "Stijl". Daar staan al je tekst-stijlen, gegroepeerd per categorie.
De Stijl-pagina toont per categorie (Display, Headline, Body, Label) de stijlen met een voorbeeld en het px-formaat ernaast, bijvoorbeeld Display XL op 64px en Display L op 55,5px.
Bovenaan staan de pills Desktop, Mobiel en PDF. Schakel ertussen om de formaten per device te zien en aan te passen; ze worden los van elkaar bewaard.
per categorie een rijtje stijlen met live voorbeeld en het px-formaat - 2
Koppel teksten aan een stijl-token
Selecteer een tekst-element op de canvas en kies een stijl zoals Headline L in plaats van losse waarden in te stellen.
Door een tekst aan een token te koppelen, hoort ’ie bij een vaste stijl. Pas je die stijl later aan, dan verandert elke tekst die eraan hangt mee. Dat houdt je hele offerte consistent en bespaart handwerk.
Naast tekst-stijlen beheer je hier ook kleur-stijlen, zodat je niet telkens dezelfde kleurcode hoeft op te zoeken.
Gebruik liever één Headline-stijl door je hele offerte dan vijf bijna-gelijke koppen. Dat oogt rustiger en is in één wijziging bij te stellen.
- 3
Open de type-scale tool
Klik op "Open type-scale tool" om een hele reeks formaten te genereren in plaats van ze los te kiezen.
De tool opent met tabs Display, Headline, Body en Label. Per tab beheer je één pool aan stappen. Wijzig je iets, dan zie je de voorbeelden links direct mee veranderen.
Rechts kies je het Font en het Weight, en daaronder regel je de curve, het aantal stappen en de groottes. Net als op de Stijl-pagina werk je per device via de pills Desktop, Mobiel en PDF.
de type-scale tool: curve, font, gewicht, aantal stappen, min/max grootte en regelafstand, plus Export JSON - 4
Stel curve, stappen en groottes in
Sleep aan de curve, kies het aantal stappen en zet de min/max grootte en regelafstand; de reeks rekent zichzelf uit.
De curve bepaalt hoe snel de formaten oplopen van klein naar groot. Sleep de twee punten (P1 en P2) tot de sprong tussen de stappen je bevalt, of gebruik "Reset linear" voor een rechte lijn.
Met "Aantal stappen" bepaal je hoeveel maten de reeks krijgt. Size Min/Max zet de kleinste en grootste grootte, en bij Regelafstand stel je de min- en max-regelhoogte in (bijvoorbeeld 105% tot 130%). Alle tussenmaten worden automatisch berekend.
- Kies de tab: Display, Headline, Body of Label
- Stel Font en Weight in
- Sleep aan de curve, zet het aantal stappen en de min/max grootte en regelafstand
- Controleer de voorbeelden links en koppel elke stap aan een t-shirt-label
Een steilere curve geeft een dramatischer verschil tussen titel en lopende tekst; een vlakkere curve oogt ingetogener. Probeer beide en kijk wat bij je voorstel past.
- 5
Exporteer of bewaar je schaal
Gebruik "Export JSON" om je type-scale te bewaren of in een ander project te hergebruiken.
Met Export JSON leg je de hele reeks vast in een bestand. Handig als naslag of om dezelfde schaal in een volgende offerte of template terug te zetten, zodat je niet opnieuw begint.
Veelvoorkomende vragen
Dan is die tekst waarschijnlijk niet aan het token gekoppeld maar los ingesteld. Selecteer het tekst-element en koppel het alsnog aan de juiste stijl; daarna beweegt het mee met de stijl.
Schakel in de Stijl-pagina of de type-scale tool naar de Mobiel-pill en zet daar een lagere max-grootte. De formaten per device staan los van elkaar.
Controleer het Font bovenaan in de type-scale tool. Gebruik je een eigen lettertype, upload het dan eerst onder Instellingen; zie de gids over eigen lettertypen.
Kom je er niet uit? Neem contact op, we helpen je graag verder.