Kortversionen
- En typografisk skala är en kort uppsättning teckenstorlekar som bildas genom att en basstorlek multipliceras med samma proportion om och om igen.
- Små proportioner som 1,2 passar täta gränssnitt, medan stora proportioner som 1,5 passar affischer, inlägg i sociala medier och målsidor.
- Med basen 16 px och proportionen 1,25 löper skalan 16, 20, 25, 31, 39 och 49 px.
- De flesta designer behöver bara fem eller sex storlekar, och det går bra att avrunda resultaten till hela pixlar.
- I CSS är en typografisk skala lättast att underhålla som anpassade egenskaper, gjorda flytande med clamp().
På den här sidan
En typografisk skala är en uppsättning teckenstorlekar byggd på en basstorlek och en proportion. Du börjar med din brödtextstorlek, säg 16 px, och multiplicerar med proportionen för att få nästa storlek uppåt, och sedan igen för nästa. Med proportionen 1,25 får du 16, 20, 25, 31, 39 och 49 px. Eftersom varje steg växer med samma andel ser storlekarna sammanhängande ut, och att välja en rubrikstorlek slutar vara en gissning.
Därför får en typografisk skala storlekar att se sammanhängande ut
Ögat läser storlek som proportion, inte som pixlar. Hoppet från 16 till 20 känns likadant som hoppet från 39 till 49, eftersom båda är en fjärdedel större. Storlekar som valts på känsla tenderar att klumpa ihop sig på vissa ställen och lämna luckor på andra, så två rubriker blir nästan lika stora och ser ut som ett misstag. En skala ger varje nivå ett tydligt, jämnt steg, vilket är ryggraden i visuell hierarki.
Vanliga proportioner för typografiska skalor jämförda
Många populära proportioner har fått namn efter musikaliska intervall, och en skala byggd så kallas ofta en modulär skala. Namnet spelar mindre roll än stegets storlek: ju större proportion, desto mer dramatik mellan nivåerna och desto färre nivåer ryms på en sida.
Proportion
Känsla
Bra för
Proportion
Känsla
Bra för
Proportion
Känsla
Bra för
Proportion
Känsla
Bra för
Proportion
Känsla
Bra för
Proportion
Känsla
Bra för
Proportion
Känsla
Bra för
Proportion
Känsla
Bra för
Värden i pixlar för typografiska skalor
Här är samma bas på 16 px körd genom fyra proportioner. Lägg märke till hur snabbt de stora proportionerna klättrar: vid steg 4 ligger en skala på 1,5 redan på 81 px, medan en skala på 1,2 ligger 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
Avrundning går bra. Ingen kan se skillnad på 31,25 och 31 px, och hela tal är lättare att komma ihåg och att linjera på ett rutnät.
Så bygger du din egen typografiska skala
- 1
Välj basstorlek
Det är din brödtext. 16 till 18 px passar de flesta webbplatser; på en social yta på 1080 px, börja på 40 px.
- 2
Välj en proportion utifrån innehållet
Mycket text och många rubriknivåer vill ha en liten proportion. Få ord och en stor rubrik vill ha en stor.
- 3
Ta fram fem eller sex steg
Multiplicera uppåt för rubriker och dela en gång för liten text. De flesta designer använder aldrig fler än sex storlekar.
- 4
Avrunda och namnge
Avrunda till hela pixlar och namnge stegen efter roll, som bildtext, brödtext, titel och display, inte efter nummer.
- 5
Sätt radavstånd per steg
Större storlekar behöver tätare radavstånd. Brödtext kring 1,5, titlar kring 1,2 och rubriktext nära 1,0.
- 6
Testa med riktiga ord
Sätt en riktig rubrik, underrubrik och ett stycke. Om två steg ser för lika ut, hoppa över ett eller höj proportionen.
En typografisk skala för inlägg i sociala medier
Inlägg i sociala medier behöver en större proportion än webbsidor, eftersom en yta på 1080 px krymper till en tredjedel av sin bredd i en mobil och det bara finns två eller tre textnivåer. En bas på 40 px med proportionen 1,5 ger 40, 60, 90 och 135 px, vilket stämmer fint med storlekarna i teckenstorlek för inlägg på Instagram.
Ett siffrainlägg behöver tre tydliga nivåer: siffran, detaljen och etiketten. På en skala på 1,5 är de 135, 60 och 40 px.
En listbild använder de lägre stegen i samma skala, så den sitter bekvämt bredvid siffrabilden i en karusell.
Att använda en skala över alla bilder i en karusell är det som får ett set att se designat ut snarare än hopsatt. Samma storlekar i samma roller, bild efter bild. Textlayout för inlägg i sociala medier visar hur du ordnar dem.
Så skriver du en typografisk skala i CSS
Lagra skalan som anpassade egenskaper så att varje komponent hämtar från den. Du kan kedja multiplikationer med calc(), eller skriva ut de avrundade värdena. För en skala som växer med skärmen ger du varje steg ett clamp()-intervall: ett minimum för mobiler, ett maximum för breda skärmar och ett flytande värde däremellan.
/* 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 en gång så uppdateras varje steg. Behåll rem i minimumvärdet i varje clamp så att texten fortfarande respekterar läsarens egen inställning för teckenstorlek.Undvik
- Tio storlekar när fem räcker
- Två rubriker med 2 px emellan
- Samma proportion för en instrumentpanel och en affisch
- Fasta pixelstorlekar som ignorerar läsarens typsnittsinställningar
Gör
- Fem eller sex steg, vart och ett med en namngiven roll
- Hoppa över ett steg om två nivåer ser lika ut
- Liten proportion för täta skärmar, stor för få ord
- Storlekar i rem, flytande med clamp()
En skala är en del av en större uppsättning beslut om typsnitt, avstånd och roller. Typografiskt system för ihop dem, och spärrning och kerning tar upp avståndsvärdena som hör till varje steg. Om du designar för sociala medier håller varumärkeskitet i Gradiently dina rubrik- och brödtypsnitt, och Designer tillämpar dem på varje ny storlek, vilket gör en skala du bestämt dig för en gång lätt att hålla.
Vanliga frågor
Vad är en typografisk skala?
En uppsättning teckenstorlekar som bildas genom att en basstorlek multipliceras med samma proportion gång på gång, så att varje storlek står i proportion till de andra.
Vilken proportion är bäst för en typografisk skala?
Det finns ingen enskild bästa. 1,2 eller 1,25 passar webbplatser och appar med mycket text; 1,5 eller mer passar affischer och inlägg i sociala medier med få ord.
Hur många teckenstorlekar ska en design använda?
Oftast fem eller sex: en liten storlek, brödtext, två eller tre rubriknivåer och en displaystorlek.
Ska jag avrunda värdena i en typografisk skala?
Ja. Avrundning till hela pixlar gör ingen synlig skillnad och gör skalan lättare att använda och komma ihåg.
Hur gör jag en typografisk skala responsiv i CSS?
Använd clamp() för varje steg, med ett minimum i rem, ett flytande mellanvärde med viewportenheter och ett maximum för breda skärmar.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil