A font-variant tulajdonságot arra használjuk, hogy a “normál” és a kiskapitális betűszedési mód között váltsunk. Három különböző érték egyikét veheti fel. Az első lehetséges érték az inherit, ami az alapértelmezett beállítás. Hatására az elem a szülő stílusát veszi át. Ha például van egy bekezdésünk (<p>) ami egy szakasz (<div>) része, és a szakaszra vonatkozóan beállítjuk a font-variant tulajdonságot, akkor ez a tulajdonság átöröklődik a bekezdésre, amennyiben a bekezdés font-variant tulajdonságát inherit állapotban hagytuk, és nem adtunk neki explicit más értéket. A másik két lehetséges érték a normal és a small-caps. A normal nem igényel sok magyarázatot, hatása annyi, hogy a vonatkozó szöveg nem kiskapitálisokkal lesz szedve. A small-caps hatására viszont azzal lesz. Személyes véleményem, hogy rövid szövegrészek kiemelésére remekül használható , de ne használjuk hosszabb szövegekhez, mert az így szedett szöveg olvasása fárasztóbb. Példa:

p {
    font-variant: small-caps;
}

A line-height tulajdonság a sormagasság beállítására való. Ez egy olyan tulajdonság, amelyhez szinte mindig hozzá kell nyúlni, ha weboldalt tervezünk. Az alapbeállítás ugyanis normál (egyszeres) sortávolságot eredményez, amit ha változatlanul hagyunk, nagyon zsúfolt hatást kelt. A vonatkozó szakirodalom szerint az ideális sortávolság – többsoros szövegek esetén – a 1.5 sor. Ezt a legegyszerűbben a következő módon állíthatjuk be:

p {
    line-height: 1.5em;
}

Egyébként ennek a tulajdonságnak van még egy nem magától értetődő, de nagyon hasznos felhasználási módja, mégpedig a függőlegesen középre való pozicionálás. A dolog csak egysoros szövegeknél működik, de tekintettel arra, hogy milyen nehéz a CSS segítségével függőlegesen középre pozicionálni, sokszor ez is aranyat ér. A példa erre a következő:

div#main {
    height: 100px;
    background-color: #999;
}

#main p {
    line-height: 100px;
}

Ezzel a trükkel a legfeljebb 1 sor hosszú szövegünket pont a #main nevű szakaszunk középvonalára tudjuk pozicionálni, mert az az egy sor teljesen kitölti a rendelkezésre álló helyet. Ettől a betű nem lesz nagyobb, viszont a szakasz tetejétől és aljától egyenlő távolságot tart. A line-height: 100%; nem működne, ugyanis a 100% ekkor a sor alapértelmezett magasságát jelentené, nem pedig a rendelkezésre álló területet.

A text-transform tulajdonság segítségével felülbírálhatjuk a szöveg eredeti kapitalizációját. A lowercase beállítás segítségével minden szöveg, amire a tulajdonság vonatkozik kisbetűs lesz, függetlenül attól, hogy egyébként milyen volna. Ugyanígy, az uppercase hatására nagybetűs szöveget kapunk. Ha a capitalize beállítást választjuk, akkor pedig minden szó első betűje nagy lesz, a többi pedig változatlan marad. Van még két további beállítás is: a none hatására nem változtat az eredeti szövegen, az inherit pedig átveszi a szülő elem beállítását. Példa:

p {
    text-transform: uppercase;
}

A text-decoration tulajdonság az eszköz néhány további stilisztikai hatás megvalósítására. Ezek közül szinte csak a line-through tulajdonságnak van gyakorlati haszna, hatására az adott szöveget áthúzásra kerül. Példa:

p {
    text-decoration: line-through;
}

A text-decoration többi beállítására ritkán lesz szükségünk, de azért felsorolom:

• blink: Emlékeztek még a ‘90-es évek weboldalainak villogó szövegeire? Ezzel a beállítással lehet bekapcsolni a villogást. Merénylet a közízlés ellen, ezért még példát sem mutatok rá.
• inherit: Mint fent.
• none: Mint fent.
• overline: felülvonás
• underline: alulvonás. Ennek a használata nem javasolt. Az alulvonás mint kiemelés ugyanis az írógépek korszakából való, a weben ennek a megfelelője a dőlt betűkkel való szedés. Az alulvonás ugyanis a linkek számára van fenntartva, és megzavarja az oldal látogatóját, ha az aláhúzott szó nem hiperhivatkozást jelöl.

Tipográfiai körutunk utolsó állomása a color tulajdonság, amely számára hexadecimális kódban kell megadnunk a választott színt (bár néhány alapvető színt kiírva is megért). Bármilyen színt beállíthatunk, a web-biztos (web-safe) színek világa már rég a múlté. Gyakoroljunk azért önmérsékletet: ne állítsunk be hosszabb szövegrészek számára olyan színt, amit fárasztó olvasni, és ügyeljünk a háttér és az előtér közti megfelelő kontrasztra. Alapdolognak tűnik, de sajnos még mindig nagyon sok olyan weboldal van, ahol fekete alapon szürkével olvastatnak velünk hosszabb szövegeket, a végére pedig kifolyik a szemünk. A színekkel kapcsolatban még annyit, hogy sok webes szolgáltatás segít a megfelelő szín kiválasztásában. Van olyan, ahol kiválaszthatunk 1-2 színt, és megmondja, hogy mit érdemes mellé választani, hogy harmonizáljon (ilyen például a ColorSchemeDesigner); van ahol komplett paletták közül választhatunk (pl. a Kuler-en); és van ahová feltölthetünk egy képet (ami mondjuk a weboldalunk fő képe), és az alapján ad tanácsot, hogy milyen színeket használjunk, ami a képpel harmonizál. Utóbbira példa a ColorSuckr. Ha nem vagyunk biztosak színválasztásunkban, ne féljünk használni ezeket a szolgáltatásokat. Sokkal jobb megoldás, mint elindulni egy ízléstelen vagy szemfárasztó weboldallal, és csodálkozni, hogy nem özönlenek a látogatók. Végül a példa a color tulajdonsághoz:

p {
    color: #555555;
}

A legfontosabb tulajdonság ebben a kategóriában a font-family. Segítségével megadhatunk egy sor betűkészletet, amelyek közül az első olyan lesz felhasználva, amelyik a felhasználó gépén rendelkezésre áll. Példa:

p {
    font-family: Arial, Helvetica, sans-serif;
}

Ezzel a beállítással azt érjük el, hogy a böngésző előbb megpróbálja Arial betűtípussal szedni a szöveget, majd ha nincs a gépen Arial, akkor megpróbálja a Helvetica-t, és ha az sincs, akkor a rendszer alapértelmezett sans-serif, azaz talapzat nélküli betűtípusát fogja használni. A helyes gyakorlat egyébként az, ha a speciálistól haladunk az általános felé a betűtípus meghatározásakor. Elsőnek nyugodtan választhatjuk azt a típust, amivel igazán úgy néz ki a szövegünk, ahogy szeretnénk. Másodikként válasszunk egy elterjedtebbet, ami stílusában hasonló. Harmadikként pedig adjunk meg egy kategóriát (serif, sans-serif, vagy monospace), arra az esetre, ha még a gyakoribb típus sem elérhető valamiért.

A font-size tulajdonság a betűméret beállítására való. Rengeteg különböző mértékegységben megadhatjuk, de igazából pixelben, em-ben vagy esetleg pt-ben érdemes. Példa:

p {
    font-size: 12px;
}

A font-weight tulajdonság segítségével állíthatjuk félkövér stílusúra a szöveget. Személy szerint jobban szeretem erre a font-weight tulajdonság helyett a <strong> HTML tag-et használni. Hogy miért? A probléma elvi síkú. Amikor egy szövegből valamit ki akarunk emelni, az általában szemantikai és nem stilisztikai kérdés. A szemantika reprezentálása a HTML dolga, a CSS-t a prezentációra használjuk. Ráadásul keresőoptimalizálás szempontjából is jobb a <strong> ugyanis a keresőmotorok nagyobb relatív súllyal kezelik az így jelölt tartalmat. Végül, de nem utolsó sorban, a <strong> tag-nek is adhatunk CSS stílust, ha tehát úgy gondoljuk, hogy a vastagítás helyett ezentúl más eszközt használunk a kiemeléshez (pl. alászínezés), akkor egyetlen CSS sorral elegánsan meg is oldhatjuk a váltást az egész websiteon. Azért természetesen olykor szükséges a font-weight is, úgyhogy beszéljünk róla egy keveset. Az általa felvehető lehetséges értékek 100-tól 900-ig terjednek, valamint a bold, bolder, normal és a lighter megengedett. Ebből a hétköznapokban egyedül a normal és a bold fontos, ugyanis a legtöbb böngésző nem valósítja meg a többit. Illetve megvalósítja, csak megfelelteti őket a normal-nak vagy a bold-nak, így használatukkal nem érünk el valódi különbséget. Példa:

p {
    font-weight: bold;
}

A következő részben megismerkedünk a font-variant, a line-height, a text-transform, a text-decoration és a color attribútumokkal.