Kirjasimen eli fontin ulkoasuun vaikuttavilla määritteillä voidaan määrittää mm. kirjasimen tyyppi, tyyli, kapiteeli, korostus ja koko.

Kirjasintyyppi
Kirjasintyypillä voidaan määrittää haluttu kirjasin.
Kirjasimen kapiteeli
Font-variant attribuutilla voidaan muuttaa kirjasin kapiteelikirjaisimiksi.
Kirjasimen korostus
Font-weight attribuutilla voidaan määrittää tekstille eriasteisia korostuksia.
Kirjasimen tyyli
Font-style attribuutilla voidaan määrittää kirjasin kursivoiduksi, tai vinoksi.
Kirjasimen koko
Font-size attribuutilla voidaan määrittää kirjasimen koko.

Kirjasintyyppi (font-family)

Kirjasintyypillä voidaan määrittää haluttu kirjasin. Kirjasimia voidaan määrittää useampi pilkulla erottamalla. Lisäksi voidaan määrittää kirjasinperhe.

Ensin tulee määrittää kirjasin, jonka haluaa ehdottomasti näkyvän. Ei kuitenkaan ole järkevää määrittää kirjasinta, jonka on esimerkiksi itse ladannut ja asentanut internetistä, sillä se ei näkyisi muilla, ellei heillä ole sitä samaa fonttia koneellaan. Tulisi siis aina käyttää yleisiä kirjasintyyppejä. Jos määritetään useampi kirjasintyyppi, niin selain siirtyy seuraavaan tyyppiin, jos se ei tunnista ensimmäistä. Jos on määritelty kirjasinperhe, niin selain siirtyy käyttämään jotain perheeseen kuuluvaa kirjasinta, jos se ei tunnista yhtäkään määriteltyä kirjasintyyppiä.

Jos kirjasintyypin, tai kirjasinperheen nimessä on välilyöntejä, tulee se laitaa lainausmerkkien sisään.

font-family: Times, "Times New Roman", serif;

Esimerkissä määritimme ensisijaiseksi kirjasintyypiksi "Times" ja toissijaiseksi tyypiksi "Times New Roman". Kolmanneksi määritimme kirjasinperheen "serif".

Kirjasinperheet:

Kirjasimen kapiteeli (font-variant)

Font-variant attribuutilla voidaan muuttaa kirjasin kapiteelikirjaisimiksi, joka tarkoittaa sitä, että kirjaimet ovat isojakirjaimia, mutta pienten kirjainten kokoisia. Mahdollisia arvoja ovat normal (normaali) ja small-caps (kapiteeli).

font-variant:normal;
font-variant:small-caps;
Esimerkki

Tämä teksti on normaalia.

Tämä teksti on kapiteelikirjoitusta.

Kirjasimen korostus (font-weight)

Font-weight attribuutilla voidaan määrittää tekstille eriasteisia korostuksia. Attribuutin arvo voi olla jokin seuraavasta: normal, bold, bolder, lighter, sekä numereenisista arvoista: 100, 200, 300, 400, 500, 600, 700, 800 ja 900.

Arvo "bold" korostaa kirjasimen, "lighter" tekee kirjasimesta hieman heikommin korostetun ja arvo bolder merkitsee hieman heikompaa korostusta, kuin bold. Kaikki selaimet eivät kuitenkaan tue kuin arvoja normal ja bold.

font-weight:normal;
font-weight:bold;
font-weight:bolder;
font-weight:lighter;
Esimerkki

Kirjasimen tyyli (font-style)

Font-style attribuutilla voidaan määrittää kirjasin kursivoiduksi, tai vinoksi. Mahdollisia arvoja ovat normal (normaali), italic (kursivoitu) sekä oblique (vino). Kursivoitu ja vino teksti eivät periaatteessa eroa toisistaan millään tavalla. Useat selaimet näyttävät ne täysin samanlaisena. Arvo "normal" tekee normaalia tekstiä.

font-style:normal;
font-style:italic;
font-style:oblique;
Esimerkki

Tämä teksti on normaalia.

Tämä teksti on kursivoitu.

Tämä teksti on vinoa.

Kirjasimen koko (font-size)

Font-size attribuutilla voidaan määrittää kirjasimen koko. Kirjasinkoko voidaan määrittää sekä absoluuttisesti että suhteellisesti. Kirjasimen koko voidaan määrittää suhteellisilla arvoilla, absoluuttisilla arvoilla, tai pituuksilla.

Absoluuttiset arvot

Mahdollisia absoluuttisia arvoja ovat; xx-small, x-small, small, medium, large, x-large ja xx-large. Jos esimerkiksi laitamme body-elementtiin kirjasimen kooksi 10px ja sen sisällä olevaan div-elementtiin laitamme kirjasimen kooksi arvon "large", niin se muuttaa div-elementin sisällä olevan tekstin vastaamaan noin 15px kokoista tekstiä.

font-size: arvo;
Esimerkiksi
font-size:small;

Suhteelliset arvot

Suhteellisilla arvoilla moidaan määrittää kirjasimen koko joko suuremmaksi tai pienemmäksi suhteessa ylemmän tason elementtiin. Mahdollisia arvoja ovat "larger" ja "smaller".

font-size:smaller;
font-size:larger;
Esimerkki

Tässä elementissä kirjasimen kooksi on valittu "medium".

Tämän tekstin kooksi on valittu arvo "larger".

Pituusarvot

Myös pituuksia käyttämällä voidaan määrittää kirjasimen kooksi joko suhteellisia arvoja tai absoluuttisia arvoja.

Suhteelliset arvot

Suhteellisia arvoja ovat; em, ex, %, px. Arvo "1em" tarkoittaa normaalia kirjasimenkokoa suhteessa ylemmän tason elementtiin. Arvo "1ex" tarkoittaa ylemmän tason elementin pienien kirjaimien kokoa. Arvo "1px" tarkoittaa yhtä kuvapistettä näytöltä. Arvo "10%" tarkoittaa, että kirjasin on kymmenesosan kokoinen ylemmän tason elementin kirjasinkokoon nähden.

font-size:arvo;
Esimerkiksi:
font-size:2em;

Tämä teksti on kokoa 1em. Tämä teksti on kokoa 1.5em

Absoluuttiset arvot

Absoluuttisia arvoja ovat cm, in, mm, pc ja pt. Absoluuttisia arvoja ei suositella käytettäväksi, sillä ne eivät anna kaikilla selaimilla mahdollisuutta muuttaa tekstin kokoa, joka voi hankaloittaa sivujen käytettävyyttä.

font-size:arvo;
Esimerkiksi
font-size:1cm;
Esimerkkejä