Koje su generičke porodice fontova u CSS-u?

Sveobuhvatne klasifikacije fontova dostupne za korištenje na vašoj web lokaciji

Kada dizajnirate web stranicu, jedan od ključnih elemenata stranice sa kojom ćete raditi je sadržaj teksta. Kao takav, kada izgradite web stranicu i stvorite ga CSS-om, veliki deo tog napora će biti usredsređen na tipografiju sajta.

Tipografski dizajn igra važnu ulogu u dizajnu web sajta. Dobro postavljeni i formirani tekstualni sadržaji pomažu da sajt bude uspešniji stvaranjem iskustva čitanja koji je i prijatan i jednostavan za konzumiranje. Deo vaših napora u radu s tipom će biti odabrati prave fontove za vaš dizajn, a zatim koristiti CSS da dodate te fontove i stilove fonta na prikaz stranice. Ovo se radi koristeći ono što se zove " font-stack "

Font-Stacks

Kada odredite font koji ćete koristiti na web stranici, najbolja je praksa da uključite i opcije za rezervne kopije u slučaju da izbor fonta ne može biti pronađen. Ove opcije su prikazane u "stack fontu". Ako pretraživač ne može pronaći prvi font koji je naveden u stacku, on se pomera na sledeći. Ona nastavlja ovaj proces dok ne pronađe font koji može koristiti, ili se isključi iz izbora (u tom slučaju on samo bira bilo koji sistemski font koji želi). Evo primera kako će font-stack izgledati u CSS-u kada se primjenjuje na element "tijelo":

body {font-family: Georgia, "Times New Roman", serif; }

Obratite pažnju da prvo odredimo font Gruzija. Podrazumevano, to je ono što će stranica koristiti, ali ako taj font nije dostupan iz nekog razloga, stranica će se vratiti na Times New Roman. Prilagodi to ime fonta u dvostrukim navodnicima, jer je to ime višestruke reči. Imena fontova za pojedinačna imena, kao što su Gruzija ili Arial, ne zahtevaju citate, ali im je potreban font sa više rečenica, pa pretraživač zna da sve ove riječi čine ime fonta.

Ako pogledate kraj stack fonta, trebali biste primijetiti da se završava riječju "serif". To je generično ime porodice fonta. U slučaju da osoba na svom računaru nema grupu ili Times New Roman, sajt bi koristio bilo koji serif font koji bi mogao pronaći. Ovo je poželjno dozvoljavati da se sajt povrati na sve fontove koje želi, jer barem možete reći kakav font ćete koristiti, tako da će ukupni izgled i ton dizajna sajta biti što je moguće neotkriveniji. Da, pretraživač će izabrati font za vas, ali bar vi pružate smjernice kako bi znali koja vrsta fonta bi najbolje funkcionirala u okviru dizajna.

Generičke porodice fontova

Opšte ime fonta dostupno u CSS-u su:

Iako postoje mnoge druge klasifikacije fontova u web dizajnu i tipografiji, uključujući slab-serif, blackletter, display, grunge i još mnogo toga, ove 5 gore navedenih imena generičkih fontova su one koje biste koristili u font-stack-u u CSS-u. Koje su razlike u ovim klasifikacijama fontova? Hajde da pogledamo!

Kursivni fontovi često sadrže tanke, ukrasne slovne oblike koji imaju za cilj ponoviti fensi rukom pisani tekst. Ovi fontovi zbog svojih tankih, cvetnih slova nisu prikladni za veliki blok sadržaja poput kopiranja tela. Cursive fontovi se uglavnom koriste za naslove i kraće tekstualne potrebe koje se mogu prikazati u većim veličinama fontova.

Fantazijski fontovi su donekle ludi fontovi koji zaista ne spadaju u druge kategorije. Fontovi koji replikuju poznate logotipe, poput slova iz Harry Potter-a ili Back to the Future filmova, spadaju u ovu kategoriju. Još jednom, ovi fontovi nisu odgovarajući za sadržaj tela, jer su često tako stilizovani da je čitanje duže odlomaka teksta napisanih u ovim fontovima teško učiniti.

Monospace fontovi su one u kojima su sve veličine slova jednako veličine i raspoređene, kao što biste našli na starim pisaćim mašinama. Za razliku od drugih fontova koji imaju varijabilne širine za slova u zavisnosti od njihove veličine (na primjer, kapital "W" bi zauzeo mnogo više prostora nego mala slova "i"), monospace fontovi su fiksne širine za sve znakove. Ovi fontovi se često koriste kada se kôd prikazuje na stranici jer izgledaju izrazito drugačije od drugog teksta na ovoj stranici.

Serif fontovi su jedna od najpopularnijih klasifikacija. To su fontovi koji imaju malo dodatnih ligatura na slovima. Ti dodatni komadi se zovu "serifovi". Zajednički serif fontovi su Gruzija i Times New Roman. Serif fontovi se mogu koristiti za veliki tekst kao što je naslov, kao i dugački tekstovi i kopije tela.

Sans-serif je konačna klasifikacija koju ćemo pogledati. To su fontovi koji nemaju navedene ligature. Ime znači "bez serifa". Popularne fontove u ovoj kategoriji bi bile Arial ili Helvetica. Slično serifovima, sans-serif fontovi mogu se koristiti jednako dobro u naslovima, kao i sadržini tijela.

Originalni članak Jennifer Krynin. Uredio Jeremy Girard 16.10.17