Typy písma

Pri zadávaní typov písma (fontov) treba použiť hlavne tie, u ktorých je predpoklad, že ich všetci používatelia budú mať nainštalované, teda najlepšie tie vstavané do najčastejších operačných systémoch. Je 5 rodín písiem:

1. serif

pätkové písma vhodné na všetko, ako Times a Georgia

2. sans-serif

bezpätkové písma viac zaoblené vhodné na všetko, okrem malého textu a kurzívy (šikmé). Sú to napr. Arial, Heletica a Verdana.

3. Monospace

všetky písmená majú rovnakú šírku - Courier. Väčšinou na ukážky kódu.

4. Fantasy

ozdobné písma, možno pre nadpisy, napr. Western.

5. Cursive

kurzívy, teda ručne písané typy, používané zriedka, ako Lucida Handwriting.

V praxi typ písma

Pre požadovaný element sa zadá buď názov fontu, alebo typ rodiny (body 1 až 5).

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

znamená, že v tele bude použité Arial, ak nie je nainštalovaný tak Helvetica, ak ani tá - Verdana, a ak ani jeden, tak klasický prednastavený typ sans-serif. Nie je nutné používať toľko typov, ale je to výhodné.

h1, h2 {fornt-family: Georgia, serif;}

nadpisy 1. a 2. úrovne majú písmo Georgia, alebo serif.

Veľkosť písmen

Môžme použiť jeden z 3 postupov:

1. Absolútne

Zadáme priamo veľkosť v:

22pt

bodoch

11mm / 2cm

milimetroch a centimetroch

1in

palcoch

Výhodnejšie pre obrazovku je použiť pixely a em:

12px

2em

2. Relatívny spôsob

Kľúčové slová sú xx-small, x-small, small, medium, large, x-large, xx-large.

p {font-size: medium;}

znamená, že odstavec bude mať stredne veľké písmo.

! Tento spôsob je relatívny, t.j. treba zadefinovať hlavnú veľkosť prvým spôsobom, najlepšie v elemente body.

3. V percentách

je tiež relatívny, takže nadradený element musí byť nastavený absolútne!

body {font-size: 12px;}

h1 {font-size: 150%;}

nadpis bude o polku väčší, než telo.

Šírka, štýl, farba, zarovnanie, dekorácia a odsadenie textu

1. Šírka

definuje sa pomocou font-weight. Hodnoty sú od 100 (veľmi tenké) po 900 (najtučnejšie). Použiť môžme aj slová normal (400), bold (700).

h1 {font-size: 150%; font-weight: bold;}

h2 {font-size: 130%; font-weight: lighter;}

Ak použijeme bolder alebo lighter, zmení sa písmo oproti predchádzajúcemu (stučnie alebo schudne).

2. Štýl

Pomocou font-style. Hodnoty sú normal, italic (šíkmé).

body {font-size: 12px; font-style: italic;}

3. Farba

Jednoducho slovom color a hodnoty sú farby ľubovoľným spôsobom.

color: black;

4. Zarovnanie textu

pomocou text-align a hodnotami left, center, right, justify (obe strany sú zarovnané).

body {font-size: 12px; font-style: italic; color: black; text-align: center;}

5. Dekorácia

pomocou text-decorate a hodnoty sú:

none

používa sa na odstránenie podčiarknutia odkazov

underline

podčiarknutie

overline

čiara nad text

line-through

prečierknutie

blink

blikajúci text

6. Odsadenie prvého riadku textu

Ak chceme, aby prvý riadok odstavca bol posunutý, urobí to text-indent s hodnotami v pixeloch alebo percentách.

p {text-indent: 45px;}

Varianty písma, výška riadka, medzery medzi písmenami a slovami

1. Prevod textu a varianty písma

Prevod textu je text-transform s hodnotami:

capitalize

prvé písmeno každého slova je veľké

uppercase

všetky písmená veľké

lowercase

všetky písmená malé

none

žiadne

Varianta písma je font-variant a hodnoty sú:

small-caps

kombinácia uppercase a capitalize, všetko veľké a prvé písmená ešte väčšie

normal

je normálne písmo

2. Výška riadka

pomocou line-height s hodnotami v pixeloch, percentách z výšky písma, alebo len číslom - násobkom výšky písma.

<p style="line-height: 2;"> text .... Na viac riadkov. </p>

znamená, že ak text zadefinovaný vyššie bol napr. 12,  vzdialenosť riadkov bude 2x12=24.

<p style="line-height: 80%;"> text .... Na viac riadkov. </p>

znamená, že ak text zadefinovaný vyššie bol napr. 12,  vzdialenosť riadkov bude 80% z 12, takže 10.

3. Medzery medzi písmenami a slovami

Písmená letter-spacing a slová word-spacing. Hodnoty sú pixeloch alebo em.

<p style="letter-spacing: 10px; word-spacing: 2em;"> text .... text. </p>

4. Prvé písmená a riadky textu

Ak chceme, aby prvé písmeno odstavca alebo prvý riadok mal samostatný vzhľad, použijeme :first-letter alebo "first-line.

p:first-line {font-weight: bold; color: #333;}

p:first-letter {font-weight: italic; color: #999;}

týmito 2 riadkami zabezpečíme, že prvé písmená odstavca (p na začiatku riadka) budú šikmé s farbou 999999 a celé prvé riadky (okrem 1. písmena) budú tučné a s farbou 333333.

Písmo súhrnne

Spoločnou vlastnosťou písma je font, takže v skrátenej verzii bubde napr.:

p {font: italic small-caps bold 14/15px Arial, sans-serif;}