Kako poiščemo pravo velikost fonta za splet?

Ni vsaka tipografija enaka drugi, tudi najboljša tipografija oz. pisava je lahko »grozna«, če ni ustrezno nastavljena. Glavni parametri, ki vplivajo na to so velikost fonta, višina vrstice in dolžina vrstice.

Tehnologija se hitro razvija, tako se tudi tipografija na spletu in CSS s katerim vplivamo na prikaz tipografije. Generalno imamo dve glavni skupini, in sicer: serif in sans-serif. Najbolj pogosta oz. znana predstavnika sta Times New Roman za prve in Ariel za druge.

Generalno pravilo pri velikosti na spletu je, da slednjo nastavimo na velikost 16px. Vendar na to vpliva več zadev, in sicer uporabnikova naprava, kot so mobilni telefoni, tablice, laptopi, računalniki oz. oddaljenost ekrana od oči in dejanska velikost tipografije. Namreč nekatere tipografije so manjše od drugih, tudi če imajo nastavljeno enako velikost. Zato je potrebno v implementaciji narediti ustrezne prilagoditve.

V zadnjem času pri projektih največkrat uporabljam relativne enote (em, rem, …), ki omogočajo moji tipografiji, da rase skupaj z ekranom. V primerjavi z t.i. »break pointi« ta ne skače iz večje v manjšo ali obratno, ampak dejansko raste.

Generalne usmeritve pri velikosti fonta za osnovno besedilo:

  1. Osnovna velikost naj bo 16px
    Na mobilnih napravah, ki so bližje očem je lahko malo manjša, če to dopušča tipografija na večjih ekranih večja.
  2. Višina vrstice naj bo med 1.2 – 1.6
    Višina vrstice je odvisna od tipografije. Slednja mora biti dovolj velika, da besedilo lepo teče in ga uporabniki enostavno berejo.
  3. Dolžina vrstice naj bo med 50 -75 znakov
    Če je bralna vrstica predolga se bodo naši uporabniki težko koncentrirali na besedilo.

Vedno je potrebno implementacijo ustrezno preveriti oz. pretestirati, še posebej kadar uporabljamo manj standardne tipografije. Pozorni bodite tudi, da so posamezne črke med seboj dovolj razlikovalne, namreč veliko tipografij ima zaradi estetike določene znake precej podobne, kar prinaša oteženo branje pri manjših fontih. Če imate radi izzive pa si oglejte pobližje metode
Odzivna tipografija – clamp() tehnika in Resnično odzivna tipografija – Fluid Typography .

Dodatno branje na temo velikosti fontov

Oliver Schöndorfer ima zelo dober projekt »pimpmytype.com«, kjer veliko govori o tipografiji in njeni uporabi. Spodnji video nam na humoren način pojasni določene vidike velikosti tipografije.

pimpmytype.com

Komentiraj


*