Fonttikoon määrittely squarespace nettisivuilla

Onko sinulla Squarespace-verkkosivut ja olet ihmetellyt, miksi fonttikoot ilmoitetaan esimerkiksi muodossa 1 rem, 2.5 rem tai 4 rem? Entä miten tiedät, kuinka suuri fontti kannattaa valita?

Monissa kuvankäsittely- ja suunnitteluohjelmissa fonttikoko ilmoitetaan esimerkiksi pisteinä (pt) tai pikseleinä (px). Verkkosivuilla tekstin kokoa voidaan kuitenkin määritellä useilla eri yksiköillä.

Squarespacessa törmäät erityisesti rem-yksikköön.

Tässä postauksessa käydään läpi, mitä px ja rem tarkoittavat, miten ne eroavat toisistaan ja miten voit hahmottaa rem-arvoja fonttikokoa määritellessäsi.

Mitä px ja rem tarkoittavat?

Sekä px että rem ovat CSS:ssä käytettäviä mittayksiköitä, mutta ne toimivat eri tavalla.

Pikseli eli px

px tarkoittaa CSS-pikseliä. Se on absoluuttinen CSS-mittayksikkö: esimerkiksi

16px

tarkoittaa selaimelle määriteltyä 16 CSS-pikselin kokoa.

Tämä ei kuitenkaan tarkoita, että 16px olisi fyysisesti täsmälleen saman kokoinen kaikilla näytöillä. Laitteiden pikselitiheydet, näytön skaalaus, zoomaus ja muut asetukset vaikuttavat siihen, miltä sisältö lopulta näyttää käyttäjälle.

Pikseleissä määritelty fonttikoko ei myöskään tarkoita, etteikö verkkosivusto voisi olla responsiivinen. Responsiivisuus muodostuu monesta asiasta, kuten sivuston rakenteesta, CSS-säännöistä ja eri näyttökokoihin tehdyistä mukautuksista.

Pikseleitä käytetään verkkosivujen suunnittelussa edelleen paljon esimerkiksi marginaalien, reunusten ja muiden mittojen määrittelyssä.

Fonttikokojen kohdalla suhteellisilla yksiköillä, kuten rem, on kuitenkin omat etunsa.

REM eli root em

rem on suhteellinen CSS-mittayksikkö.

Nimi tulee sanoista root em, koska rem-arvo määräytyy sivun juurielementin eli HTML-elementin fonttikoon perusteella.

Jos sivuston juurielementin fonttikoko on esimerkiksi 16px, laskenta näyttää tältä:

1rem = 16px

1.5rem = 24px

2rem = 32px

2.5rem = 40px

Tärkeä ero on siis se, että rem-arvoa ei määritellä irrallisena pikselimääränä, vaan suhteessa sivuston juurielementin fonttikokoon.

Tämän vuoksi rem-arvot sopivat hyvin verkkosivuston typografian rakentamiseen: eri tekstityylien koot voidaan pitää suhteessa samaan peruskokoon.

Entä em ja rem – mitä eroa niillä on?

em ja rem ovat molemmat suhteellisia mittayksiköitä, mutta niiden vertailukohta on erilainen.

rem perustuu aina sivuston juurielementin fonttikokoon.

em puolestaan määräytyy kyseisen elementin kontekstin perusteella. Käytännössä tämä voi tarkoittaa esimerkiksi elementin oman tai sen vanhemman elementin fonttikokoa riippuen siitä, mitä CSS-ominaisuutta ollaan määrittelemässä.

Tästä syystä rem on usein helpommin hahmotettava yksikkö silloin, kun halutaan rakentaa johdonmukainen fonttikokojen järjestelmä koko verkkosivustolle.

Squarespacen omissa fonttiasetuksissa sinun ei kuitenkaan tarvitse ymmärtää CSS:n toimintaa näin syvällisesti. Olennaisinta on ymmärtää, mitä rem-arvo käytännössä tarkoittaa fonttikokoa valitessa.

Miten rem-koko lasketaan?

Jos käytät laskennan lähtökohtana 16 pikselin peruskokoa, rem-arvon voi laskea yksinkertaisesti näin:

haluttu pikselikoko ÷ 16 = rem

Jos esimerkiksi haluat Heading 2 -otsikon vastaavan 32 pikselin kokoa:

32 ÷ 16 = 2rem

Jos haluat sen vastaavan 40 pikselin kokoa:

40 ÷ 16 = 2.5rem

Ja jos haluat 48 pikselin otsikon:

48 ÷ 16 = 3rem

Tässä muutama yleinen muunnos:

16px = 1rem
20px = 1.25rem
24px = 1.5rem
32px = 2rem
40px = 2.5rem
48px = 3rem
64px = 4rem

Näitä lukuja ei kuitenkaan tarvitse opetella ulkoa. Squarespacessa fonttikokoa voi hyvin säätää myös silmämääräisesti ja tarkistaa lopputuloksen eri näyttöko'oissa.

Mikä on olennaista fonttikoon määrittelyssä?

Fonttikokoa valittaessa tärkeintä ei lopulta ole se, onko jokin otsikko täsmälleen 40 vai 42 pikselin kokoinen. Tärkeämpää on, että teksti on helposti luettavaa ja sivuston typografia muodostaa selkeän hierarkian.

Pääotsikon pitäisi erottua alaotsikoista, alaotsikoiden leipätekstistä ja pienempien tekstien varsinaisesta sisällöstä.

Fonttikokoja valitessa kannattaa kiinnittää huomiota erityisesti siihen, että:

• leipäteksti on riittävän suurta ja helppolukuista

• otsikoiden ja leipätekstin välillä on selkeä kokoero

• eri otsikkotasot erottuvat toisistaan

• pitkät otsikot mahtuvat hyvin myös pienemmille näytöille

• teksti näyttää hyvältä sekä desktopilla että mobiilissa

• fontin koko toimii yhteen valitsemasi fonttiperheen kanssa

Sama fonttikoko voi nimittäin näyttää hyvin erilaiselta kahdella eri fontilla. Siksi täydellistä rem-arvoa ei kannata valita pelkän laskukaavan perusteella.

Tarvitseeko rem-arvoja osata laskea Squarespacea käyttäessä?

Ei välttämättä.

Squarespacen fonttikokoja voi säätää aivan hyvin silmämääräisesti ilman, että rem- ja px-yksiköiden matematiikkaan tarvitsee perehtyä sen tarkemmin.

Rem-arvojen ymmärtämisestä on kuitenkin hyötyä, jos rakennat sivustoa tarkkojen brändiohjeiden perusteella.

Jos graafisessa ohjeistossasi lukee esimerkiksi, että verkkosivuston H2-otsikon pitäisi olla 40px, voit käyttää muunnosta apuna ja hahmottaa, mitä rem-arvoa kannattaa lähteä kokeilemaan Squarespacessa.

Muista silti aina tarkistaa lopputulos itse sivustolla. Hyvä typografia ei synny pelkistä numeroista – tärkeintä on, että tekstit muodostavat selkeän kokonaisuuden ja niitä on miellyttävä lukea kaikilla laitteilla.