Typografisystem: giv hver skrifttype en rolle

Et typografisystem er det sæt regler, der afgør, hvordan skrift opfører sig i et brand: nogle få navngivne roller (display, overskrift, brødtekst, label), hver med én skrifttype, vægt, størrelse, linjehøjde og versalbrug, alle dimensioneret fra én skala og gemt som tokens, så hver designer og udvikler bruger de samme værdier. Skrifttyper giver et brand dets stemme. Systemet gør den stemme ensartet, så en overskrift på en plakat, et website og en story alle ser ud, som om de kom fra samme sted. Sådan bygger du et.

Rollerne i et typografisystem

Start med opgaver, ikke skrifttyper. Hver tekst, et brand udgiver, har en af en håndfuld opgaver, og hver opgave bliver en rolle. De fleste brands har brug for fem til syv.

Hvor mange skrifttyper et typografisystem til et brand har brug for

Som regel en eller to. Én familie i tre vægte kan bære et helt system. To skrifttyper, en til overskrifter og en til brødtekst, tilføjer karakter. En tredje er kun berettiget til en bestemt opgave som kode eller data. Variationen kommer fra roller, størrelser og vægte, ikke fra flere skrifttyper. Kombinationer af Google Fonts og brandskrifttyper hjælper dig med at vælge.

Byg en typeskala

En typeskala vælger en basisstørrelse og ganger den med det samme forhold for hvert trin op. Trinene hænger sammen, så to vilkårlige størrelser i systemet ser tilsigtede ud sammen. Et forhold på 1,25 passer til grænseflader og tætte sider; 1,333 eller 1,5 giver mere drama til redaktionelt og markedsføringsarbejde. Typeskala forklarer forholdene mere dybtgående.

Gem systemet som tokens

Et system, der kun findes i en PDF, driver. Tokens er navngivne værdier, som både kode og designfiler læser, så ændring af én værdi opdaterer alt. Navngiv tokens efter rolle, aldrig efter størrelse: --type-heading overlever et redesign, --type-31 gør ikke. Designtokens dækker den bredere idé.

:root {
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  --type-display: 600 clamp(3.0625rem, 6vw, 3.8125rem) / 1.05 var(--font-heading);
  --type-heading: 600 1.9375rem / 1.15 var(--font-heading);
  --type-subheading: 500 1.25rem / 1.4 var(--font-body);
  --type-body: 400 1rem / 1.5 var(--font-body);
  --type-label: 600 0.8125rem / 1.2 var(--font-body);
}

h1 { font: var(--type-display); }
h2 { font: var(--type-heading); }
p { font: var(--type-body); }
.eyebrow { font: var(--type-label); text-transform: uppercase; letter-spacing: 0.08em; }
.price { font-variant-numeric: tabular-nums; }

Én rolle, forskellige størrelser pr. kanal

En overskrift på et website og en overskrift på et Instagram-opslag har den samme opgave i meget forskellige størrelser, fordi den ene læses på armslængde på en stor skærm, og den anden skrumper ind i et telefonfeed. Hold rollerne identiske, og giv hver kanal sine egne størrelser.

Sådan bygger du dit typografisystem

1. 1

   Saml det, du allerede udgiver

   Tag skærmbilleder af dit website, opslag, mails og slides. Ring hver særskilt tekststil ind. De fleste brands finder langt flere, end de troede, de havde.

2. 2

   Gruppér stilene i roller

   Slå næsten-dubletter sammen. Sigt efter fem til syv roller, der dækker alt, du indringede.

3. 3

   Vælg skrifttyper til rollerne

   Som regel en overskriftsskrift og en brødtekstskrift. Tjek, at licensen dækker web, apps og enhver brug i logoet.

4. 4

   Sæt skalaen og detaljerne

   Vælg en basis og et forhold, og fastlæg derefter hver rolles vægt, linjehøjde, versalbrug og afstand. Beslut dig for versaler i overskrifter én gang; almindelige bogstaver mod titelversaler hjælper.

5. 5

   Udgiv det som tokens og et ark på én side

   Tokens til kode og designfiler, ét visuelt ark i din brandguide til alle andre.

Til hverdagens opslag og præsentationer rummer et Gradiently-brandkit (på Pro) dit systems overskrifts- og brødtekstskrifttyper, uploadede skrifttypefiler inklusive, ved siden af dine logoer, farver og din stemme. Nye designs starter med de to skrifttyper, og Designer anvender kittet, når den lægger et design ud, så opdelingen i overskrift og brødtekst holder uden at nogen skal huske den.