Lastnosti pisave v CSS določajo družino pisave, velikost, krepkost, slog, posebne tipografske različice in višino vrstice. Z njimi močno vplivamo na berljivost, videz in preglednost besedila na spletni strani.
Pomni: Pri nastavitvah pisave ni pomemben samo videz, ampak tudi berljivost. Zato moramo pri izbiri pisave, velikosti in višine vrstice paziti, da je besedilo jasno in pregledno.
Sodobni CSS prinaša nekaj pomembnih novosti pri delu s pisavami. Med generične družine danes spadajo tudi system-ui, ui-serif, ui-sans-serif, ui-monospace, ui-rounded in math. Pri uteži pisave lahko uporabimo številčne vrednosti od 1 do 1000, pri lastnih pisavah pa se danes pogosto uporablja format woff2. Pomembne so tudi spremenljive pisave, ki omogočajo natančnejši nadzor nad debelino, širino in drugimi lastnostmi.
font-family
Lastnost font-family določa družino pisave. V CSS navadno naštejemo več možnih pisav po prednostnem vrstnem redu. Če prva ni na voljo, brskalnik poskusi z naslednjo. Na koncu se običajno navede še generična družina pisav.
Najpogosteje uporabljene klasične generične družine pisav so:
- serif
- sans-serif
- monospace
- cursive
- fantasy
Sodobni CSS pozna tudi dodatne generične družine, kot so system-ui, ui-serif, ui-sans-serif, ui-monospace, ui-rounded in math.
| Generična pisava | Primer pisave | Opis |
|---|---|---|
| serif | Times New Roman Georgia |
Serifne pisave imajo na koncih potez majhne zaključke. |
| sans-serif | Arial Verdana |
Pisave brez zaključkov, pogosto zelo primerne za prikaz na zaslonu. |
| monospace | Courier New Lucida Console |
Vsi znaki imajo enako širino. |
| cursive | Cursive | Posnemajo rokopis. |
| fantasy | Fantasy | Bolj okrasne pisave, primerne predvsem za posebne poudarke. |
| system-ui | system-ui | Uporabi privzeto sistemsko uporabniško pisavo operacijskega sistema. |
| ui-serif | ui-serif | Serifna pisava, prilagojena uporabniškemu vmesniku. |
| ui-sans-serif | ui-sans-serif | Sans-serif pisava, prilagojena uporabniškemu vmesniku. |
| ui-monospace | ui-monospace | Monospace pisava, prilagojena uporabniškemu vmesniku. |
| ui-rounded | ui-rounded | Pisava z zaobljenimi potezami, namenjena uporabniškemu vmesniku. |
| math | math | Pisava, primerna za prikaz matematičnih simbolov in izrazov. |
Razlika med pisavama Sans-serif in Serif
Pomni: Pri lastnosti font-family je priporočljivo, da na koncu vedno navedemo tudi generično družino pisav. Tako ima brskalnik ustrezno rezervno možnost, če prvih pisav ni na voljo.
Za prikaz besedila na zaslonu se pogosto uporabljajo pisave iz družine sans-serif, ker so običajno zelo dobro berljive. Za programsko kodo se pogosto uporabljajo pisave iz družine monospace.
Pisava monospace ima vse znake enake širine
Pisavo določimo tako, da v CSS nastavimo lastnost font-family za posamezni element:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}Pri tem smo določili, da brskalnik najprej poskusi uporabiti Verdana. Če ta ni na voljo, poskusi z Arial, nato s Helvetica, na koncu pa s poljubno pisavo iz družine sans-serif.
Pri pisavah, katerih ime je sestavljeno iz več besed, uporabimo narekovaje:
body {
font-family: "Times New Roman", Times, serif;
}Katero pisavo uporabiti?
- za prikaz na zaslonu so pogosto zelo primerne pisave iz družine sans-serif
- družina serif se pogosto uporablja v tiskovinah in daljših besedilih
- monospace pisave se pogosto uporabljajo za prikaz izvorne kode
- system-ui je dobra izbira, kadar želimo naraven videz uporabniškega vmesnika na posameznem sistemu
- pisave iz družin fantasy in cursive uporabljamo previdno, večinoma za posebne poudarke
font-size
Lastnost font-size določa velikost pisave. Velikost lahko določimo s ključnimi besedami, absolutnimi vrednostmi ali relativnimi enotami.
Relativne enote, kot so em, rem in %, so pogosto primernejše za odzivno in dostopnejšo postavitev. V sodobni praksi je rem zelo pogosta izbira, ker se navezuje na osnovno velikost korenskega elementa.
Pozor: Premajhna velikost pisave hitro zmanjša berljivost besedila. Pri običajnem besedilu je priporočljivo, da velikost ostane dovolj velika za udobno branje.
| Vrednost | Opis |
|---|---|
| medium | Srednja velikost pisave, to je privzeta vrednost |
| xx-small | Zelo zelo majhna pisava |
| x-small | Zelo majhna pisava |
| small | Majhna pisava |
| large | Velika pisava |
| x-large | Zelo velika pisava |
| xx-large | Zelo zelo velika pisava |
| smaller | Manjša glede na velikost nadrejenega elementa |
| larger | Večja glede na velikost nadrejenega elementa |
| length | Velikost pisave, na primer v px, pt, em, rem |
| % | Velikost pisave v % glede na velikost nadrejenega elementa |
| initial | Ta vrednost naj bo privzeta |
| inherit | Vrednost podeduje od nadrejenega elementa |
Primer absolutnega določanja velikosti pisave:
<h1>Glavni naslov</h1>
<h2>Podnaslov</h2>
<p class="prvi">To je prvi odstavek.</p>
<p class="drugi">To je drugi odstavek.</p>
<p class="tretji">To je tretji odstavek.</p>
<p class="cetrti">To je četrti odstavek.</p>h1 { font-size: 1.5cm; }
h2 { font-size: 12mm; }
.prvi { font-size: 9mm; }
.drugi { font-size: 7mm; }
.tretji { font-size: 0.2in; }
.cetrti { font-size: 0.1in; }Glavni naslov
Podnaslov
To je prvi odstavek.
To je drugi odstavek.
To je tretji odstavek.
To je četrti odstavek.
Primer relativnega določanja velikosti pisave:
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
.prvi { font-size: 1rem; }
.drugi { font-size: 0.8rem; }
.tretji { font-size: 1em; }
.cetrti { font-size: 80%; }Glavni naslov
Podnaslov
To je prvi odstavek.
To je drugi odstavek.
To je tretji odstavek.
To je četrti odstavek.
h1 { font-size: 200%; }
h2 { font-size: 150%; }
.prvi { font-size: 100%; }
.drugi { font-size: 80%; }
.tretji { font-size: 50%; }
.cetrti { font-size: 30%; }Glavni naslov
Podnaslov
To je prvi odstavek.
To je drugi odstavek.
To je tretji odstavek.
To je četrti odstavek.
font-weight
Lastnost font-weight določa krepkost pisave.
Najpogosteje uporabljamo vrednosti normal in bold. Pri sodobnih pisavah, predvsem pri spremenljivih pisavah, pa lahko uporabimo tudi številčne vrednosti od 1 do 1000. Pri ne-spremenljivih pisavah brskalnik poišče najbližjo razpoložljivo utež.
| Vrednost | Pomen |
|---|---|
| normal | običajna krepkost |
| bold | krepko |
| bolder | bolj krepko glede na nadrejeni element |
| lighter | manj krepko glede na nadrejeni element |
| 1–1000 | številčne stopnje krepkosti; 400 običajno ustreza normal, 700 pa bold |
| initial | ta vrednost naj bo privzeta |
| inherit | vrednost podeduje od nadrejenega elementa |
Pomni: Pri številčnih vrednostih lastnosti font-weight običajno vrednost 400 ustreza običajni pisavi, vrednost 700 pa krepki pisavi.
Primer:
<p>
<span style="font-weight:normal">običajno, </span>
<span style="font-weight:bold">krepko, </span>
<span style="font-weight:lighter">manj krepko, </span>
<span style="font-weight:bolder">bolj krepko, </span><br />
<span style="font-weight:100">100, </span>
<span style="font-weight:200">200, </span>
<span style="font-weight:300">300, </span>
<span style="font-weight:400">400, </span>
<span style="font-weight:500">500, </span>
<span style="font-weight:600">600, </span>
<span style="font-weight:700">700, </span>
<span style="font-weight:800">800, </span>
<span style="font-weight:900">900, </span>
</p>
običajno,
krepko,
manj krepko,
bolj krepko,
100,
200,
300,
400,
500,
600,
700,
800,
900,
font-style
Lastnost font-style določa slog pisave.
| Vrednost | Pomen |
|---|---|
| normal | običajno besedilo |
| italic | ležeče besedilo |
| oblique | poševno besedilo |
| initial | ta vrednost naj bo privzeta |
| inherit | vrednost podeduje od nadrejenega elementa |
Primer:
<p class="normal">To je običajno besedilo oblike "normal".</p>
<p class="italic">To je ležeče besedilo oblike "italic".</p>
<p class="oblique">To je poševno besedilo oblike "oblique".</p>.normal { font-style: normal; }
.italic { font-style: italic; }
.oblique { font-style: oblique; }To je običajno besedilo oblike "normal".
To je ležeče besedilo oblike "italic".
To je poševno besedilo oblike "oblique".
Pri nekaterih pisavah oblique in italic nista povsem enaka: italic lahko uporabi posebej oblikovane ležeče znake, oblique pa navadno poševno različico osnovne oblike.
Pozor: Vse pisave ne vsebujejo posebej oblikovane ležeče različice. V takem primeru lahko brskalnik poševni videz samo približa.
font-variant
Lastnost font-variant določa posebne tipografske različice pisave. V preprostejših primerih se pogosto uporablja vrednost small-caps, sodobni CSS pa pozna tudi podrobnejše lastnosti, kot so font-variant-caps, font-variant-ligatures in font-variant-numeric.
| Vrednost | Pomen |
|---|---|
| normal | običajno besedilo |
| small-caps | male velike črke |
| initial | ta vrednost naj bo privzeta |
| inherit | vrednost podeduje od nadrejenega elementa |
<p class="normal">To so običajne črke "normal".</p>
<p class="small-caps">To so male velike črke "small-caps".</p>
<p class="normal">TO SO OBIČAJNE VELIKE ČRKE "normal".</p>.normal { font-variant: normal; }
.small-caps { font-variant: small-caps; }To so običajne črke "normal".
To so male velike črke "small-caps".
TO SO OBIČAJNE VELIKE ČRKE "normal".
Če pisava podpira napredne OpenType možnosti, lahko z dodatnimi lastnostmi nadzorujemo tudi ligature, številke, ulomke in druge tipografske podrobnosti.
line-height
Lastnost line-height določa višino vrstice besedila.
Brez-enotna vrednost je pogosto najbolj priporočljiva, ker se deduje bolj predvidljivo kot vrednosti z enotami ali odstotki. Pri običajnem besedilu je za dobro berljivost pogosto primerna vrednost okoli 1.4 do 1.6, odvisno od pisave in postavitve.
Pomni: Pri običajnem besedilu je primerna višina vrstice pomembna za dobro berljivost. Premajhna višina vrstice lahko naredi besedilo stisnjeno in manj pregledno.
| Vrednost | Pomen |
|---|---|
| normal | običajna višina vrstice |
| število | brez-enotna vrednost, ki določa večkratnik velikosti pisave |
| dolžina | fiksna višina vrstice, na primer v px, em ali pt |
| % | višina vrstice v % glede na velikost pisave |
| initial | ta vrednost naj bo privzeta |
| inherit | vrednost podeduje od nadrejenega elementa |
Primer določitve višine vrstice:
<p class="normal">Ukaz <em>line-height</em> določa višino vrstice besedila.<br />Ta odstavek prikazuje višino vrstice,<br />ko ima lastnost <em>line-height</em> vrednost <strong><em>normal</em></strong>.</p>
<p class="visina_2">Ukaz <em>line-height</em> določa višino vrstice besedila.<br />Ta odstavek prikazuje višino vrstice,<br />ko ima lastnost <em>line-height</em> vrednost <strong><em>2</em></strong>.</p>
<p class="visina_50px">Ukaz <em>line-height</em> določa višino vrstice besedila.<br />Ta odstavek prikazuje višino vrstice,<br />ko ima lastnost <em>line-height</em> vrednost <strong><em>50px</em></strong>.</p>
<p class="visina_130">Ukaz <em>line-height</em> določa višino vrstice besedila.<br />Ta odstavek prikazuje višino vrstice,<br />ko ima lastnost <em>line-height</em> vrednost <strong><em>130%</em></strong>.</p>
<p class="visina_15em">Ukaz <em>line-height</em> določa višino vrstice besedila.<br />Ta odstavek prikazuje višino vrstice,<br />ko ima lastnost <em>line-height</em> vrednost <strong><em>1.5em</em></strong>.</p>.normal { line-height: normal; }
.visina_2 { line-height: 2; }
.visina_50px { line-height: 50px; }
.visina_130 { line-height: 130%; }
.visina_15em { line-height: 1.5em; }Ukaz line-height določa višino vrstice besedila.
Ta odstavek prikazuje višino vrstice,
ko ima lastnost line-height vrednost normal.
Ukaz line-height določa višino vrstice besedila.
Ta odstavek prikazuje višino vrstice,
ko ima lastnost line-height vrednost 2.
Ukaz line-height določa višino vrstice besedila.
Ta odstavek prikazuje višino vrstice,
ko ima lastnost line-height vrednost 50px.
Ukaz line-height določa višino vrstice besedila.
Ta odstavek prikazuje višino vrstice,
ko ima lastnost line-height vrednost 130%.
Ukaz line-height določa višino vrstice besedila.
Ta odstavek prikazuje višino vrstice,
ko ima lastnost line-height vrednost 1.5em.
@font-face
Pravilo @font-face omogoča uporabo lastnih pisav. Pisavo lahko naložimo z oddaljenega strežnika ali pa uporabimo lokalno nameščeno pisavo. V sodobni praksi se pogosto uporablja format woff2, pogosto pa dodamo tudi font-display za nadzor prikaza med nalaganjem ter unicode-range za učinkovitejšo dostavo podnaborov znakov.
@font-face {
font-family: "Delicious";
src:
local("Delicious"),
url("fonts/Delicious.woff2") format("woff2");
font-display: swap;
}p {
font-family: "Delicious", Helvetica, Arial, sans-serif;
}Če uporabljamo več različic iste pisave, navadno pripravimo več pravil @font-face, na primer za običajno, ležečo in krepko različico.
Pozor: Pri lastnih pisavah moramo paziti, da ima pravilo @font-face pravilno nastavljen vir pisave. Brez veljavnega zapisa src pravilo ni uporabno.
font
Lastnost font uporabljamo kot bližnjico za nastavitev več lastnosti pisave hkrati.
Za vrednost lastnosti font naštejemo vrednosti posameznih lastnosti v predpisanem vrstnem redu. Najprej lahko navedemo vrednosti za font-style, font-variant, font-weight in font-stretch. Nato moramo navesti vrednost font-size, po potrebi tudi line-height (ločimo ju z znakom /), na koncu pa še font-family.
p {
font: italic small-caps 700 16px/1.5 Arial, sans-serif;
}Pri bližnjici font je pomembno, da sta font-size in font-family vedno navedena, sicer zapis ni veljaven.
Pomni: Bližnjica font omogoča krajši zapis, vendar moramo pri njej paziti na pravilen vrstni red vrednosti.