Typografisystem: velg en rolle for hver font

Et typografisystem bestemmer hvordan skriften brukes i hele merkevaren: noen få roller som display, overskrift, brødtekst og etikett, hver med én font, vekt, størrelse, linjehøyde og bokstavbruk. Alle størrelser følger én skala og lagres som variabler, så designere og utviklere bruker samme verdier. Fontene gir merkevaren en stemme. Systemet gjør stemmen konsekvent, slik at overskrifter på en plakat, nettside og historie har samme opphav. Slik bygger du det.

Rollene i et typografisystem

Start med oppgavene, ikke fontene. All tekst merkevaren publiserer gjør én av noen få jobber, og hver jobb blir en rolle. De fleste trenger fem til sju.

Hvor mange fonter et merkevaresystem trenger

Vanligvis én eller to. Én familie i tre vekter kan bære hele systemet. To fonter, én til overskrifter og én til brødtekst, gir karakter. En tredje trengs bare til en egen oppgave, som kode eller data. Variasjonen kommer fra roller, størrelser og vekter, ikke flere skrifttyper. Google Fonts-kombinasjoner og skrifttyper til merkevarer hjelper deg å velge.

Bygg en typografisk skala

En typografisk skala tar en grunnstørrelse og multipliserer den med samme forhold for hvert trinn opp. Trinnene henger sammen, så to størrelser i systemet virker bevisst valgt sammen. Et forhold på 1,25 passer grensesnitt og innholdstette sider. 1,333 eller 1,5 gir mer dramatikk til redaksjonelt arbeid og markedsføring. Typografisk skala forklarer forholdene nærmere.

Lagre systemet som variabler

Et system som bare finnes i en PDF, sklir ut. Variabler er navngitte verdier både kode og designfiler leser, slik at én endring oppdaterer alt. Navngi etter rolle, aldri størrelse: --type-heading tåler en omprofilering, --type-31 gjør ikke det. Designvariabler forklarer prinsippet.

: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, ulik størrelse per kanal

En overskrift på nettsiden og et Instagram-innlegg gjør samme jobb i svært ulik størrelse. Den ene leses på armlengdes avstand på en stor skjerm, den andre krympes blant telefonens innlegg. Behold rollene og gi hver kanal egne størrelser.

Slik bygger du typografisystemet

1. 1

   Samle det du allerede publiserer

   Ta skjermbilder av nettside, innlegg, e-poster og lysbilder. Marker hver tekststil. De fleste finner langt flere enn planlagt.

2. 2

   Grupper stiler i roller

   Slå sammen nesten like stiler. Sikt på fem til sju roller som dekker alt du markerte.

3. 3

   Velg fonter til rollene

   Vanligvis én overskriftfont og én brødtekstfont. Sjekk at lisensen dekker nett, apper og eventuell logobruk.

4. 4

   Fastsett skala og detaljer

   Velg grunnstørrelse og forhold, så hver rolles vekt, linjehøyde, bokstavbruk og avstand. Bestem overskriftenes bokstavbruk én gang. Setningsbruk eller store forbokstaver hjelper.

5. 5

   Publiser som variabler og ett ark

   Variabler til kode og designfiler, ett visuelt ark i merkevaremanualen til alle andre.

Til vanlige sosiale innlegg og presentasjoner inneholder merkevaresettet i Gradiently Pro systemets overskrift- og brødtekstfonter, også opplastede fontfiler, ved siden av logoer, farger og tone. Nye design starter med disse to fontene, og Designer bruker settet i oppsettet. Dermed bevares rollefordelingen uten at noen må huske den.