Display-skrifter: slik designer du med stor typografi

Display-skrifter er skrifttyper tegnet for å brukes stort: overskrifter, plakater, omslag, emballasje og korte tekstbiter. Detaljene, fra skarp kontrast mellom tykke og tynne streker til tett avstand og uttrykksfulle former, er laget for å se best ut i store størrelser og fungerer vanligvis dårlig i brødtekst. Bruk en display-skrift til de få ordene som skal få noen til å stoppe, og en roligere tekstskrift til alt de leser etterpå.

Denne guiden forklarer hva som gjør en skrift til en display-skrift, hvor stor den bør være, hvordan du kombinerer den med andre og hvordan du hindrer at stor typografi virker trang eller utdatert. Den bygger på grunnleggende typografi og visuelt hierarki.

Hva som skiller en display-skrift fra en tekstskrift

Tekstskrifter er bygget for behagelig lesing av tusenvis av ord: åpne former, solide streker, god avstand og stor x-høyde, slik at bokstavene tåler små størrelser og dårlige skjermer. Display-skrifter bytter bort noe av dette for særpreg. Ved 80 px sliter ingen med å se bokstavene, så designeren kan øke kontrasten, presse bredden sammen, spisse detaljene og stramme inn avstanden.

Noen familier finnes i begge versjoner: et Text-snitt og et Display-snitt av samme utforming, eller én variabel fil med en akse for optisk størrelse som tilpasser seg når størrelsen endres. Variable skrifter forklarer optisk størrelse nærmere.

Typer display-skrifter og stemningen de skaper

Display-skrifter er lettest å velge ut fra følelsen du ønsker. Hver gruppe under har lett tilgjengelige eksempler fra Google Fonts, så du kan prøve dem med dine egne ord.

• Seriffer med høy kontrast: mote, kultur, redaksjonelt design. Eksempler: Playfair Display, DM Serif Display, Bodoni Moda.
• Smale sans serif-skrifter: hast, sport, nyheter, plakater. Eksempler: Bebas Neue, Anton, Oswald.
• Brede sans serif-skrifter: teknologi, moderne merkevarer, selvsikker ro. Eksempler: Syne, Unbounded.
• Myke og avrundede: vennlighet, mat, barn, velvære. Eksempler: Fraunces med mykhetsaksen sin, Fredoka.
• Tunge grotesker: sterke budskap, lanseringer, aktivisme. Eksempler: Archivo Black, Inter Tight i black-vekt.
• Skriveskrift og håndtegnet: invitasjoner, håndverk, personlige merkevarer, brukt med måte. Eksempler: Caveat, Yellowtail.

Hvor stor display-skrift bør være

Stor nok til at den tydelig er det første folk ser, og liten nok til at ordene får plass på få linjer. En nyttig vane er å velge størrelse i forhold til lerretet fremfor i punkter. På et innlegg på 1080 ganger 1350 fyller en overskrift på to til fire ord ofte rundt 70 til 90 prosent av bredden. På en nettside er overskriften i toppfeltet vanligvis rundt tre til seks ganger brødtekststørrelsen.

På nett skalerer clamp() display-skrift jevnt mellom et minimum og et maksimum, slik at den blir stor på store skjermer uten å flyte over på telefoner. Stram inn linje- og bokstavavstanden etter hvert som størrelsen øker; standardverdiene er laget for mindre tekst.

.hero-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.75rem, 5vw + 1rem, 6.5rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 14ch;
}

.hero-lede {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  line-height: 1.55;
  max-width: 52ch;
}

Kombiner display-skrift med tekstskrift

Den enkleste, pålitelige kombinasjonen gir hver skrift én jobb. Display-skriften snakker høyt med noen få ord; tekstskriften gjør det rolige arbeidet med bildetekster, brødtekst, datoer og priser. La de to ha minst én tydelig kontrast, som seriff mot sans serif eller smal mot normal bredde, så det ikke ser ut som en nestenlikhet. Skriftkombinasjoner forklarer reglene fullt ut.

Display-skrift på gradienter og urolige bakgrunner

Stor skrift er den mest tilgivende teksten du kan legge på en fargerik bakgrunn, fordi tykke streker holder formen mot bevegelse i flaten bak. Risikoen ligger i de tynne delene: hårfine seriffer og detaljer forsvinner i gradientens lysere eller mer urolige områder. På fyldige bakgrunner bør du velge en display-skrift med kraftigere tynne streker, eller øke skriftvekten.

I Gradiently vet en Mark hvor ordene dine er: det roligste området flyttes bak overskriften, og farger nær bokstavene blir dypere eller lysere, slik at selv fin display-skrift holder. Skrifteffekter som Contour, Inline og Extrude gir store ord særpreg når skriften i seg selv er enkel; teksteffekter viser når de fungerer.

Feil som får display-skrift til å virke billig

1. 1

   Standardavstand i enorme størrelser

   Stor skrift med standardverdier for brødtekst virker løs. Stram inn linjeavstanden til rundt 1 til 1.1, og bokstavavstanden litt.

2. 2

   Falsk fet og falsk kursiv

   Når en skrift mangler et snitt, kan verktøy og nettlesere etterligne det ved å smøre ut eller skråstille bokstavene. Last inn de ekte skriftvektene og kursivsnittene.

3. 3

   Å strekke skrift for å få plass

   Skaler aldri skrift vannrett eller loddrett. Velg heller et smalt eller bredt snitt.

4. 4

   Trendskrifter uten grunn

   En skrift valgt fordi den er overalt denne sesongen, blir utdatert med sesongen. Velg ut fra stemningen du trenger.

5. 5

   Enslige ord i overskrifter på to linjer

   Ett kort ord alene på andre linje svekker overskriften. Skriv om, flytt linjeskiftet eller bruk text-wrap: balance.