Typografiajärjestelmä: anna jokaiselle fontille rooli

Typografiajärjestelmä on sääntöjoukko, joka määrittää tekstin käytön koko brändissä: muutama nimetty rooli (näyttöteksti, otsikko, leipäteksti, tunniste), jokaisella yksi fontti, leikkaus, koko, rivikorkeus ja kirjainkoko. Koot tulevat yhdestä asteikosta ja arvot tallennetaan tokeneiksi, jotta jokainen suunnittelija ja kehittäjä käyttää samoja. Fontit antavat brändille äänen. Järjestelmä pitää sen yhtenäisenä, joten julisteen, sivuston ja tarinan otsikot näyttävät samasta lähteestä tulleilta. Näin rakennat sen.

Typografiajärjestelmän roolit

Aloita tehtävistä, älä fonteista. Jokainen brändin julkaisema teksti hoitaa yhtä muutamista tehtävistä, ja tehtävästä tulee rooli. Useimmat brändit tarvitsevat viidestä seitsemään.

Kuinka monta fonttia brändin typografiajärjestelmä tarvitsee

Yleensä yhden tai kaksi. Yksi perhe kolmella leikkauksella voi kantaa koko järjestelmän. Kaksi fonttia, yksi otsikoille ja toinen leipätekstille, tuo luonnetta. Kolmas on perusteltu vain erityistehtävään, kuten koodiin tai dataan. Vaihtelu tulee rooleista, ko’oista ja leikkauksista, ei lisäkirjasimista. Google Fonts -parit ja brändifontit auttavat valinnassa.

Rakenna typografinen asteikko

Typografinen asteikko valitsee peruskoon ja kertoo sen samalla suhteella jokaisella askeleella ylöspäin. Askeleet liittyvät toisiinsa, joten mitkä tahansa kaksi järjestelmän kokoa näyttävät harkituilta yhdessä. Suhde 1,25 sopii käyttöliittymiin ja tiheisiin sivuihin, 1,333 tai 1,5 tuo enemmän dramatiikkaa toimitukselliseen ja markkinointityöhön. Typografinen asteikko selittää suhteet tarkemmin.

Tallenna järjestelmä tokeneiksi

Vain PDF:ssä elävä järjestelmä ajautuu sivuun. Tokenit ovat nimettyjä arvoja, joita sekä koodi että suunnittelutiedostot lukevat, joten yhden arvon muuttaminen päivittää kaiken. Nimeä tokenit roolin, älä koon mukaan: --type-heading selviää uudistuksesta, --type-31 ei. Designtokenit käsittelee laajempaa ajatusta.

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

Yksi rooli, eri koot eri kanavissa

Sivuston ja Instagram-julkaisun otsikot tekevät saman työn hyvin eri koossa, sillä toista luetaan käsivarren etäisyydeltä suurelta näytöltä ja toinen kutistuu puhelimen syötteeseen. Pidä roolit samoina ja anna jokaiselle kanavalle omat koot.

Näin rakennat typografiajärjestelmäsi

1. 1

   Kerää jo julkaisemasi aineisto

   Ota kuvakaappaukset sivustosta, julkaisuista, sähköposteista ja dioista. Ympyröi jokainen erillinen tekstityyli. Useimmat brändit löytävät paljon enemmän kuin tarkoittivat.

2. 2

   Ryhmittele tyylit rooleiksi

   Yhdistä lähes samat tyylit. Tavoittele viidestä seitsemään roolia, jotka kattavat kaiken ympyröimäsi.

3. 3

   Valitse roolien fontit

   Yleensä otsikko- ja leipätekstifontti. Tarkista, että lisenssi kattaa verkon, sovellukset ja mahdollisen logokäytön.

4. 4

   Määritä asteikko ja yksityiskohdat

   Valitse peruskoko ja suhde, sitten kunkin roolin leikkaus, rivikorkeus, kirjainkoko ja välit. Päätä otsikoiden kirjainkoko kerran. Normaali kirjainkoko vai otsikkotyyli auttaa.

5. 5

   Julkaise tokeneina ja yhden sivun ohjeena

   Tokenit koodille ja suunnittelutiedostoille, yksi visuaalinen sivu brändin tyylioppaaseen kaikille muille.

Arkisia somejulkaisuja ja esityksiä varten Gradientlyn Pro-brändipaketti säilyttää järjestelmäsi otsikko- ja leipätekstifontit, myös ladatut fonttitiedostot, logojen, värien ja äänensävyn rinnalla. Uudet suunnitelmat alkavat näillä kahdella fontilla, ja Designer soveltaa pakettia asettelussa. Otsikon ja leipätekstin jako säilyy ilman, että kenenkään täytyy muistaa sitä.