Kortversjonen
- En typografisk skala er et lite sett med skriftstørrelser laget ved å multiplisere en grunnstørrelse med samme forholdstall igjen og igjen.
- Små forholdstall som 1,2 passer tette grensesnitt, mens store som 1,5 passer plakater, sosiale innlegg og landingssider.
- Med 16 px som grunnstørrelse og 1,25 som forholdstall blir skalaen 16, 20, 25, 31, 39 og 49 px.
- De fleste design trenger bare fem eller seks størrelser, og det er greit å runde resultatene til hele piksler.
- I CSS er en typografisk skala enklest å vedlikeholde som egendefinerte egenskaper, gjort flytende med clamp().
På denne siden
En typografisk skala er et sett med skriftstørrelser bygd av én grunnstørrelse og ett forholdstall. Du begynner med brødtekststørrelsen, for eksempel 16 px, og multipliserer med forholdstallet for å få neste størrelse. Deretter multipliserer du igjen. Med 1,25 får du 16, 20, 25, 31, 39 og 49 px. Fordi hvert trinn vokser i samme forhold, ser størrelsene beslektet ut, og overskriftsstørrelsen slutter å være en gjetning.
Hvorfor en typografisk skala samler størrelsene
Øyet leser størrelse som forhold, ikke som piksler. Spranget fra 16 til 20 føles likt spranget fra 39 til 49, fordi begge er omtrent en firedel større. Størrelser valgt på følelsen klumper seg gjerne noen steder og gir hull andre steder. To overskrifter ender nesten like store og ser ut som en feil. En skala gir hvert nivå et tydelig, konsekvent trinn, som er ryggraden i visuelt hierarki.
Vanlige forholdstall i typografiske skalaer
Mange populære forholdstall låner navn fra musikalske intervaller, og en skala bygd slik kalles ofte en modulær skala. Navnet betyr mindre enn spranget: jo større forholdstall, desto mer dramatikk mellom nivåene og desto færre nivåer får plass på siden.
Forholdstall
Følelse
Passer til
Forholdstall
Følelse
Passer til
Forholdstall
Følelse
Passer til
Forholdstall
Følelse
Passer til
Forholdstall
Følelse
Passer til
Forholdstall
Følelse
Passer til
Forholdstall
Følelse
Passer til
Forholdstall
Følelse
Passer til
Typografiske skalaverdier i piksler
Her er samme grunnstørrelse på 16 px brukt med fire forholdstall. Legg merke til hvor raskt de store stiger: på trinn 4 er en 1,5-skala allerede på 81 px, mens en 1,2-skala er på 33 px.
1,2
1,25
1,333
1,5
1,2
1,25
1,333
1,5
1,25
1,333
1,5
1,25
1,333
1,5
1,25
1,333
1,5
1,25
1,333
1,5
1,25
1,333
1,5
Avrunding er greit. Ingen ser forskjellen mellom 31,25 og 31 px, og hele tall er enklere å huske og plassere i et rutenett.
Slik bygger du din egen typografiske skala
- 1
Velg grunnstørrelsen
Dette er brødteksten. 16 til 18 px passer de fleste nettsider; på et sosialt lerret i 1080 px begynner du med 40 px.
- 2
Velg forholdstall etter innholdet
Mye tekst og mange overskriftsnivåer trenger et lite forholdstall. Få ord og én stor overskrift trenger et stort.
- 3
Lag fem eller seks trinn
Multipliser oppover til overskrifter og del én gang til liten tekst. De fleste design bruker aldri mer enn seks størrelser.
- 4
Rund av og navngi
Rund til hele piksler og gi trinnene navn etter rolle, som bildetekst, brødtekst, tittel og display, ikke etter tall.
- 5
Sett linjehøyde for hvert trinn
Større tekst trenger tettere linjeavstand. Brødtekst rundt 1,5, titler rundt 1,2 og display-tekst nær 1,0.
- 6
Test med ekte ord
Sett en faktisk overskrift, underoverskrift og et avsnitt. Hvis to trinn ligner for mye, hopp over ett eller øk forholdstallet.
En typografisk skala for sosiale innlegg
Sosiale innlegg trenger større forholdstall enn nettsider, fordi et lerret på 1080 px krymper til en tredel av bredden på telefonen og bare har to eller tre tekstnivåer. En grunnstørrelse på 40 px med 1,5 gir 40, 60, 90 og 135 px. Det passer godt med størrelsene i skriftstørrelse for Instagram-innlegg.
Et statistikkinnlegg trenger tre tydelige nivåer: tallet, detaljen og etiketten. På en 1,5-skala er de 135, 60 og 40 px.
Et listelysbilde bruker de lavere trinnene i samme skala og passer derfor godt ved siden av statistikkbildet i én karusell.
Én skala på alle lysbilder i en karusell får settet til å se designet ut fremfor satt sammen. Samme størrelser i samme roller, lysbilde etter lysbilde. Tekstoppsett for innlegg i sosiale medier viser hvordan du plasserer dem.
Slik skriver du en typografisk skala i CSS
Lagre skalaen som egendefinerte egenskaper så alle komponenter bruker den. Du kan kjede multiplikasjoner med calc() eller skrive ut de avrundede verdiene. For en skala som vokser med skjermen, gir du hvert trinn et clamp()-spenn: et minimum til telefoner, et maksimum til brede skjermer og en flytende verdi mellom.
/* A 1.25 scale from a 1rem (16px) base */
:root {
--ratio: 1.25;
--step-0: 1rem;
--step--1: calc(var(--step-0) / var(--ratio));
--step-1: calc(var(--step-0) * var(--ratio));
--step-2: calc(var(--step-1) * var(--ratio));
--step-3: calc(var(--step-2) * var(--ratio));
--step-4: calc(var(--step-3) * var(--ratio));
--step-5: calc(var(--step-4) * var(--ratio));
}
/* Fluid headings: smaller ratio on phones, larger on desktop */
h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4.25rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.15; }
h3 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.25; }
body { font-size: var(--step-0); line-height: 1.55; }
small { font-size: var(--step--1); }--ratio én gang, så oppdateres alle trinn. Bruk rem i minimumsverdien til hver clamp så teksten fortsatt respekterer leserens egen skriftstørrelse.Unngå
- Ti størrelser når fem holder
- To overskrifter med 2 px forskjell
- Samme forholdstall til et dashbord og en plakat
- Faste pikselstørrelser som ignorerer leserens skriftinnstillinger
Gjør dette
- Fem eller seks trinn, hvert med en navngitt rolle
- Hopp over et trinn hvis to nivåer ligner
- Lite forholdstall til tette skjermer, stort til få ord
- rem-baserte størrelser, flytende med clamp()
En skala er én del av et større sett med valg om skrifter, avstand og roller. Typografisystem samler dem, og bokstavavstand og kerning dekker avstandsverdiene som passer hvert trinn. Lager du sosialt innhold, holder merkevaresettet i Gradiently overskrifts- og brødtekstskriftene dine, og Designer bruker dem i hver nye størrelse. Det gjør en skala du bestemmer én gang, lett å beholde.
Spørsmål folk stiller
Hva er en typografisk skala?
Et sett med skriftstørrelser laget ved å multiplisere en grunnstørrelse gjentatte ganger med samme forholdstall, så alle størrelsene står i forhold til hverandre.
Hva er det beste forholdstallet for en typografisk skala?
Det finnes ikke ett beste valg. 1,2 eller 1,25 passer nettsider og apper med mye tekst; 1,5 eller mer passer plakater og sosiale innlegg med få ord.
Hvor mange skriftstørrelser bør et design bruke?
Vanligvis fem eller seks: liten tekst, brødtekst, to eller tre overskriftsnivåer og én display-størrelse.
Bør jeg runde av verdiene i den typografiske skalaen?
Ja. Avrunding til hele piksler gir ingen synlig forskjell og gjør skalaen enklere å bruke og huske.
Hvordan gjør jeg en typografisk skala responsiv i CSS?
Bruk clamp() for hvert trinn, med et minimum i rem, en flytende midtverdi med viewport-enheter og et maksimum for brede skjermer.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår