A betűk mérete

A font-size tulajdonság

A betűk méretezésére a font-size tulajdonság szolgál. Lehetséges értékei:

Érték Leírás
(hossz): a fontméret abszolút megadása
(százalék): a fontméret relatív megadása
xx-small
x-small
small
medium
large
x-large
xx-large:		 Növekvő skálát határoznak meg, ahol a szorzó 1,2.
larger: Megnöveli a betűméretet 1,2-szeresére. Nem csak a fenti skála végső értékéig használható, hanem elméletileg tetszőleges nagyítást tesz lehetővé
smaller: Csökkenti a fontméretet 20%-kal

A CSS egyaránt lehetőséget ad a hosszúságértékek abszolút és relatív módon történő megadására.

Abszolút értékadáskor valamilyen mértékegységben határozzuk meg a szükséges méretet (jelen esetben a font méretét), relatív értékek használatakor pedig egy másik hosszúságegységhez viszonyítva. A lehetséges abszolút mértékegységek a következők:

• in: hüvelyk (inch) = 2,54 cm
• cm: centiméter
• mm: milliméter
• pt: pont = 1/72 hüvelyk
• pc: pica = 12 pont

A pont a nyomdászatban használatos mértékegység.

A következő definíciók azonos betűméretet eredményeznek:
p {font-size: 4.2mm}
p {font-size: 12pt}
p {font-size: 1pc}

A relatív mértékegységek az alábiak lehetnek:
• em: az aktuális font betűmagassága
• ex: az aktuális font kisbetűinek magassága
• px: pixel, a megjelenítő eszköz képpontja

Az em (vagy M) használata a római korból származik, ahol a feliratok M betűje egy négyzetbe rajzolható volt, vagyis a szélessége megegyezett a magasságával – és a betűkészlet magasságával is, hiszen a rómaiak felirataikon nem használtak kisbetűt, amelyek alul vagy felül "kilóghattak" volna a sorból. A betűmagasságot azóta is hagyományosan em-nek nevezik, bár most már a kisbetűk lelógó betűszárától a felnyúló betűszárakig tartó teljes magasságot jelöli, amely így már nem egyezik meg az M szélességével. Az ex (azaz x-) távolság elméletileg a kisbetűk alapvonaltól mért magassága. A gyakorlatban ez a lapos tetejű betűkre vonatkozik (mint pl.a névadó x), a kerek betűk ugyanis optikai korrekciót tartalmaznak, vagyis kicsit magasabbak ennél.
Normál (12-14 pontos) betűméret esetén nem célszerű az x-magasságot szövegrészek méretezésére használni, hiszen pl. egy 12 pontos Times New Roman font x betűje kb. 1,9 mm magas, ami 5,5 pont méretű szöveget eredményez – de mivel ez a teljes új betűsáv magassága, a létrejövő kisbetűk 0,9 mm magasak lesznek, vagyis gyakorlatilag olvashatatlanok.
Az alábbi méretek megegyeznek:
H1 {font-size: 1.2em}
H1 {font-size: 120%}

Példa 1 - Betűk méretezésére

A forráskód részlet:

<p style="font-size: 1cm;">
   A szöveg 1 cm magas betűkkel rendelkezik, abszolút megadási forma.
</p>
<p style="font-size: 75%;">
   A normál magasságú betűhöz viszonyítva 75%-os betűméret. A fontméret relatív megadása.</p>

Az eredmény:

A szöveg 1 cm magas betűkkel rendelkezik, abszolút megadási forma.

A normál magasságú betűhöz viszonyítva 75%-os betűméret. A fontméret relatív megadása.

Példa 2 - Betű méret

A forráskód részlet:

<p style="font-size: xx-small;">A <span style="font-size: x-small;"> szöveg </span>span style="font-size: small;"> minden </span>span style="font-size: medium;"> szava </span>span style="font-size: large;"> 20%-kal </span> span style="font-size: x-large;"> egyre </span>span style="font-size: xx-large;"> magasabb.</span></p>

Az eredmény:

A szöveg minden szava 20%-kal egyre magasabb.

Példa 3 - Larger

A forráskód részlet:

<p style="font-size: larger;">1× Larger</p>
<p style="font-size: larger;"><span style="font-size: larger;">2× Larger</span></p>
<p style="font-size: larger;"><span style="font-size: larger;"><span style="font-size: larger;"><span style="font-size: larger;"><span style="font-size: larger;">5× Larger</span></span></span></span></p>

Az eredmény:

1x larger

2x larger

5x larger

A betűméretskálánál az xx-large a legmagasabb érték, ennél nagyobbra nem tudjuk vinni a méretet. A larger használatával korlátlan nagyságig növelhetjük, smaller-rel pedig csökkenthetjük a méretet. Az olvashatóságra azért figyeljünk!

ugrás a lap tetejére