Tekstin ulkoasu

(font-family) Aloitetaan fontista. Asetetaan pääotsikon fontiksi Verdana:

h1 {
font-family: Verdana, Arial, sans-serif;
}

Säännöissä kannattaa hyödyntää mahdollisuutta lisätä yksi varafontti, mikäli ekaa vaihtoehtoa ei löydy (tässä siis toivotaan Verdanaa, mutta jos käyttäjän koneelta ei sitä löydy, käy myös Arial) ja jos Arialiakaan ei löydy, käy mikä tahansa päätteetön fontti (sans-serif. Pelkkä serif on päätteellinen fontti).

Fontteja, jotka löytyvät melkein koneelta kuin koneelta on vain kymmenkunta ja nekin vaihtelevat Mac/Win koneilla. Nykyään onkin siirrytty käyttämään lähes aina upotettuja fontteja. Kaikkein helpoimmalla pääsee jos löytää Googlen tarjoamista vapaan lähdekoodin fonteista sopivan/sopivat.

Googlen fontit

(ohjeita yms code.google.com/apis/webfonts/) ja itse fontit löytyvät sivulta: https://www.google.com/fonts

Etsi haluamasi fontti, napsauta sen oikeassa reunassa olevaa Quick use painiketta

Aukeaa uusi sivu jolla valitse (mahdolliset) leikkaukset (kursiivia, lihavointeja…) fontista ja kopioi sen jälkeen alempaa sivulta linkki ja sijoita head-osioon sivullasi:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic'
rel='stylesheet' type='text/css'>

seuraavaksi tee opittuun tapaan tyyli haluamillesi tageille

h1 {
font-family: 'Roboto', sans-serif;
}

Jos haluat tehdä jostain toisesta fontista, johon sinulla on oikeudet, webfontin, voit pyöräyttää sen esim Font Squirrelin palvelussa. Jotta selaintuki olisi täydellinen, täytyy fontista tehdä versiot useassa tiedostomuodossa (ttf, otf, woff ja eot). Tiedostot ladataan sen jälkeen palvelimelle ja lisätään sen osoite tyylitiedostoon käyttämällä @font-facea:

@font-face {
font-family: "fonts/Alex Brush Regular";
src: url("AlexBrush-Regular-OTF.otf");
src: url("fonts/HoboStd.ttf"); }

h1 {
font-family: "Alex Brush";
}

Ja käytetään:
<h1>Tässä tekstiä Alex brush fontilla...</h1>.

Fontin koko (font-size)

Koko voidaan määrittää absoluuttisena tai suhteellisena. Absoluuttisia mittayksiköitä ovat mm. pikselit(px) ja pisteet(pt). Nykysuunnittelussa tätä tapaa ei suositella, vaan ollaan siirrytty käyttämään em-mittaa(em) ja prosentteja(%).

Prosentit

Fontin koko suhteessa normaaliin kokoonsa. Normaali on 100%:a, jolloin 50% tekee siitä puolet pienemmän ja 200% kaksi kertaa isomman:

p { font-size: 150%; }

Huomaa, että jos asetat esim h1-tagin kooksi 100%, tulee siitä samankokoista kuin tavallisesta kappaletekstistä.

Em

Em vastaa painopuolella unkin fontin m-kirjaimen leveyttä. Webissä taas voit ajatella, että 0.5 emiä on puolet normaalikoosta ja 3 emiä kolme kertaa normaali koko.

p { font-size: 1.5em; }

Kaikissa selaimissa perusfonttikoko on noin 16 pikseliä. Se on yhtä kuin 100% tai 1 em. Jos asetat aloittaessasi body-tagille fonttikooksi, eli lähtökohdaksi 100%, on sinun helppo suhteuttaa kaikki muut asiat siihen lukuun (haluatko että p-tagi on pienempää, esim 90% ja h1-tagilla merkityt kohdat taas huomattavasti isompia, esim 200%?). Voit myös käyttää emejä ja prosentteja sekaisin. Katso tätä Kyle Schaefferin tekemää havainnollista taulukkoa:

Em-koot joutuu selvittämään laskemalla. Jos 1em = 16px ja haluat asettaa vaikkapa kappaleen kooksi 12 pikseliä, lasketaan se seuraavasti: 12/16 = 0.75, eli kooksi kirjoitetaan 0.75em. Samoin jos kooksi toivotaan 10px, on laskukaava: 10/16 = 0.625  ja 22px:lle: 1.375em (22/16).

Aika moni käyttääkin huonon laskupään takia bodyssa lähtökokona 62.5% (62.5% oletuskoosta 16px),  eli 10px eli 0.625em. Kaikki koot on helppo asettaa koska pikselimitat jaetaan kymmenellä: 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em jne.

Muita tekstin muotoilusääntöjä

p { text-decoration: underline; }
Koristelun muut mahdolliset arvot alleviivauksen lisäksi: strikethrough(yliviivaus), overline(viiva yllä) ja blink(vilkkuva)

font-style: italic
Muut arvot kursivoinnin lisäksi: normal, oblique(kallistus vasemmalle)

font-weight: bold
Muut mahdolliset arvot lihavoinnin lisäksi: numeroina 100-900, missä 900 on todella paksua.

Tekstin tasaus, mahdolliset arvot (neljä ensimmäistä vasen, oikea, keskitys, molempien reunojen tasaus):

text-align: left|right|center|justify|initial|inherit;

Näiden lisäksi tutustu attribuutteihin font-variant (arvolla small-caps), letter-spacing (merkkiväli), word-spacing (sanaväli), text-indent (ensimmäisen rivin sisennys, voi olla negatiivinenkin arvo), vertical-align (pysty-tasaus. Hyödyllinen esim sijoitettaessa tekstiä taulukkosoluun), text-transform (voit muuttaa tekstiä isolla, pienellä ja ekat kirjaimet isolla kirjoitetuksi: uppercase, lowercase, capitalized) ja line-height (rivinväli; siitä harvinainen että mitat ilmoitetaan yleensä ilman yksikköä, esim.  line-height: 2;