Displayskrifter: sådan designer du med stor skrift

Displayskrifter er tegnet til at blive brugt stort: overskrifter, plakater, forsider, emballage og korte tekster. Detaljerne, fra skarp kontrast mellem tykke og tynde streger til tæt afstand og udtryksfulde former, er skabt til store størrelser og fungerer som regel dårligt i brødtekststørrelse. Brug en displayskrift til de få ord, der skal få nogen til at stoppe, og en roligere tekstskrift til alt det, de læser bagefter.

Denne guide gennemgår, hvad der gør en skrift til en displayskrift, hvor stor den skal være, hvordan du kombinerer den, og hvordan du undgår, at stor skrift virker klemt eller dateret. Den bygger videre på grundlæggende typografi og visuelt hierarki.

Forskellen på en displayskrift og en tekstskrift

Tekstskrifter er bygget til behagelig læsning af tusindvis af ord: åbne former, robuste streger, god afstand og stor x-højde, så bogstaverne klarer små størrelser og dårlige skærme. Displayskrifter bytter noget af det for karakter. Ved 80 px har ingen svært ved at se bogstaverne, så skriftdesigneren kan øge kontrasten, gøre bogstaverne smallere, skærpe detaljer og mindske afstanden.

Nogle familier findes i begge versioner: et Text-snit og et Display-snit af samme design eller en enkelt variabel fil med en akse til optisk størrelse, som tilpasser sig, når størrelsen ændres. Variable skrifter forklarer optisk størrelse mere detaljeret.

Typer af displayskrifter og deres stemning

Displayskrifter er lettest at vælge ud fra den følelse, du ønsker. Hver kategori nedenfor har lettilgængelige eksempler fra Google Fonts, så du kan prøve dem med dine egne ord.

• Seriffer med høj kontrast: mode, kultur, redaktionelt design. Eksempler: Playfair Display, DM Serif Display, Bodoni Moda.
• Smalle sans serif-skrifter: hastværk, sport, nyheder, plakater. Eksempler: Bebas Neue, Anton, Oswald.
• Brede og udvidede sans serif-skrifter: tech, moderne brands, selvsikker ro. Eksempler: Syne, Unbounded.
• Bløde og afrundede: venlighed, mad, børn, velvære. Eksempler: Fraunces med dens blødhedsakse, Fredoka.
• Tunge groteskskrifter: stærke udsagn, lanceringer, aktivisme. Eksempler: Archivo Black, Inter Tight i vægten Black.
• Skriveskrifter og håndtegnede skrifter: invitationer, håndværk, personlige brands, brugt med måde. Eksempler: Caveat, Yellowtail.

Så stor skal displayskrift være

Stor nok til tydeligt at være det første, folk ser, og lille nok til, at ordene kan stå på få linjer. En nyttig vane er at vælge størrelsen i forhold til lærredet frem for i punkter. På et opslag på 1080 gange 1350 fylder en overskrift på to til fire ord ofte omkring 70 til 90 procent af bredden. På en hjemmeside er en herooverskrift typisk omkring tre til seks gange brødtekstens størrelse.

På nettet skalerer clamp() displayskrift jævnt mellem en minimums- og maksimumsstørrelse, så den bliver stor på store skærme uden at løbe over på telefoner. Mindsk linje- og bogstavafstanden, efterhånden som størrelsen vokser. Standardværdierne er lavet til 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;
}

Kombinér en displayskrift med en tekstskrift

Den enkleste, sikre kombination giver hver skrift én opgave. Displayskriften taler højt i nogle få ord, mens tekstskriften gør det stille arbejde i billedtekster, brødtekst, datoer og priser. Skab mindst én tydelig kontrast, som serif mod sans serif eller smal mod normal bredde, så kombinationen ikke ligner et næsten-match. Kombination af skrifttyper gennemgår reglerne i fuld længde.

Displayskrift på gradienter og urolige baggrunde

Stor skrift er den mest tilgivende tekst på en farverig baggrund, fordi tykke streger bevarer deres form mod bevægelse i fladen bag dem. Risikoen ligger i de tynde dele: hårfine seriffer og små detaljer forsvinder i gradientens lysere eller mere urolige områder. Vælg en displayskrift med mere robuste tynde streger på rige baggrunde, eller gå en vægt op.

I Gradiently ved en Mark, hvor dine ord er: dens roligste område flytter sig bag overskriften, og farver nær bogstaverne bliver dybere eller lysere, så selv fin displayskrift holder. Skrifteffekter som Kontur, Indre linje og Ekstrudering giver store ord karakter, når selve skriften er enkel. Teksteffekter viser, hvornår de virker.

Fejl, der får displayskrift til at se billig ud

1. 1

   Standardafstand i kæmpe størrelser

   Stor skrift med standardværdier til tekst virker løs. Mindsk linjeafstanden til omkring 1 til 1.1 og bogstavafstanden en smule.

2. 2

   Kunstig fed og kursiv

   Når en skrift mangler et snit, kan værktøjer og browsere efterligne det ved at gøre bogstaverne tykkere eller skråstille dem. Indlæs de rigtige vægte og kursiver.

3. 3

   Strakt skrift for at få plads

   Skalér aldrig skrift vandret eller lodret. Vælg et smalt eller bredt snit i stedet.

4. 4

   Trendskrifter uden grund

   En skrift valgt, fordi den er overalt denne sæson, bliver dateret sammen med sæsonen. Vælg efter den stemning, du har brug for.

5. 5

   Et ensomt ord i overskrifter på to linjer

   Et enkelt kort ord alene på anden linje svækker overskriften. Skriv om, flyt linjeskiftet, eller brug text-wrap: balance.