Typografinen asteikko: yhteensopivat koot ja suhteet

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

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.

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

   Valitse kerroin sisällön mukaan

   Paljon tekstiä ja useita otsaketasoja tarvitsee pienen kertoimen. Muutama sana ja yksi suuri otsake tarvitsevat suuremman.

3. 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. 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. 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. 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 mittoja.

Sama asteikko karusellin kaikissa dioissa tekee sarjasta suunnitellun. Samat koot samoissa tehtävissä, dia toisensa jälkeen. Somejulkaisujen tekstiasettelu 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()-alue: vähimmäiskoko puhelimelle, enimmäiskoko leveälle näytölle ja joustava arvo niiden väliin.

/* 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); }

Asteikko on yksi osa fonttien, välistyksen ja roolien kokonaisuutta. Typografiajärjestelmä yhdistää ne ja kirjainväli ja parivälistys 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ää.