Tipografski dizajn presudno je važan dio uspješnog dizajna web stranica. Stvaranje web stranica s tekstom koji se lako čita i koji izgleda sjajno cilj je svakog profesionalca u web dizajnu. Da biste to postigli, morat ćete biti u mogućnosti postaviti određene fontove koje želite koristiti na svojim web stranicama. Da biste odredili vrstu slova ili fontova u svojim web dokumentima, upotrijebit ćete svojstvo style font-family u vašem CSS.
Najkompliciraniji stil obitelji fontova koji biste mogli koristiti uključivao bi samo jednu obitelj fontova:
p {
obitelj fontova: Arial;
}
Ako ste ovaj stil primijenili na stranicu, svi bi se odlomci prikazali u obitelji fontova "Arial". To je sjajno i budući da je "Arial" ono što je poznato kao "font siguran za web", što znači najviše (ako ne i sve) računala bi to trebala instalirati, možete biti mirni znajući da će se vaša stranica prikazati u predviđenom font.
Pa što se događa ako odabrani font ne možete pronaći? Na primjer, ako na stranici ne upotrebljavate "font siguran za web", što čini korisnički agent ako nema taj font? Oni vrše zamjenu.
To može rezultirati stranicama zabavnoga izgleda. Jednom sam otišao na stranicu na kojoj ju je moje računalo u potpunosti prikazalo u "Wingdings" (set ikona) jer moje računalo nije imalo font koji je programer odredio, a moj je preglednik bez straha odabrao koji će font koristiti kao zamjena. Stranica mi je bila potpuno nečitljiva! Tu dolazi do izražaja hrpa fontova.
Odvojite više obitelji fontova zarezom u slogu fontova
"Stog fontova" popis je fontova koje želite da vaša stranica koristi. Izbor fontova postavili biste prema želji i svaki razdvojili zarezom. Ako preglednik nema prvu obitelj fontova na popisu, pokušat će drugu, a zatim treću i tako dalje dok ne pronađe jedan koji ima u sustavu.
obitelj fontova: Pussycat, Alžir, Broadway;
U gornjem primjeru preglednik će prvo potražiti font "Pussycat", zatim "Alžir" pa "Broadway" ako nije pronađen nijedan drugi font. To vam daje veću šansu da se koristi barem jedan od izabranih fontova. Nije savršen, zbog čega imamo još puno toga što možemo dodati u svoj niz fontova (čitajte dalje!).
Posljednje upotrijebite generičke fontove
Tako možete stvoriti hrpu fontova s popisom fontova, a još uvijek nemate nijedan od njih koji preglednik može pronaći. Ne želite da se vaša stranica prikazuje nečitljivo ako preglednik loše odabere zamjenu. Srećom CSS ima rješenje i za ovo, i zove se generički fontovi.
Uvijek biste trebali završiti svoj popis fontova (čak i ako se radi o popisu jedne obitelji ili samo za web sigurne fontove) generičkim fontom. Pet ih možete koristiti:
- Rukopisni
- Fantazija
- Monospace
- Sans-serif
- Serif
Dva gornja primjera mogu se promijeniti u:
obitelj fontova: Arial, sans-serif;
ili.
obitelj fontova: Pussycat, Alžir, Broadway, fantazija;
Neka su prezimena fontova dvije ili više riječi
Ako je obitelj fontova koju želite koristiti više od jedne riječi, trebali biste je okružiti dvostrukim navodnicima. Iako neki preglednici mogu čitati obitelji fontova bez navodnika, možda će biti problema ako se razmak zgusne ili zanemari.
obitelj fontova: "Times New Roman", serif;
U ovom primjeru možete vidjeti da je naziv fonta "Times New Roman", koji sadrži više riječi, u navodnike. To pregledniku govori da su sve tri ove riječi dio tog naziva fonta, za razliku od tri različita fonta, sva s imenima od jedne riječi.