# Typografinen asteikko: yhteensopivat koot ja suhteet

[Canonical HTML page](https://gradiently.design/fi/guide/typographic-scale)

Tuntumalla valitut fonttikoot ajautuvat erilleen: 18, 22, 23, 30, 31. Typografinen asteikko korvaa arvailun yhdellä peruskoolla ja kertoimella, jolloin kaikki koot kuuluvat samaan perheeseen.

## The short version

- Typografinen asteikko on pieni joukko fonttikokoja, jotka saadaan kertomalla peruskoko toistuvasti samalla kertoimella.
- Pieni kerroin, kuten 1,2, sopii tiheään käyttöliittymään. Suuri kerroin, kuten 1,5, sopii julisteisiin, somejulkaisuihin ja laskeutumissivuille.
- Kun peruskoko on 16 px ja kerroin 1,25, asteikon koot ovat 16, 20, 25, 31, 39 ja 49 px.
- Useimmat designit tarvitsevat vain viisi tai kuusi kokoa. Tulokset voi pyöristää kokonaisiin pikseleihin.
- CSS:ssä typografista asteikkoa on helpoin ylläpitää mukautetuilla ominaisuuksilla ja tehdä siitä mukautuva clamp()-funktiolla.

**Typografinen asteikko** on yhdestä peruskoosta ja kertoimesta rakennettu fonttikokojen sarja. Aloita leipätekstin koosta, esimerkiksi 16 px, ja kerro se kertoimella saadaksesi seuraavan koon. Kerro sitten uudelleen. Kertoimella 1,25 saat koot 16, 20, 25, 31, 39 ja 49 px. Jokainen porras kasvaa samassa suhteessa, joten koot näyttävät yhteensopivilta eikä otsakkeen koon valinta jää arvaukseksi.

## Miksi asteikko tekee ko’oista yhteensopivia

Silmä lukee koon suhteina, ei pikseleinä. Muutos 16:sta 20:een tuntuu samalta kuin 39:stä 49:ään, koska molemmat ovat noin neljänneksen suurempia. Tuntumalla valitut koot kasaantuvat joissakin kohdissa ja jättävät toisiin aukkoja. Kaksi otsaketta voi päätyä lähes samankokoisiksi ja näyttää virheeltä. Asteikko antaa joka tasolle selkeän, yhtenäisen portaan. Se on [visuaalisen hierarkian](https://gradiently.design/fi/guide/visual-hierarchy) perusta.

## Tavallisten typografisten kertoimien vertailu

Monet suositut kertoimet on nimetty musiikin intervallien mukaan. Näin rakennettua asteikkoa kutsutaan usein modulaariseksi. Nimeä tärkeämpää on portaan suuruus: suurempi kerroin tuo tasojen välille enemmän dramatiikkaa ja sivulle mahtuu vähemmän tasoja.

| Nimi | Kerroin | Vaikutelma | Sopii |
| --- | --- | --- | --- |
| Pieni sekunti | 1,067 | Tuskin erottuva | Tiheät datataulukot ja pienet näytöt |
| Suuri sekunti | 1,125 | Hellävarainen | Sovellukset ja hallintanäkymät |
| Pieni terssi | 1,2 | Rauhallinen ja selkeä | Käyttöliittymät, ohjeet ja pitkä lukeminen |
| Suuri terssi | 1,25 | Tasapainoinen | Sivustot ja blogit, varma oletus |
| Puhdas kvartti | 1,333 | Vakuuttava | Markkinointisivut ja toimituksellinen sisältö |
| Ylinouseva kvartti | 1,414 | Vahva | Laskeutumissivut ja esitykset |
| Puhdas kvintti | 1,5 | Rohkea | Julisteet, somejulkaisut ja suuret otsakkeet |
| Kultainen leikkaus | 1,618 | Dramaattinen | Näyttötypografia, jossa on vähän tasoja |

Tavalliset kertoimet pienestä suureen. Aloita tarvittaessa verkkosisällössä arvosta 1,25 ja somejulkaisuissa arvosta 1,5.

## Typografisen asteikon pikseliarvot

Tässä sama 16 px:n peruskoko neljällä kertoimella. Huomaa, miten nopeasti suuret kertoimet kasvavat: portaalla 4 asteikko 1,5 on jo 81 px, kun asteikko 1,2 on 33 px.

| Porras | 1,2 | 1,25 | 1,333 | 1,5 |
| --- | --- | --- | --- | --- |
| Pieni (porras −1) | 13 | 13 | 12 | 11 |
| Leipäteksti (peruskoko) | 16 | 16 | 16 | 16 |
| Porras 1 | 19 | 20 | 21 | 24 |
| Porras 2 | 23 | 25 | 28 | 36 |
| Porras 3 | 28 | 31 | 38 | 54 |
| Porras 4 | 33 | 39 | 51 | 81 |
| Porras 5 | 40 | 49 | 67 | 122 |

Arvot pyöristetty kokonaisiin pikseleihin. Peruskokoa pienempi porras saadaan jakamalla peruskoko kertoimella. Se sopii kuvateksteihin ja nimikkeisiin.

Pyöristys sopii hyvin. Kukaan ei huomaa eroa 31,25:n ja 31 px:n välillä. Kokonaisluvut ovat helpompia muistaa ja sovittaa ruudukkoon.

## Oman typografisen asteikon rakentaminen

1. **Valitse peruskoko** Tämä on leipätekstisi koko. Useimmille sivustoille sopii 16 tai 18 px. Aloita 1080 px:n somepohjassa koosta 40 px.
2. **Valitse kerroin sisällön mukaan** Paljon tekstiä ja useita otsaketasoja tarvitsee pienen kertoimen. Muutama sana ja yksi suuri otsake tarvitsevat suuremman.
3. **Luo viisi tai kuusi porrasta** Kerro ylöspäin otsakkeita varten ja jaa kerran pientä tekstiä varten. Useimmat designit eivät käytä yli kuutta kokoa.
4. **Pyöristä ja nimeä** Pyöristä kokonaisiin pikseleihin ja nimeä portaat tehtävän mukaan, kuten kuvateksti, leipäteksti, otsake ja näyttöteksti, numeron sijaan.
5. **Valitse rivikorkeus portaittain** Suuri teksti tarvitsee tiiviimmän rivivälin. Leipätekstissä noin 1,5, otsakkeissa noin 1,2 ja näyttötekstissä lähellä 1,0.
6. **Testaa oikeilla sanoilla** Aseta oikea otsake, alaotsake ja kappale. Jos kaksi porrasta näyttää liian samanlaiselta, ohita toinen tai kasvata kerrointa.

## Somejulkaisun typografinen asteikko

Somejulkaisu tarvitsee verkkosivua suuremman kertoimen. 1080 px:n pohja pienenee puhelimessa kolmasosaan leveydestään, ja teksti käyttää vain kahta tai kolmea tasoa. 40 px:n peruskoko kertoimella 1,5 tuottaa 40, 60, 90 ja 135 px. Ne vastaavat hyvin oppaan [fonttikoko Instagram-julkaisuissa](https://gradiently.design/fi/guide/font-size-for-social-media) mittoja.

Pystyjulkaisu, jonka suuri luku kertoo kassavaiheen olevan 3 kertaa nopeampi ja alla on pienempi lisäteksti

Lukujulkaisu tarvitsee kolme selkeää tasoa: luvun, lisätiedon ja nimikkeen. Asteikolla 1,5 ne ovat 135, 60 ja 40 px.

Pystysuuntainen karusellidia otsakkeella Ennen julkaisua ja lyhyellä tarkistuslistalla

Listadia käyttää saman asteikon alempia portaita ja sopii siksi lukudian rinnalle samaan karuselliin.

Sama asteikko karusellin kaikissa dioissa tekee sarjasta suunnitellun. Samat koot samoissa tehtävissä, dia toisensa jälkeen. [Somejulkaisujen tekstiasettelu](https://gradiently.design/fi/guide/text-hierarchy-social) näyttää, miten järjestät ne.

## Typografinen asteikko CSS:llä

Tallenna asteikko mukautettuina ominaisuuksina, jotta kaikki komponentit käyttävät sitä. Voit ketjuttaa kertolaskut `calc()`-funktiolla tai kirjoittaa pyöristetyt arvot. Näytön mukana kasvavassa asteikossa anna joka portaalle [clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)-alue: vähimmäiskoko puhelimelle, enimmäiskoko leveälle näytölle ja joustava arvo niiden väliin.

```css
/* A 1.25 scale from a 1rem (16px) base */
:root {
  --ratio: 1.25;
  --step-0: 1rem;
  --step--1: calc(var(--step-0) / var(--ratio));
  --step-1: calc(var(--step-0) * var(--ratio));
  --step-2: calc(var(--step-1) * var(--ratio));
  --step-3: calc(var(--step-2) * var(--ratio));
  --step-4: calc(var(--step-3) * var(--ratio));
  --step-5: calc(var(--step-4) * var(--ratio));
}

/* Fluid headings: smaller ratio on phones, larger on desktop */
h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4.25rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.15; }
h3 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.25; }
body { font-size: var(--step-0); line-height: 1.55; }
small { font-size: var(--step--1); }
```

Muuta `--ratio` kerran, niin jokainen porras päivittyy. Käytä jokaisen clampin vähimmäisarvossa `rem`-yksikköä, jotta teksti kunnioittaa lukijan omaa fonttikokoasetusta.

### Vältä

- Kymmenen kokoa, kun viisi riittää
- Kaksi otsaketta, joiden ero on 2 px
- Sama kerroin hallintanäkymälle ja julisteelle
- Kiinteät pikselikoot, jotka ohittavat lukijan fonttiasetukset

### Tee näin

- Viisi tai kuusi porrasta, joilla on nimetyt tehtävät
- Ohita porras, jos kaksi tasoa näyttää samalta
- Pieni kerroin tiheille näytöille, suuri vähille sanoille
- rem-pohjaiset koot ja mukautuva clamp()

Asteikko on yksi osa fonttien, välistyksen ja roolien kokonaisuutta. [Typografiajärjestelmä](https://gradiently.design/fi/guide/brand-typography-system) yhdistää ne ja [kirjainväli ja parivälistys](https://gradiently.design/fi/guide/tracking-vs-kerning) käsittelee eri portaisiin sopivia välejä. Somea suunnitellessa Gradientlyn brändipaketti säilyttää otsake- ja leipätekstifonttisi ja Designer käyttää niitä jokaisessa uudessa koossa. Kerran valittu asteikko on siten helppo säilyttää.

## FAQ

### Mikä on typografinen asteikko?

Fonttikokojen sarja, jossa peruskoko kerrotaan toistuvasti samalla kertoimella. Jokainen koko on samassa suhteessa muihin.

### Mikä on paras typografinen kerroin?

Yhtä parasta ei ole. 1,2 tai 1,25 sopii paljon tekstiä sisältäville sivustoille ja sovelluksille. 1,5 tai suurempi sopii vähäsanaisille julisteille ja somejulkaisuille.

### Kuinka montaa fonttikokoa designissa pitäisi käyttää?

Yleensä viittä tai kuutta: pieni teksti, leipäteksti, kaksi tai kolme otsaketasoa ja yksi näyttökoko.

### Kannattaako asteikon arvot pyöristää?

Kyllä. Kokonaisiin pikseleihin pyöristäminen ei näy, mutta tekee asteikosta helpomman käyttää ja muistaa.

### Miten teen typografisesta asteikosta mukautuvan CSS:ssä?

Käytä joka portaalle `clamp()`-funktiota: vähimmäisarvo rem-yksikkönä, joustava keskimmäinen arvo näkymäyksikköinä ja enimmäisarvo leveille näytöille.