Typografie-schaalgenerator

Wat is Typografie-schaalgenerator?

De Typografie-schaalgenerator zet een basisgrootte en een modulaire verhouding om in een volledige, wiskundig consistente typeschaal, met zoveel grotere kopstappen en kleinere bijschriftstappen als je nodig hebt. Naast de kale lettergroottes leidt hij voor elke stap een passende regelhoogte en letterspatiëring af, plus een optionele vloeiende clamp()-expressie die interpoleert tussen een mobiele en een desktop-viewport met een aparte mobiele verhouding. Designers en frontend-ontwikkelaars gebruiken hem om typetokens van een designsysteem te bouwen, groottes consistent te houden en kant-en-klare CSS, Sass, Tailwind of JSON te plakken. Typ een eigen verhouding of kies een klassieke, stel de basisgrootte en eenheid (px of rem) in, bekijk het in je eigen font-family en kopieer het formaat dat je nodig hebt.

Typografie-schaalgenerator gebruiken

1. Typ een eigen verhouding in het verhoudingsveld, of kies een klassieke zoals reine kwart (1.333) in het preset-dropdownmenu in de instellingen.
2. Stel de basisgrootte in; dit wordt de bodytekstgrootte en het anker van de schaal.
3. Kies in de instellingen hoeveel grotere en kleinere stappen je genereert; kleinere stappen zitten onder de basis voor bijschriften en kleine lettertjes.
4. Stel de basis- en de strakke regelhoogte en de letterspatiëring bij grote groottes in, en voer een font-family in om de schaal in je eigen lettertype te bekijken.
5. Stel voor responsieve typografie de minimale en maximale viewportbreedte en een mobiele verhouding in om een vloeiende clamp()-schaal te bouwen.
6. Wissel het uitvoerformaat tussen CSS-variabelen, vloeiende clamp(), Sass, Tailwind-config en JSON, en kopieer dan de code of de grootte van een enkele stap.

Voorbeelden

verhouding 1.333, basis 16px, 5 omhoog / 1 omlaag

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

basis 16px, verhouding 1.333, mobiele verhouding 1.2, 320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

elke schaal, Tailwind-export

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

Veelgestelde vragen

Kan ik een eigen verhouding gebruiken, niet alleen de presets?

Ja. Typ een willekeurig getal in het verhoudingsveld, zoals 1.2, 1.5, 1.618 of een niet-standaard waarde als 1.45. Het preset-dropdownmenu in de instellingen is slechts een snelkoppeling die hetzelfde veld invult, en een waarde kiezen die niet bij een preset past toont simpelweg Aangepast.

Hoe werken de kleinere (negatieve) stappen?

De schaal is verankerd op de basisgrootte (stap 0). Grotere stappen vermenigvuldigen de basis met de verhouding, terwijl kleinere delen, wat bijschrift- en kleineletterformaten onder de basis oplevert zoals sm en xs. Stel in de instellingen in hoeveel grotere en kleinere stappen je wilt.

Hoe worden regelhoogte en letterspatiëring berekend?

De regelhoogte gaat van je basiswaarde bij de bodygrootte naar een strakkere waarde naarmate tekst groter wordt, en de letterspatiëring gaat van nul bij de basis naar je waarde voor grote groottes, zodat grote displaytekst iets strakker en kleine tekst iets ruimer is. Beide curves zijn instelbaar in de instellingen.

Wat is de vloeiende clamp()-schaal?

Ze bouwt voor elke stap een font-size: clamp() die soepel groeit tussen een minimale en een maximale viewportbreedte, met je hoofdverhouding op de maximale breedte en een aparte mobiele verhouding op de minimale. Kies het uitvoerformaat CSS clamp() om het te exporteren.

Worden mijn gegevens naar een server verzonden?

Nee. De hele schaal, inclusief groottes, regelhoogte, letterspatiëring en de vloeiende clamp()-waarden, wordt lokaal in je browser berekend met eenvoudige rekenkunde. Er wordt niets geüpload, dus de tool werkt offline en houdt je instellingen privé.