Obitelj generičkih fontova u CSS-u

Tipografski dizajn igra važnu ulogu u dizajnu web stranica. Dobro postavljen i formatiran tekstualni sadržaj pomaže web mjestu da bude uspješnije stvarajući iskustvo čitanja koje je istovremeno ugodno i lako za konzumiranje. Dio vaših napora u radu s tipom bit će odabir pravih fontova za vaš dizajn, a zatim korištenje CSS-a za dodavanje tih fontova i stilova fontova na prikaz stranice. To se postiže korištenjem onoga što se naziva a hrpa fontova.

Stogovi fontova

Kada ti navedite font za upotrebu na web stranici, najbolja je praksa također uključiti zamjenske opcije u slučaju da vaš izbor fonta ne može biti pronađen. Ove zamjenske opcije predstavljene su u hrpa fontova. Ako preglednik ne može pronaći prvi font naveden u stogu, premješta se na sljedeći. Nastavlja ovaj postupak sve dok ne pronađe font koji može koristiti ili mu ponestane izbora (u tom slučaju samo odabere bilo koji sistemski font koji želi). Evo primjera kako bi font-stack izgledao u CSS-u kada se primijeni na element "body":

tijelo {
obitelj fontova: Georgia, "Times New Roman", serif;
}

Prvo se pojavljuje font Georgia, pa će se prema zadanim postavkama to stranica koristiti, no ako taj font iz nekog razloga nije dostupan, stranica se vraća na Times New Roman.

Niz slova završava riječju serif. To je generičko prezime fonta. U malo vjerojatnom slučaju da osoba nema Gruziju ili Times New Roman na njihovom računalu web mjesto bi koristilo bilo koji serifni font koji bi mogao pronaći. Preglednik će odabrati font za vas, ali vi barem dajete smjernice kako bi znao koji bi font najbolje djelovao u dizajnu.

Obitelji generičkih fontova

Generički naziv fonta dostupan u CSS-u su:

• rukopisni
• fantazija
• monosprostor
• serif
• sans-serif

Iako su u web dizajnu i tipografiji dostupne mnoge druge klasifikacije fontova, uključujući pločasti serif, blackletter, display, grunge i još mnogo toga, ovih pet generičkih naziva fontova koristili biste u stogu fontova u CSS-u.

• Kurzivni fontovi - često sadrže tanke, kitnjaste oblike slova kojima je namijenjeno preslikavanje otmjenog rukopisnog teksta. Ovi fontovi zbog svojih tankih, cvjetnih slova nisu prikladni za velik blok sadržaja poput tjelesne kopije. Kurzivni fontovi obično se koriste za naslove i potrebe za kraćim tekstom koji se mogu prikazati u većim veličinama fontova.
• Fantazijski fontovi - pomalo su ludi fontovi koji zapravo ne spadaju ni u jednu drugu kategoriju. Fontovi koji repliciraju dobro poznate logotipe, poput oblika slova iz Harry Potter ili Povratak u budućnost filmovi, spadaju u ovu kategoriju. Ovi fontovi nisu prikladni za sadržaj tijela jer su često toliko stilizirani da je čitanje dužih dijelova teksta napisanog tim fontovima preteško učiniti.
• Monospace fontovi - sadrže jednako velike i razmaknute oblike slova kakve biste mogli naći na staroj pisaćoj mašini. Za razliku od ostalih fontova koji imaju promjenjivu širinu slova ovisno o njihovoj veličini (na primjer, veliko slovo W zauzima puno više mjesta od malih slova ja), monospace fontovi koriste fiksnu širinu za sve znakove. Ti se fontovi često koriste za očitavanje koda, jer izgledaju znatno drugačije od ostalih tekstova na toj stranici.
• Serif fontovi - upotrijebite malo dodatnih vezica na slovima. Ti se dodatni komadi nazivaju serifi. Uobičajeni serif fontovi su Georgia i Times New Roman. Serif fontovi izvrsno funkcioniraju za velike tekstove poput naslova, kao i za duge dijelove teksta i tekstualne kopije.
• Sans-seriffontovi - nemaju ligature. Ime znači bez serifa. Popularni fontovi u ovoj kategoriji uključuju Arial ili Helvetica. Slično kao i serifi, i sans-serif fontovi imaju jednake uspjehe u zaglavljima kao i u sadržaju tijela, iako neki stručnjaci preferiraju da veliki blokovi teksta izbjegavaju fontove bez serifa jer ih je teže pročitati u malom trenutku veličine.