Fonttikoon määrittely squarespace nettisivuilla

Onko sinulla Squarespace nettisivut tai oletko kokeillut rakentaa sivuja Squarespacella ja ihmetellyt miten tekstien fonttien kokoja vaihdetaan ja mitä yksiköitä koossa käytetään?

Olet ehkä tottunut näkemään erilaisissa tekstinkäsittelyohjelmissa tekstin fonttikoon ilmaistuna pelkkänä numerona tai sen perässä saattaa joskus näkyä px.

Squarespacessa fontit ilmoitetaan muodossa “rem”. Vanhassa Squarespace 7.0 versiossa fonttikoot säädettiin vielä muodossa “px”. Tämä muutos on tehty siksi, että Squarespace sivustot vastaisivat paremmin nykymaailman responsiivisuutta vaativiin tarpeisiin. Responsiiviset nettisivut skaalautuvat paremmin eri kokoisille näytöille ja toimivat siten sujuvammin ja käyttäjäystävällisemmin erilaisilla päätelaitteilla. Ja sitähän me verkkosivujen omistajina haluamme, että sivustojamme on kätevää selata erilaisilla laitteilla.

Fonttikokoa voidaan määritellä selaimissa nettisivuilla erilaisilla yksiköillä. Niitä on muitakin kuin edellä mainitut Squarespacessa käytetyt “px” ja “rem”. Kokomääritelmiä on absoluuttisia eli kiinteitä ja relatiivisia eli suhteellisia. Kiinteä fonttikoko näyttäytyy nimensä mukaisesti aina tietyn kokoisena ja suhteellisena määritelty fonttikoko puolestaan määrittyy ympäristönsä mukaan. Tässä kirjoituksessa käytän esimerkkinä Squarespace 7.0 version käyttämää kiinteää yksikköä “px” ja Squarespace 7.1 version käyttämää suhteellista yksikköä “rem” avaamaan sitä miten fontteja määritellään Squarespace nettisivuilla.

Mitä ovat PX ja REM?

Pixels (PX)

Pikselit eli Pixels (px) ovat absoluuttisia yksikköjä. Jos nettisivu käyttää fontin yksikkönä pikseleitä, selain näyttää fontit juuri siinä asetetussa koossa riippumatta siitä minkä kokoinen näyttö on. Eli esimerkiksi jos joku katsoisi nettisivua kännykällä missä fontti on määritelty pikseleinä, se fontti olisi samankokoinen myös jos sivustoa katsoisi isolla tietokoneen ruudulla.

Muita kiinteitä mittayksiköitä ovat pt (piste), pc (pica), in (tuuma), cm (senttimetri) ja mm (millimetri). Kiinteistä yksiköistä on oikeastaan hyötyä vain, jos etukäteen tiedetään käytettävän laitteen ominaisuudet (eli koko ja resoluutio). Nykyään laitteita, joilla nettisivuja selataan on niin monia erilaisia, että sen vuoksi pikseleitä ei kannata käyttää nettisivujen tekstin määrittelyssä.

Pikseli on kuitenkin osittain myös suhteellinen kokoyksikkö. 14 pikselin fontti on aina 14 pikselin fontti, mutta pikselin koko määrittyy kuitenkin käytetyn laitteen ominaisuuksien mukaan. Esimerkiksi 1600×1200 pikselin resoluutiossa 17 tuuman näytöllä yksi pikseli on pienempi kuin 800×600 pikselin resoluutiossa vastaavan kokoisella näytöllä.

Myös eri selainohjelmat käyttäytyvät eri tavoilla jos selaimessa päättää itse muuttaa selaimen tekstiä suuremmaksi. Kaikilla selaimilla ei esimerkiksi pikseleinä ilmoitettuja fontteja voi suurentaa selaimen omalla teksinsuurennoksella. Tämäkin on syy miksi pikseleitä ei ole suotavaa käyttää nettisivujen fonttikoon määrittelevänä yksikkönä.

Root Element (REM)

EM ja REM ovat suhteellisia kokomääritelmiä ja toimivat lähes samalla tavalla. Kun fonttien määrittelyssä koko on annettu EM tai REM muodossa, fontin koko mukautuu suhteessa siihen päätelaitekokoon missä sitä katsotaan. Squarespacessa fonttikoot määritellään REM muodossa.

Mikäli verkkosivulla on määritelty, että fontin koko on 14 pikseliä, 1 EM ja REM vastaa 14 pikseliä. EM yksikkö voidaan määritellä erikseen eri elementeille. REM yksikkö tulee sanasta root em, ja se voidaan määritellä html-elementissä, joka kattaa koko sivuston. Toisin sanoen EM yksiköllä määritelty tekstin koko riippuu elementistä, jonka sisällä tekstisisältö on. REM yksikkö sen sijaan pysyy saman kokoisena koko sivun alueella. EM yksikköjä käytetään Squarespacessa vain CSS koodin avulla. Squarespacen asetuksissa fontteja käsitellään REM yksikköinä.

Squarespace 7.1 versiossa annetaan fonteille base size fonttikoko pikseleinä, joka on oletuksena 16px. Kaikkialla muualla fonteille annetaan koko REM muodossa, joka suhteuttaa tuon base size pohjakoon siihen ruudun kokoon millä sivustoa katsotaan.

REM koon laskeminen

Jos base size fontille on Squarespacessa se 16 px ja esimerkiksi heading 2 halutaan sivustolla kokoon 32 px lasketaan 32 px / 16 px = 2 REM. Tai jos halutaan, että heading 2 on 40 px kokoinen sivustolla lasketaan se 40 px / 16 px = 2.5 REM ja asetat Squarespacen heading 2 kooksi 2.5 REM.

MiKÄ ON OLEELLISTA FONTTIKOON MÄÄRITTELYSSÄ?

Squarespacen fonttimenussa on valittavana 600 Google fonttia sekä yli 1000 Adoben Fonttia ja koodin avulla Squarespace nettisivuille voi lisätä minkä tahansa fontin mihin on käyttöoikeus (ostettu tai ilmainen). Fonttia ja fonttikokoa valittaessa on oleellista miettiä miten selkeää tekstiä on lukea. Liian pientä kokoa on vaikea lukea etenkin mobiililaitteissa ja liian suuri ei mahdu pienille näytöille.

Squarespace on tehnyt fonttikoon responsiivisuuden todella helpoksi siirtymällä käyttämään REM yksikköjä fonteille. Se takaa, että fonttikoot ovat suhteessa sopivan kokoisia eri kokoisilla näytöillä.

Fonttikokoa voi siis määritellä Squarespacessa helposti silmämääräisesti syventymättä sen tarkemmin fonttien yksiköihin, mutta jos haluaa ymmärtää miten fonttikoot toimivat ja on tarve saada esimerkiksi asetettua oman brändi-ilmeen mukaisesti fonttikoot omalle nettisivulle, tulee PX ja REM yksiköiden käyttöä ymmärtää.