Letter-spacing omrekenaar (tracking → CSS)
Reken Photoshop/Illustrator-tracking of Figma-%-letterspatiëring om naar CSS em- en px-waarden.
1.135 weergaven
Voorbeeld
TYPOGRAPHY SPACING EXAMPLE
Drie tools, drie eenheden
Adobe-programma's meten tracking in duizendsten van een em: CSS em = tracking ÷ 1000, dus tracking 50 → letter-spacing: 0.05em. Het percentage van Figma is gewoon em × 100: 5% = 0,05em. De px-waarde hangt bovendien af van de lettergrootte: 0,05em bij 16 px is 0,8 px, maar diezelfde 0,05em bij 48 px is 2,4 px. Voer in welke waarde uw ontwerpbestand ook toont; de andere velden werken automatisch bij, zodat u nooit met de hand hoeft te rekenen wanneer u een specificatie van Figma aan een ontwikkelaar overdraagt. Sketch en XD volgen dezelfde em-gebaseerde logica als CSS, waardoor het em-veld meestal de veiligste keuze is om op te standaardiseren binnen een gemengde ontwerptoolchain.
Goed om te weten
"Tracking" is een term uit het fotozettijdperk van de jaren 60 en 70, afkomstig van apparaten zoals Letraset-transferletters en vroege fotozetmachines, waarbij het aanpassen van de letterspatiëring betekende dat tekens fysiek werden verschoven op een filmstrook of transferblad. De term wordt vaak verward met kerning, maar de twee zijn niet hetzelfde: tracking voegt gelijke spatiëring toe over een hele tekstselectie, terwijl kerning alleen de ruimte tussen één specifiek letterpaar aanpast — zoals de overlappende vormen in "AV" of "To" — om een onhandige visuele opening te verhelpen die uniforme spatiëring niet kan oplossen. In CSS zit ook een praktische valkuil: letter-spacing voegt ruimte toe na elk teken, inclusief het allerlaatste, waardoor gecentreerde of rechts uitgelijnde tekst er licht uit balans kan uitzien door die onzichtbare extra ruimte aan het eind waar niemand rekening mee houdt. Negatieve trackingwaarden zijn net zo geldig als positieve en komen vaak voor bij zeer grote koppen, waar de standaardspatiëring los begint te ogen zodra letters ver boven hun bedoelde puntgrootte worden uitvergroot.
- Grote weergavekoppen: −10 tot −30 tracking (aangetrokken voor visuele impact)
- Kleine labels in hoofdletters: +50 tot +200 tracking (opengezet voor leesbaarheid)
- Lopende tekst: meestal op 0 gelaten — de standaardspatiëring is al afgestemd door de lettertypeontwerper
- Logo's en woordmerken: vaak per letterpaar handmatig bijgesteld, verder dan één trackingwaarde kan bereiken
Veelgestelde vragen
Figma toont de letterspatiëring in px — wat dan?
Dan is dat al de CSS-px-waarde; voer deze in het px-veld in met de lettergrootte correct ingesteld, en lees de em-equivalent af voor CSS die goed schaalt over verschillende tekstgroottes. Figma ondersteunt afhankelijk van de bestandsinstellingen zowel percentage- als px-eenheden voor letterspatiëring, dus controleer welke uw ontwerpsysteem gebruikt voordat u waarden aan development overdraagt.
Waarom heeft tekst in hoofdletters positieve tracking nodig?
Hoofdletters zijn getekend om prettig naast kleine letters met hun stok- en staarttekens te staan; strak op zichzelf gezet, zonder kleine letters om ze te balanceren, ogen ze visueel krap. +5% tot +15% (tracking 50-150) is de klassieke oplossing voor labels volledig in hoofdletters, navigatie-items en eyebrow-tekst, en opent de lettervormen net genoeg om in één oogopslag prettig te lezen.
Wat is het verschil tussen tracking en kerning?
Tracking voegt uniforme spatiëring toe over een heel stuk tekst — een woord, een regel of een volledige selectie. Kerning past alleen de ruimte tussen één paar aangrenzende letters aan, zoals "AV" of "To", waar de vormen elkaar anders zouden overlappen of een vreemde visuele opening zouden achterlaten. CSS behandelt ze ook los van elkaar: letter-spacing regelt de tracking, terwijl font-kerning (meestal op "normal" gelaten) de paarsgewijze kerning uit de ingebouwde kerningtabel van het lettertype regelt.
Waarom oogt gecentreerde tekst iets uit balans met letter-spacing?
CSS letter-spacing voegt ruimte toe na elk teken, ook na het laatste — een eigenaardigheid van de specificatie waar veel ontwikkelaars door verrast worden. Bij gecentreerde of rechts uitgelijnde tekst verschuift die onzichtbare extra ruimte aan het eind het visuele midden, waardoor de tekst iets naar links verschoven lijkt te staan ten opzichte van waar hij eigenlijk zou moeten staan. Een gangbare oplossing is een kleine negatieve margin-right op het element, ongeveer gelijk aan de letter-spacing-waarde.
Waar komt de term "tracking" vandaan?
Het gaat terug op fotozetapparatuur uit de jaren 60 en 70 — machines zoals Letraset-transferbladen en fotozetmachines, waarbij het aanpassen van de ruimte tussen tekens letterlijk betekende dat werd verschoven hoe tekens over een filmstrook of transferblad werden "getrackt". De term overleefde de overgang naar digitaal zetwerk en werd uiteindelijk het standaardwoord voor letterspatiëring in tools als Photoshop en Illustrator, lang nadat de fysieke machines die de term oorspronkelijk beschreef, waren verdwenen.
Vergelijkbare tools
Probleem melden
Letter-spacing omrekenaar (tracking → CSS)
Reacties
Nog geen reacties — schrijf de eerste!