# Typografiajärjestelmä: anna jokaiselle fontille rooli

[Canonical HTML page](https://gradiently.design/fi/guide/brand-typography-system)

Fonttien valinta on helppo osa. Käytön, koon, leikkauksen ja tehtävän tarkka määrittely saa brändin näyttämään yhtenäiseltä kaikkialla.

## The short version

- Typografiajärjestelmä on pieni joukko nimettyjä rooleja, kuten näyttöteksti, otsikko, leipäteksti ja tunniste. Jokaisella on vakiofontti, leikkaus, koko, rivikorkeus ja kirjainkoko.
- Typografiajärjestelmän koot tulevat yhdestä asteikosta, jossa peruskoko kerrotaan vakiosuhteella, jotta jokainen askel liittyy muihin.
- Useimmat brändit tarvitsevat vain yhden tai kaksi kirjasinta. Vaihtelu syntyy rooleista, leikkauksista ja ko’oista.
- Designtokenit tallentavat jokaisen roolin nimettynä arvona, jotta sivustot, sovellukset ja suunnittelutiedostot käyttävät samoja typografiapäätöksiä.
- Somejulkaisut, diat ja sivustot tarvitsevat samoille rooleille eri koot, joten hyvä järjestelmä määrittelee roolit kanavittain.

**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.

| Rooli | Tehtävä | Tyypillinen asetus |
| --- | --- | --- |
| Näyttöteksti | Suurimmat sanat: kampanjalauseet, kannet, pääotsikot | Otsikkofontti, lihavoitu, tiivis rivikorkeus, vähän sanoja |
| Otsikko | Osioiden otsikot ja julkaisuotsikot | Otsikkofontti, puolilihava tai lihavoitu, normaali kirjainkoko |
| Alaotsikko | Osion aloitukset, ingressit | Leipätekstifontti, keskipaksu, yhden askeleen leipätekstiä suurempi |
| Leipäteksti | Luettava teksti | Leipätekstifontti, tavallinen 400, rivikorkeus noin 1,5 |
| Tunniste ja yläteksti | Pieni teksti otsikon yläpuolella, tunnisteet, painikkeet | Leipätekstifontti, puolilihava, usein suuraakkoset väljemmällä kirjainvälillä |
| Kuvateksti | Tekijätiedot, alaviitteet, pienellä painettu teksti | Leipätekstifontti, tavallinen, pienin askel |
| Numerot | Hinnat, tilastot, taulukot | Tasalevyiset numerot kohdistuvat riveihin |

Seitsemän roolia kattaa lähes jokaisen brändin. Jos et osaa sanoa tyylin tehtävää, se ei ole rooli vaan poikkeus.

Uutiskirjetyylinen pystyjulkaisu, jossa on pieni yläteksti, suuri otsikko ja lyhyt tukirivi

Kolme roolia yhdessä julkaisussa: pieni yläteksti, otsikko ja leipätekstirivi. Jokainen erottuu heti, joten silmä tietää aloituspaikan.

## 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](https://gradiently.design/fi/guide/google-fonts-pairings) ja [brändifontit](https://gradiently.design/fi/guide/brand-fonts) auttavat valinnassa.

### Vältä

- Uutta fonttia jokaiseen kampanjaan
- Silmämääräisesti valittuja kokoja joka suunnitelmassa
- Yhdeksän leikkauksen lataamista, kun käytät kolmea
- Eri kirjainkokosääntöjä eri tiimeissä
- Tyyliopasta, joka listaa fontit mutta ei rooleja

### Tee näin

- Yksi tai kaksi perhettä kaikkeen
- Jokainen koko yhdestä asteikosta
- Vain roolien tarvitsemat leikkaukset
- Yksi kirjattu kirjainkokosääntö otsikoille ja painikkeille
- Roolit fontteineen, leikkauksineen, kokoineen, rivikorkeuksineen ja kirjainkokoineen

## 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](https://gradiently.design/fi/guide/typographic-scale) selittää suhteet tarkemmin.

| Askel | Koko suhteella 1,25 lähtökoosta 16 px | Rooli |
| --- | --- | --- |
| Askel 0 | 16 px | Leipäteksti |
| Askel 1 | 20 px | Alaotsikko, suuri leipäteksti |
| Askel 2 | 25 px | Pieni otsikko |
| Askel 3 | 31 px | Otsikko |
| Askel 4 | 39 px | Suuri otsikko |
| Askel 5 | 49 px | Näyttöteksti mobiilissa |
| Askel 6 | 61 px | Näyttöteksti työpöydällä |
| Askel miinus 1 | 13 px | Kuvateksti, tunniste |

Verkkoasteikko 16 px:n peruskoosta suhteella 1,25, pyöristettynä kokonaisiin pikseleihin. Jokainen rooli ottaa yhden askeleen ja säilyttää sen.

## 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](https://gradiently.design/fi/guide/design-tokens) käsittelee laajempaa ajatusta.

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

Jokainen rooli on yksi fontin lyhytmuotoinen token, joten leikkaus, koko, rivikorkeus ja perhe pysyvät yhdessä. Arvot vastaavat yllä olevaa asteikkoa rem-yksiköissä.

## 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.

| Rooli | Verkkosivusto | Somejulkaisu 1080×1350 | Diat 1920×1080 |
| --- | --- | --- | --- |
| Näyttöteksti | 49-61 px | 140-200 px | 120-160 px |
| Otsikko | 31 px | 90-120 px | 88-112 px |
| Leipäteksti | 16 px | 40-48 px | 48-64 px |
| Tunniste ja yläteksti | 13 px | 28-32 px | 36-44 px |

Samat roolit, fontit ja leikkaukset, eri koot. [Instagram-julkaisun fonttikoko](https://gradiently.design/fi/guide/font-size-for-social-media) ja [esitysten fontit](https://gradiently.design/fi/guide/typography-for-presentations) selittävät some- ja diakoot.

## Näin rakennat typografiajärjestelmäsi

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. **Ryhmittele tyylit rooleiksi** Yhdistä lähes samat tyylit. Tavoittele viidestä seitsemään roolia, jotka kattavat kaiken ympyröimäsi.
3. **Valitse roolien fontit** Yleensä otsikko- ja leipätekstifontti. Tarkista, että lisenssi kattaa verkon, sovellukset ja mahdollisen logokäytön.
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](https://gradiently.design/fi/guide/title-case-vs-sentence-case) auttaa.
5. **Julkaise tokeneina ja yhden sivun ohjeena** Tokenit koodille ja suunnittelutiedostoille, yksi visuaalinen sivu [brändin tyylioppaaseen](https://gradiently.design/fi/guide/brand-style-guide) 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ä.

## FAQ

### Mikä on typografiajärjestelmä?

Joukko nimettyjä tekstirooleja, kuten näyttöteksti, otsikko, leipäteksti ja tunniste. Jokaisella on vakiofontti, leikkaus, koko, rivikorkeus ja kirjainkoko, yleensä tallennettuina designtokeneiksi.

### Kuinka monta fonttia brändin pitäisi käyttää?

Useimmat tarvitsevat yhden tai kaksi: yhden otsikoille, toisen leipätekstille. Kolmas kannattaa lisätä vain erityistehtävään, kuten koodiin tai dataan.

### Mikä on typografinen asteikko?

Fonttikokojen sarja, joka syntyy kertomalla peruskoko vakiosuhteella, kuten 1,25. Näin jokainen koko liittyy muihin.

### Miten typografiatokenit kannattaa nimetä?

Roolin mukaan, kuten type-heading tai type-body, ei koon mukaan. Roolinimi säilyy merkityksellisenä koon muuttuessa.

### Pitäisikö somejulkaisuissa käyttää samoja fonttikokoja kuin sivustolla?

Ei. Säilytä samat roolit ja fontit, mutta käytä julkaisuissa paljon suurempia kokoja, sillä niitä katsotaan pieninä puhelimen syötteessä.