Typografins grunder: storlek, vikt, avstånd och rytm

Typografins grunder består av sex beslut: storleken på varje textstycke, dess vikt, radavståndet, bokstavsavståndet, justeringen och radlängden. Får du de rätt ser nästan vilket anständigt typsnitt som helst professionellt ut; får du dem fel ser världens bästa typsnitt amatörmässigt ut. Vart och ett har ett rimligt standardvärde, angivet nedan, som du kan avvika från med avsikt.

Storlek: använd en typskala

Väljer du storlekar en i taget får du en sida full av nästan lika storlekar och ingen tydlig ordning. En typskala åtgärdar det: börja från en basstorlek och multiplicera med samma förhållande för varje steg uppåt. Förhållandet bestämmer karaktären. Små förhållanden, som 1,2, känns lugna och täta; stora, som 1,5, känns dramatiska och redaktionella.

:root {
  --step--1: 0.8rem;     /* 12.8px */
  --step-0: 1rem;        /* 16px   */
  --step-1: 1.25rem;     /* 20px   */
  --step-2: 1.5625rem;   /* 25px   */
  --step-3: 1.953rem;    /* 31.25px */
  --step-4: 2.441rem;    /* 39px   */
  --step-5: 3.052rem;    /* 48.8px */
}

body { font-size: var(--step-0); }
h3   { font-size: var(--step-2); }
h2   { font-size: var(--step-3); }
h1   { font-size: var(--step-5); }

I inlägg för sociala medier är ytan större, så talen är högre men idén är densamma. På ett inlägg som är 1080 pixlar brett ger en rubrik på cirka 90 till 120 pixlar och en detaljrad på cirka 40 till 56 ett tydligt steg mellan dem och läses på en telefon.

Vikt: färre vikter, tydligare steg

Vikt är strecktjockleken, vanligen numrerad från 100 (tunn) till 900 (extra fet), med 400 som normal och 700 som fet. Två eller tre vikter räcker för de flesta designer. Nyckeln är att intilliggande vikter måste se olika ut: normal mot fet läses som en medveten kontrast, normal mot medium läses ofta som ett misstag.

Radavstånd: luft mellan raderna

Radavstånd är avståndet från en rad till nästa. Brödtext behöver luft för att läsas bekvämt: ungefär 1,4 till 1,6 gånger teckenstorleken är ett pålitligt spann. Stora rubriker behöver mindre, runt 1,0 till 1,2, eftersom glappen vid stora storlekar ser mycket bredare ut än de är. Långa rader behöver lite mer radavstånd än korta, så att ögat hittar början på nästa rad. Radavstånd och radlängd går djupare.

Bokstavsavstånd: låt det mest vara

Typsnitt är avståndssatta av sina formgivare för sina avsedda storlekar, så brödtext behöver sällan justeras. Två undantag är värda att känna till. Stora rubriker ser ofta bättre ut något tätare, ett litet negativt värde som -0.01em till -0.02em. Text med versaler, och små etiketter, behöver motsatsen: lite extra avstånd, runt 0.05em till 0.1em, eftersom versaler formgavs för att stå bredvid gemener. Bokstavsavstånd tar upp detaljerna.

Justering

Vänsterjusterad text, med ojämn högerkant, är standard av en anledning: varje rad börjar på samma ställe, så ögat hittar den lätt. Centrerad text passar korta stycken, som en rubrik, ett citat eller en inbjudan, och blir tröttande efter några få rader. Marginaljusterad text ser prydlig ut i tryck där programvaran kan avstava bra, men på webben öppnar den ofta ojämna glapp mellan orden.

Radlängd: måttet

Längden på en rad, satsbredden, spelar lika stor roll som storleken. Rader som är för långa gör det svårt att hitta nästa; rader som är för korta bryter läsrytmen med ständiga radbrytningar. Ett spann på ungefär 45 till 75 tecken per rad är det som oftast rekommenderas för brödtext. På webben gör enheten ch det enkelt.

article p {
  max-width: 65ch;   /* about 65 characters per line */
  line-height: 1.55;
}

h1 {
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance; /* evens out headline lines where supported */
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--step--1);
}

Rytm: avstånd som grupperar

Avstånd berättar för läsare vad som hör ihop. En rubrik ska sitta närmare stycket den inleder än det före, så lägg mer avstånd ovanför rubriker än under. Håll styckeavstånden konsekventa och använd en avståndsenhet, ofta baserad på brödtextens radavstånd, genomgående. När avstånd används konsekvent får sidan en rytm som gör att den känns lugn även när den är full. Visuell hierarki bygger vidare på detta.

1. 1

   Välj en brödtextstorlek

   16 pixlar eller större på skärmar; mycket större i inlägg för sociala medier.

2. 2

   Välj ett skalförhållande

   1,2 för lugnt och tätt, 1,25 för det mesta, 1,333 eller mer för redaktionell dramatik.

3. 3

   Ställ in två vikter

   Normal för läsning, fet eller halvfet för betoning och rubriker.

4. 4

   Ställ in radavstånd

   Ungefär 1,5 för brödtext, ungefär 1,1 för stora rubriker.

5. 5

   Begränsa satsbredden

   Runt 65 tecken för brödtext.

6. 6

   Sätt avstånd med en enhet

   Ett avståndssteg, återanvänt, med mer avstånd ovanför rubriker än under.

När det här sitter blir valet av typsnitt det roliga i stället för nödlösningen. Börja med typsnittskombinationer och serif mot sans serif.