Typografieschaal uitproberen
Bekijk een modulaire typografieschaal met instelbare basisgrootte, verhouding, lettertype en lijnhoogte. Uitvoer CSS maten voor de tekst van de body en zes rubrieken.
Typografie CSS
:root {
--type-font: "Inter", sans-serif;
--type-line-height: 1.5;
--type-small: 12.8px;
--type-body: 16px;
--type-h6: 20px;
--type-h5: 25px;
--type-h4: 31.25px;
--type-h3: 39.06px;
--type-h2: 48.83px;
--type-h1: 61.04px;
}
body { font-family: var(--type-font); font-size: var(--type-body); line-height: var(--type-line-height); }
h1 { font-size: var(--type-h1); line-height: 1.15; }
h2 { font-size: var(--type-h2); line-height: 1.15; }
h3 { font-size: var(--type-h3); line-height: 1.15; }
h4 { font-size: var(--type-h4); line-height: 1.15; }
h5 { font-size: var(--type-h5); line-height: 1.15; }
h6 { font-size: var(--type-h6); line-height: 1.15; }De exporttekst blijft in het Engels; je invoer blijft ongewijzigd.
Geen aanmelding. Geen AI credits. Deze tool assembleert uw uitvoer in uw browser.
Van een idee tot iets nuttigs.
- 01
Kies een lettertype, basisgrootte en modulaire verhouding.
- 02
Inspecteer koersgroottes en paragraafafstand.
- 03
Downloaden CSS variabelen voor de huidige schaal.
Een beetje context.
Een modulaire schaal vermenigvuldigt een basislettergrootte met een herhaalde verhouding. Deze speeltuin berekent een zes-level rubriek hiërarchie plus body en kleine tekst. Grootten zijn expliciete pixelwaarden voor een startpunt; beoordelen responsief gedrag en zoomen voordat ze in productie worden gebruikt.
Goede vragen.
De Voorzitter. - Vraag nr. CSS Het geselecteerde lettertype laden?
Nee. Het noemt het lettertype en levert fallback families. Het gekozen lettertype in uw toepassing laden of zelf hosten.
Zijn deze maten responsief?
De export bevat vaste maten. Pas ze aan aan uw breekpunten of vloeistof type systeem na het testen van de werkelijke inhoud.