Tüpograafilisel kujundusel on veebisaidi kujundamisel oluline roll. Hästi paigutatud ja vormindatud tekstisisu aitab saidil edukam olla, luues lugemiskogemuse, mis on ühtaegu nauditav ja hõlpsasti tarbitav. Osa teie jõupingutustest tüübiga töötamisel on kujunduse jaoks õigete fontide valimine ja CSS-i abil nende fontide ja fondistiilide lisamine lehe kuva. Selleks kasutatakse nn fondivirna.
Fontide korstnad
Kui sa määrake font Veebilehel kasutamiseks on hea tava lisada ka varuvalikud juhuks, kui teie fondivalikut ei leita. Need varuvõimalused on esitatud fondivirna. Kui brauser ei leia virnas esimest kirjatüüpi, liigub see järgmisele. Ta jätkab seda protsessi seni, kuni leiab fondi, mida saab kasutada, või on valikud otsas (sel juhul valib ta lihtsalt soovitud süsteemifondi). Siin on näide selle kohta, kuidas font-virn CSS-is välja näeb, kui see rakendatakse elemendile "body":
keha {
font-perekond: Georgia, "Times New Roman", serif;
}
Kõigepealt ilmub font Georgia, seega vaikimisi kasutab leht seda, kuid kui see font pole mingil põhjusel saadaval, langeb leht Times New Romani juurde.
Lisa Times New Roman topelt jutumärkides, sest see on mitmesõnaline nimi. Ühesõnalised fondinimed, näiteks Georgia või Arial, ei vaja jutumärke, kuid sisseehitatud tühikutega mitmesõnaline fondinimi vajab neid, nii et brauser teab, et kõik need sõnad koosnevad fondi nimest.
Fondivirna lõpeb sõnaga serif. See on üldine font-perekonnanimi. Ebatõenäolisel juhul, kui inimesel pole Gruusiat ega Times New Roman nende arvutis kasutaks sait mis tahes serif-fondi, mida see leidis. Brauser valib teile fondi, kuid vähemalt pakute juhiseid, et see teaks, milline font kujunduses kõige paremini töötaks.
Üldised fondipered
CSS-is saadaval on üldine fondi nimi:
- kursiivne
- fantaasia
- monospace
- serif
- sans-serif
Kuigi veebikujunduses ja tüpograafias on saadaval palju muid fondiklassifikatsioone, sealhulgas plaat-serif, blackletter, display, grunge ja muu - need viis üldist fondinime on need, mida kasutaksite fondivirnas CSS-is.
- Kursiivsed fondid - sisaldavad sageli õhukeseid, ehitud kirjavorme, mis on mõeldud väljamõeldud käsitsi kirjutatud teksti kordamiseks. Need fondid ei ole nende õhukeste ja lilleliste tähtede tõttu sobivad suure sisuploki jaoks, nagu kehakoopia. Kursiivfonte kasutatakse tavaliselt pealkirjade jaoks ja lühemate tekstivajaduste jaoks, mida saab kuvada suuremate fondisuurustega.
- Fantaasia fondid - on mõnevõrra pöörased fondid, mis tegelikult ei kuulu ühessegi muusse kategooriasse. Fondid, mis kordavad tuntud logosid, näiteks tähe vormid Harry Potter või Tagasi tulevikku kuuluvad sellesse kategooriasse. Need fondid ei sobi kehasisule, kuna need on sageli nii stiliseeritud, et nende fontidega kirjutatud pikemate tekstilõikude lugemine on liiga raske.
- Monospace-fondid - kasutage võrdse suurusega ja üksteise järel asuvaid kirjavorme, nagu oleksite leidnud vanalt kirjutusmasinal. Erinevalt teistest fontidest, mille tähtede laius oleneb nende suurusest (näiteks suurtäht) W võtab palju rohkem ruumi kui väiketäht i), kasutavad ühemahulised fondid kõigi tähemärkide jaoks fikseeritud laiust. Neid fonte kasutatakse sageli koodide lugemiseks, kuna need näevad sellel lehe muul tekstil selgelt välja.
- Serif-fondid - kasutage kirjaplankidel vähe lisaligatuuri. Neid lisatükke nimetatakse serifid. Levinumad serififondid on Georgia ja Times New Roman. Seerififondid sobivad suurepäraselt nii suure teksti jaoks nagu pealkiri, kui ka pikkade teksti- ja tekstikoopiate jaoks.
- Sans-seriffondid - neil pole ligatuure. Nimi tähendab ilma serifideta. Selle kategooria populaarsete fontide hulka kuuluvad Arial või Helvetica. Sarnaselt serifidega toimivad sans-serif fondid nii pealkirjade kui ka keha sisu osas võrdselt hästi, ehkki mõned eksperdid eelistavad, et suured tekstiplokid väldiksid sans-serif-fonte, sest neid on raskem lugeda väikesel hetkel suurused.