CSS Pisave (ang. Fonts)
CSS pisave določajo krepkost, velikost in slog besedila. Zato je izbira prave pisave močno vpliva na to, kako bralci doživljajo spletno mesto. Prva pisava lahko ustvari močno identiteto naše spletne strani (lahko je to trgovina, predstavitev podjetja, blog, its.). Pomembna je uporaba pisave, ki je berljiva, ker pisava doda vrednost našemu besedilu. Pomembno je tudi izbrati pravilno barvo in velikost besedila za pisavo. Na spletu ni priporočljivo uporabljati več različnih pisav hkrati; lahko uporabimo eno pisavo za glave in drugo za odstavke. Zakaj toliko pisav? Če brskalnik ne podpira ena pisave, poskusi naslednjo in tako naprej, kar je danes v bistvu nemogoče.
- Serif pisave imajo na robovih vsake črke majhno črto, in s tem ustvarijo občutek formalnosti in elegance.
- Sans-serif pisave imajo čiste črte in ustvarijo modern in minimalističen videz.
- Monospace pisave, kjer imajo črke enako fiksno širino in zato ustvarijo mehak videz.
- Cursive pisave posnemajo človeško pisavo.
- Fantasy pisave so dekorativne pisave.
| Generična družina pisav | Slog | Primer |
|---|---|---|
| Cursive |
style="font-family: 'Lucida Handwriting', cursive" style="font-family: 'Brush Script MT', cursive" |
Lucida Handwriting Brush Script MT |
| Fantasy |
style="font-family: 'Papyrus', fantasy" style="font-family: 'Copperplate Gothic Light', fantasy" |
Papyrus Copperplate Gothic Light |
| Monospace |
style="font-family: 'Courier New', monospace" style="font-family: 'Lucida Console', monospace" |
Courier New Lucida Console |
| Sans-serif |
style="font-family: 'Helvetica', sans-serif" style="font-family: 'Verdana', sans-serif" |
Helvetica Verdana |
| Serif |
style="font-family: 'Georgia', serif" style="font-family: 'Times New Roman', serif" |
Georgia Times New Roman |
V spletu je priporočljivo uporabljati standardno velikost, lahko se spremeni za kakšen primer (naslovi iste pisave in odstavki drugačne), seveda, ko uporabimo hover bomo s tem zamenjali tako barvo kot pisavo, samo spreminjanje velikosti ni praksa na spletu. S pomočjo atributa font-size lahko spreminjamo velikost pisave, z atributom font-style spremenimo slog pisave. Pisavo lahko tudi obarvamo, kot tudi ozadje besedila, s pomočjo atributov color: imeBarve za besedilo, in background-color: imeBarve za ozadje. Tudi atribut hover je dober, saj, ko gremo z miškinim kazalcem čez besedilo, se bo to besedilo spremenilo. Font Variant določa v kakšni pisavi naj bo besedilo prikazano, in velikost črk kot so male ali večje. Pri izbiri majhnih črk se vse male črke pretvorijo v velike, vendar se velike črke pojavijo v manjši velikosti. Če želimo, da so tudi velike črke povečane uporabimo font-variant: small-caps. Za vse male/velike črka pa uporabimo font-variant: all-small-caps.
| Družine pisav (font-family) | Podajo pisavo za element. | Glej primer |
|---|---|---|
| Nadomestne pisave (fallback fonts) | Spletno varne pisave so pisave, ki so univerzalno nameščene v vseh brskalnikih in napravah. | Glej primer |
| Slog pisav (font-style) | Lastnost font-style se večinoma uporablja za določanje poševnega besedila. | Glej primer |
| Debelina, teža pisav (font-weight) | Lastnost font-weight določi debelino/težo pisave. | Glej primer |
| Različica pisave (font-variant) | Lastnost font-variant določa, ali naj bo besedilo prikazano v pisavi z malimi ali velikimi črkami. | Glej primer |
| Velikost pisave (font-size) | Lastnost font-size nastavi velikost besedila. | Glej primer |
| Google Fonts | Če ne želite uporabljati standardnih pisav, lahko obiščemo Google Fonts, kjer lahko izbiramo med ogromno zbirko pisav. | Glej primer |
