Kortversionen
- Ett typsystem är en liten uppsättning namngivna roller, som display, rubrik, brödtext och etikett, var och en med ett fast typsnitt, snitt, storlek, radavstånd och skiftläge.
- Storlekarna i ett typsystem kommer från en skala, en basstorlek multiplicerad med en konstant kvot, så att varje steg hänger ihop med de andra.
- De flesta varumärken behöver bara ett eller två typsnitt; systemet skapar variation genom roller, snitt och storlekar i stället.
- Designtokens lagrar varje roll som ett namngivet värde, så att webbplatser, appar och designfiler använder samma typografibeslut.
- Sociala inlägg, bildspel och webbplatser behöver olika storlekar för samma roller, så ett bra system listar varje roll per kanal.
På den här sidan
Ett typsystem är uppsättningen regler som avgör hur typografin beter sig i ett varumärke: några namngivna roller (display, rubrik, brödtext, etikett), var och en med ett typsnitt, ett snitt, en storlek, ett radavstånd och ett skiftläge, alla dimensionerade från en enda skala och lagrade som tokens så att varje designer och utvecklare använder samma värden. Typsnitt ger ett varumärke dess röst. Systemet gör rösten konsekvent, så att en rubrik på en affisch, en webbplats och en story ser ut att komma från samma ställe. Så bygger du ett.
Rollerna i ett typsystem
Börja med jobb, inte typsnitt. Varje text som ett varumärke publicerar gör ett av en handfull jobb, och varje jobb blir en roll. De flesta varumärken behöver fem till sju.
Typisk inställning
Typisk inställning
Jobb
Typisk inställning
Typisk inställning
Jobb
Typisk inställning
Typisk inställning
Typisk inställning
Tre roller i ett inlägg: en etikett som överrad, en rubrik och en brödtextrad. Var och en är omedelbart tydlig, så ögat vet var det ska börja.
Hur många typsnitt ett typsystem för ett varumärke behöver
Oftast ett eller två. En familj i tre snitt kan bära ett helt system. Två typsnitt, ett för rubriker och ett för brödtext, ger karaktär. Ett tredje motiveras bara för ett särskilt jobb som kod eller data. Variationen kommer av roller, storlekar och snitt, inte av fler typsnitt. Google Fonts-par och varumärkets typsnitt hjälper dig att välja.
Undvik
- Ett nytt typsnitt för varje kampanj
- Storlekar som väljs på ögonmått i varje design
- Nio snitt inlästa, tre använda
- Olika skiftlägesregler i olika team
- En grafisk manual som listar typsnitt men inte roller
Gör så här
- En eller två familjer för allt
- Varje storlek från en skala
- Bara de snitt som rollerna behöver
- En skriven skiftlägesregel för rubriker och knappar
- Roller med typsnitt, snitt, storlek, radavstånd och skiftläge
Bygg en typskala
En typskala väljer en basstorlek och multiplicerar den med samma kvot för varje steg uppåt. Stegen hänger ihop, så vilka två storlekar som helst i systemet ser avsiktliga ut tillsammans. En kvot på 1,25 passar gränssnitt och täta sidor; 1,333 eller 1,5 ger mer dramatik för redaktionellt och marknadsföringsarbete. Typskala förklarar kvoterna mer ingående.
Roll
Roll
Roll
Roll
Roll
Roll
Roll
Storlek vid 1,25 från 16 px
Roll
Lagra systemet som tokens
Ett system som bara finns i en PDF glider isär. Tokens är namngivna värden som både kod och designfiler läser, så att ett ändrat värde uppdaterar allt. Namnge tokens efter roll, aldrig efter storlek: --type-heading överlever en omdesign, --type-31 gör det inte. Designtokens tar upp den bredare idén.
: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; }En roll, olika storlekar per kanal
En rubrik på en webbplats och en rubrik i ett Instagram-inlägg gör samma jobb i mycket olika storlekar, eftersom den ena läses på armlängds avstånd på en stor skärm och den andra krymper ner i ett mobilflöde. Håll rollerna identiska och ge varje kanal sina egna storlekar.
Socialt inlägg 1080×1350
Bildspel 1920×1080
Socialt inlägg 1080×1350
Bildspel 1920×1080
Socialt inlägg 1080×1350
Bildspel 1920×1080
Webbplats
Socialt inlägg 1080×1350
Bildspel 1920×1080
Så bygger du ditt typsystem
- 1
Samla det du redan publicerar
Ta skärmdumpar av din webbplats, dina inlägg, e-postmeddelanden och bildspel. Ringa in varje särskild textstil. De flesta varumärken hittar långt fler än de tänkt sig.
- 2
Gruppera stilar i roller
Slå ihop nästan likadana. Sikta på fem till sju roller som täcker allt du ringat in.
- 3
Välj typsnitt till rollerna
Oftast ett rubriktypsnitt och ett brödtypsnitt. Kontrollera att licensen täcker webb, appar och all logotypanvändning.
- 4
Sätt skalan och detaljerna
Välj en bas och en kvot och fastställ sedan varje rolls snitt, radavstånd, skiftläge och avstånd. Bestäm din rubrikstil en gång; gemener efter punkt eller versalt i rubriker hjälper.
- 5
Publicera det som tokens och ett enkelsidigt blad
Tokens för kod och designfiler, ett enda visuellt blad i din grafiska manual för alla andra.
För vardagliga sociala inlägg och bildspel håller ett Gradiently-varumärkeskit (på Pro) rubrik- och brödtypsnitten i ditt system, inklusive uppladdade typsnittsfiler, vid sidan av dina logotyper, färger och röst. Nya designer börjar med de två typsnitten, och Designer tillämpar kitet när den lägger upp en design, så att uppdelningen mellan rubrik och brödtext håller utan att någon behöver komma ihåg den.
Vanliga frågor
Vad är ett typsystem?
En uppsättning namngivna typroller, som display, rubrik, brödtext och etikett, var och en med ett fast typsnitt, snitt, storlek, radavstånd och skiftläge, oftast lagrade som designtokens.
Hur många typsnitt ska ett varumärke använda?
Ett eller två för de flesta varumärken: ett för rubriker och ett för brödtext. Ett tredje är bara värt att lägga till för ett särskilt jobb som kod eller data.
Vad är en typskala?
En följd av teckenstorlekar som skapas genom att multiplicera en basstorlek med en konstant kvot, till exempel 1,25, så att varje storlek i systemet hänger ihop med de andra.
Hur ska typografitokens namnges?
Efter roll, som type-heading eller type-body, inte efter storlek. Rollnamn förblir meningsfulla när storlekarna ändras.
Ska inlägg i sociala medier använda samma teckenstorlekar som en webbplats?
Nej. Behåll samma roller och typsnitt, men använd mycket större storlekar i inlägg, eftersom de ses små i ett mobilflöde.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil