Displaytypsnitt: så designar du med stor text

Displaytypsnitt är typsnitt ritade för att användas stort: rubriker, affischer, omslag, förpackningar och korta bitar text. Deras detaljer, från kraftig kontrast mellan tjocka och tunna streck till tätt avstånd och uttrycksfulla former, är gjorda för att se bäst ut i stora storlekar och faller oftast samman i styckestorlek. Använd ett displaytypsnitt för de få orden som ska stoppa någon, och ett tystare brödtypsnitt för allt de läser efteråt.

Den här guiden tar upp vad som gör ett typsnitt till ett displaytypsnitt, hur stort du ställer in det, hur du parar det och hur du hindrar stor text från att se trång eller daterad ut. Den bygger på typografins grunder och visuell hierarki.

Vad som skiljer ett displaytypsnitt från ett brödtypsnitt

Brödtypsnitt är byggda för bekvämlighet över tusentals ord: öppna former, kraftiga streck, generöst avstånd och hög x-höjd så att bokstäverna klarar små storlekar och dåliga skärmar. Displaytypsnitt byter en del av det mot karaktär. Vid 80 px har ingen svårt att se bokstäverna, så designern kan skruva upp kontrasten, pressa ihop bredden, skärpa detaljerna och dra åt avståndet.

Vissa familjer finns i båda versionerna: ett Text-snitt och ett Display-snitt av samma design, eller en enda variabel fil med en optisk storleksaxel som justerar sig själv när storleken ändras. Variabla typsnitt förklarar optisk storlek mer ingående.

Typer av displaytypsnitt och stämningen de ger

Displaytypsnitt väljer du lättast efter den känsla du vill ha. Varje familj nedan har vitt tillgängliga exempel från Google Fonts, så att du kan prova dem på dina egna ord.

• Högkontrastiga serifer: mode, kultur, redaktionellt. Exempel: Playfair Display, DM Serif Display, Bodoni Moda.
• Smalt sans: brådska, sport, nyheter, affischer. Exempel: Bebas Neue, Anton, Oswald.
• Brett och utsträckt sans: teknik, moderna varumärken, självsäker lugn. Exempel: Syne, Unbounded.
• Mjukt och rundat: vänligt, mat, barn, välmående. Exempel: Fraunces med sin mjuka axel, Fredoka.
• Tunga grotesker: kraftfulla uttalanden, lanseringar, aktivism. Exempel: Archivo Black, Inter Tight i svart vikt.
• Skript och handritat: inbjudningar, hantverk, personliga varumärken, sparsamt använt. Exempel: Caveat, Yellowtail.

Hur stor displaytext ska vara

Så stor att den tydligt är det första folk ser, och så liten att orden ryms på få rader. En användbar vana är att storleksätta displaytext i förhållande till canvasen i stället för i punkter. På ett inlägg på 1080 gånger 1350 fyller en rubrik på två till fyra ord ofta omkring 70 till 90 procent av bredden. På en webbplats ligger en hero-rubrik oftast någonstans kring tre till sex gånger brödtextens storlek.

På webben skalar clamp() displaytext mjukt mellan ett minimum och ett maximum, så att den blir stor på stora skärmar utan att svämma över på telefoner. Dra åt radavstånd och teckenavstånd när storleken växer, för standardvärdena är ritade för mindre text.

.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;
}

Para ett displaytypsnitt med ett brödtypsnitt

Den enklaste tillförlitliga paringen ger varje typsnitt ett jobb. Displaytypsnittet talar högt för några få ord, brödtypsnittet gör det tysta arbetet med bildtexter, brödtext, datum och priser. Skilj de två åt på minst ett tydligt sätt, som serif mot sans eller smalt mot normal bredd, så att de inte ser ut som en nästan-träff. Typsnittspar tar upp reglerna i sin helhet.

Displaytext på gradienter och stökiga bakgrunder

Stor text är den mest förlåtande text du kan lägga på en färgstark bakgrund, eftersom tjocka streck behåller formen mot rörelsen i fältet bakom. Risken ligger i de tunna delarna: hårfina serifer och fina detaljer försvinner i gradientens ljusare eller stökigare partier. På rika bakgrunder väljer du ett displaytypsnitt med kraftigare tunna streck, eller går upp en vikt.

I Gradiently vet en Mark var dina ord är: dess lugnaste område flyttar sig bakom rubriken och färgerna nära bokstäverna fördjupas eller lyfts, så att även fin displaytext håller. Bokstavsbehandlingar som Contour, Inline och Extrude ger karaktär åt displayord när typsnittet självt är enkelt. Texteffekter visar när de fungerar.

Misstag som får displaytext att se billig ut

1. 1

   Standardavstånd i enorma storlekar

   Stor text med brödtextens standardvärden ser lös ut. Dra åt radavståndet till omkring 1 till 1,1 och teckenavståndet något.

2. 2

   Falsk fetstil och falsk kursiv

   När ett typsnitt saknar en stil kan verktyg och webbläsare fejka den genom att smeta ut eller luta bokstäverna. Ladda de riktiga vikterna och kursiverna.

3. 3

   Att sträcka text så att den passar

   Skala aldrig text i bredd eller höjd. Välj ett smalt eller brett snitt i stället.

4. 4

   Trendtypsnitt utan skäl

   Ett typsnitt som valts för att det syns överallt den här säsongen åldras med säsongen. Välj efter den stämning du behöver.

5. 5

   Ensamma ord i tvåradiga rubriker

   Ett enda kort ord ensamt på andra raden försvagar rubriken. Skriv om, bryt om eller använd text-wrap: balance.