Grunnleggende typografi: størrelse, vekt, avstand og rytme

Grunnleggende typografi koker ned til seks valg: størrelsen på hver tekstbit, vekten, linjeavstanden, bokstavavstanden, justeringen og linjelengden. Får du dem riktig, ser nesten enhver brukbar skrift profesjonell ut. Får du dem feil, ser verdens beste font amatørmessig ut. Hvert valg har en fornuftig standard, som står under, og som du kan avvike fra med vilje.

Størrelse: bruk en skriftskala

Velger du størrelser én om gangen, ender du med en side full av nesten like størrelser og ingen tydelig rekkefølge. En skriftskala løser det: start fra en grunnstørrelse og gang med samme forholdstall for hvert trinn opp. Forholdstallet setter karakteren. Små forholdstall, som 1,2, føles rolige og tette, mens store, som 1,5, føles dramatiske og redaksjonelle.

: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); }

På innlegg til sosiale medier er flaten større, så tallene er større, men tanken er den samme. På et innlegg som er 1080 piksler bredt, gir en overskrift på rundt 90 til 120 piksler og en detaljlinje på rundt 40 til 56 et tydelig trinn mellom dem, og det leses på mobil.

Vekt: færre vekter, tydeligere trinn

Vekt er tykkelsen på strekene, som regel nummerert fra 100 (thin) til 900 (black), med 400 som regular og 700 som bold. To eller tre vekter er nok til de fleste design. Nøkkelen er at nabovekter må se ulike ut: regular mot bold leses som en bevisst kontrast, regular mot medium leses ofte som en feil.

Linjeavstand: luft mellom linjene

Linjeavstand, også kalt skyting, er avstanden fra én linje til den neste. Brødtekst trenger luft for å leses behagelig: omtrent 1,4 til 1,6 ganger skriftstørrelsen er et pålitelig spenn. Store overskrifter trenger mindre, rundt 1,0 til 1,2, fordi mellomrommene i store størrelser ser mye bredere ut enn de er. Lange linjer trenger litt mer linjeavstand enn korte, så øyet finner starten på neste linje. Linjeavstand og linjelengde går dypere.

Bokstavavstand: la den stort sett være

Skrifter er spasiert av designerne sine for størrelsene de er tenkt til, så brødtekst trenger sjelden justering. To unntak er verdt å kjenne. Store overskrifter ser ofte bedre ut litt tettere, med en liten negativ verdi som -0.01em til -0.02em. Tekst i versaler og små etiketter trenger det motsatte: litt ekstra luft, rundt 0.05em til 0.1em, fordi versaler er tegnet for å stå ved siden av små bokstaver. Bokstavavstand dekker detaljene.

Justering

Venstrejustert tekst, med ujevn høyrekant, er standarden av en grunn: hver linje starter på samme sted, så øyet finner den lett. Midtstilt tekst passer til korte stykker, som en overskrift, et sitat eller en invitasjon, og blir slitsom etter noen få linjer. Blokkjustert tekst ser ryddig ut på trykk der programvaren kan dele ord godt, men på nettet åpner den ofte ujevne mellomrom mellom ordene.

Linjelengde: satsbredden

Lengden på en linje, satsbredden, betyr like mye som størrelsen. For lange linjer gjør det vanskelig å finne den neste, og for korte linjer bryter leserytmen med stadige linjeskift. Et spenn på omtrent 45 til 75 tegn per linje er det som oftest anbefales for brødtekst. På nettet gjør enheten ch dette 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);
}

Rytme: luft som grupperer

Luft forteller leserne hva som hører sammen. En overskrift bør stå nærmere avsnittet den innleder enn det forrige, så legg mer luft over overskrifter enn under. Hold avstanden mellom avsnitt lik, og bruk én avstandsenhet, ofte basert på linjeavstanden i brødteksten, gjennom det hele. Når luft brukes konsekvent, får siden en rytme som gjør at den føles rolig selv når den er full. Visuelt hierarki bygger videre på dette.

1. 1

   Velg en størrelse på brødteksten

   16 piksler eller større på skjerm, og mye større på innlegg til sosiale medier.

2. 2

   Velg et forholdstall for skalaen

   1,2 for rolig og tett, 1,25 til det meste, 1,333 eller mer for redaksjonell dramatikk.

3. 3

   Bestem to vekter

   Regular til lesing, bold eller semibold til utheving og overskrifter.

4. 4

   Sett linjeavstander

   Omtrent 1,5 for brødtekst, omtrent 1,1 for store overskrifter.

5. 5

   Begrens satsbredden

   Rundt 65 tegn for brødtekst.

6. 6

   Bruk én enhet for luft

   Ett avstandstrinn, brukt om igjen, med mer luft over overskrifter enn under.

Når dette er på plass, blir valget av skrift den morsomme delen og ikke reparasjonen. Start med fontkombinasjoner og serif eller sans serif.