Přeskoč navigaci

Zde hledá Jyxo.

Jyxo

CSS a velikost písma

Marek Prokop, vydáno/aktualizováno: 2.4.2001/13.07.2003

Každý tvůrce webových stránek čas od času potřebuje ovlivnit velikost písma. Jak to však udělat správně? To je problém, se kterým někdy bojují i zkušení webmasteři. V následujícím článku se vám pokusím dát alespoň několik základních rad a doporučení.

Při psaní článku jsem hodně čerpal z diskuse, která asi před měsíce proběhla v emailové konferenci Intervalu.cz. Chtěl bych tedy hned v úvodu všem účastníkům této diskuse poděkovat za cenné zkušenosti, náměty a postřehy. Vám ostatním pak tuto konferenci vřele doporučuji jako skvělý zdroj informací a místo, kam se kdykoli můžete uchýlit se svými problémy. Informace o konferenci včetně návodu na přihlášení naleznete na adrese http://www.interval.cz/konference.asp.

A teď již k vlastnímu tématu. Začneme stručnou rekapitulací klasických způsobů ovlivňování velikosti písma v HTML.

  1. Nejprve tu máme universální formátovací tag <font> . Ten je ovšem v HTML 4 potlačen a neměl by tedy být nadále používán. Pokud ho neznáte, buďte rádi a pokud ho znáte a používáte, pokuste se ho zapomenout.

  2. Další možností jsou tagy <small> a <big>. První z nich písmo o něco zmenší, druhý o něco zvětší. Teoreticky lze oba tagy vnořovat do sebe a dosáhnout tak víc velikostních stupňů než 3, příliš se to ale nedoporučuje. O tom, o jak velkou změnu velikosti se skutečně bude jednat, nerozhodujete totiž vy, ale prohlížeč. Co se tedy může zdát hezké na vašem počítači, na jiném může vypadat zcela jinak.

  3. Velikost písma ovlivňují i tagy pro nadpisy <h1> až <h6>. Nicméně ty jsou vyhrazeny opravdu jen pro nadpisy a pro samotnou změnu velikosti písma nám tedy nepomohou. Dokonce nám naopak problémy přidělají. Podle jednoho z pravidel dobrého stylu by totiž každý HTML dokument měl obsahovat právě jeden nadpis úrovně H1 a zpravidla i několik nadpisů úrovní H2 i nižších. Jenže nadpis H1 je většinou prohlížečů vykreslen až příliš veliký a často je tedy potřeba ho o něco zmenšit.

  4. Tím se dostáváme k poslednímu způsobu ovlivňování velikosti písma, a tím jsou kaskádové styly, neboli CSS. Styly dávají tvůrcům stránek nesrovnatelně větší možnosti než tagy <big> a <small>. Zároveň nejsou v kolizi z významovými tagy typu <h1> a mohou je dokonce vhodně doplňovat.

Jak tedy měnit velikost písma pomocí CSS. Začátek je překvapivě jednoduchý. Stačí nám totiž jediná vlastnost (property) CSS, a to font-size. Tím ale všechna jednoduchost končí. Vlastnost font- size totiž může nabývat mnoha různých hodnot. Konkrétně se jedná o:

  • absolutní velikost
  • relativní velikost
  • délku
  • procento

Absolutní velikost se udává jedním ze 7 klíčových slov "xx-small", "x-small", "small", "medium", "large", "x-large" a "xx-large", které představují 7 možných stupňů velikosti od nejmenší po největší. Poněkud v rozporu s názvem tyto velikosti až tak absolutní nejsou, neboť zcela závisí na prohlížeči. Implicitní velikost písma MSIE např. odpovídá velikost "small" (malá), ačkoli by člověk spíše očekával "medium" (střední).

Relativní velikost má jen dvě možné hodnoty - "smaller" a "larger" a v podstatě odpovídá tagům <small> a <big>.

Velikost lze udat i procentem a myslí se přitom procento z rodičovského prvku. V CSS je rodičovský prvek ten, ve kterém je daný tag vložen. V tomto příkladu

<body>
<p>Odstavec s <q>krátkým <strong>citátem</strong></q>.</p>
</body>

je <body> rodičovským prvkem <p>, <p> je rodičovským prvkem <q> a <q> je rodičovským prvkem <strong>.

Jestliže tedy v definici CSS určíme:

body {font-size: medium}
q {font-size: 90%}
strong {font-size: 110%}

bude písmo mezi <q> a </q> o 10% menší než okolní a písmo mezi <strong> a </strong> naopak o 10% větší.

Háček je v tom, že IE3 implementoval tuto vlastnost špatně a percentuální rozdíl chápal oproti původní velikosti písma daného prvku, nikoli dle prvku rodičovského. Definice

h1 {font-size: 200%}

pak způsobí, že je obsah tagů <h1> dvakrát větší než implicitní <h1> a nikoli dvakrát větší než běžné písmo body. Od IE4 a i v NN je to však již v pořádku, takže např. na stránce Sovy v síti jsem si troufl použít pro velikost písma pouze procenta, neboť u webmasterů používání IE3 neočekávám.

Nakonec jsem si nechal délku, přesněji hodnotu vlastnosti font-size udanou v délkových jednotkách. Až dosud měly všechny uvedené způsoby jedno společné. O skutečné velikosti písma na obrazovce uživatele rozhodoval výhradně prohlížeč, resp. sám uživatel. Všechny tyto způsobu totiž v kombinaci s běžnými prohlížeči umožňují, aby si uživatel nastavil velikost písma sám (IE i NN nabízí pro toto nastavení 5 velikostí písma).

To, že si uživatel může sám nastavit velikost písma je většinou v pořádku. Každý má jiný vkus a jinak silné či spíše slabé oči. Skutečná velikost navíc silně závisí na vlastnostech zobrazovacího média (např. rozlišení a velikost monitoru), a je tedy žádoucí, aby si ji uživatel mohl sám doladit. Jsou však případy, kdy z důvodů grafické úpravy kombinujete písmo s obrázky a případně tabulkami takovým způsobem, že změna velikosti písma by váš výtvor zcela rozházela. Pak je třeba použít délkových jednotek.

CSS zná mnoho délkových jednotek a aby bylo zmatení pojmů dokonalé, člení je na relativní a absolutní. Tyto pojmy však nemají s absolutními a relativními velikostmi vlastnosti font-size popsanými výše nic společného.

Relativní délkové jednotky jsou "em" (výška fontu daného prvku), "ex" (výška písmene 'x') a "px" (pixel, obrazový bod). Absolutními jednotkami pak jsou "in" (palce), "cm" (centimetry), "mm" (milimetry), "pt" (typografické body) a "pc" (typografická míra pica). Povšimněte si, že všechny absolutní jednotky jsou navzájem převoditelné (1pc = 12pt, 1pt = 1/72in, 1cm = 10mm a 1in = 2,54cm). Z praktického hlediska tedy mají z absolutních jednotek význam jen typografické body - "pt".

Relativní délkové jednotky "em" a "ex" se na velikost písma moc nehodí, neboť jsou právě z velikosti písma odvozeny. O to víc se však hodí na velikost různých mezer, okrajů, odrážek, atd. Naproti tomu pixely ("px") jsou v určitých případech právě pro určení velikosti písma velice praktické. V pixelech se totiž zásadně udávají velikosti obrázků. A pokud chcete zachovat poměr velikosti obrázků a písma, máte jedinou možnost - určit velikost písma v "px".

Ještě dodejme, že ony absolutní jednotky (pt, mm, atd.) zase až tak absolutní ve skutečnosti nejsou. Výsledná velikost písma totiž silně závisí na vlastnostech výstupního média (monitoru, papíru) a na tom, jak se prohlížeč snaží médiu přizpůsobit. IE ve Windows tedy např. vesele zmenšuje s rostoucím rozlišením monitoru i písmo, jehož velikost je udána v "pt" a tím stírá rozdíl mezi "pt" a "px". Některé prohlížeče a operační systémy se naopak snaží přizpůsobit skutečné velikosti a rozlišení monitoru. Výsledkem je, že ani u absolutních jednotek nevíte, co vlastně uživatel nakonec uvidí.

Na závěr si shrneme ty nejdůležitější informace a doporučení.

  • Pro určení velikosti písma nepoužívejte tag <font> . Tagy <h1> až <h6> používejte jen pro skutečné nadpisy.

  • Pokud vystačíte se třemi, nepříliš od sebe vzdálenými stupni velikosti písma(nepočítaje nadpisy), použijte tag <small> pro písmo menší než normální a tag <big> pro písmo větší než normální. Chcete-li použít CSS, můžete místo < small> dát font-size:smaller a místo <big> font-size:larger.

  • Potřebujete-li více stupňů velikosti, avšak chcete uživateli ponechat možnost vlastního nastavení (doporučeno), použijte vlastnost CSS font-size s absolutním určením velikosti, nebo procentem. Příklady: h1 {font-size: large}, body {font-size: small}, h2 {font-size: 150%}.

  • Jestliže nezbytně potřebujete zachovat poměr velikosti písma k velikosti obrázků nebo tabulek, použijte vlastnost CSS font-size s velikostí v pixelech. Příklad: h1 {font-size: 24px}.

Tato stránka je přístupná libovolným prohlížečem, nejlépe však vypadá v prohlížeči, který podporuje HTML 4.0 a CSS 2 (Internet Explorer od verze 5, Mozilla, Opera a další). Pokud čtete tuto zprávu, váš prohlížeč zřejmě dostatečně nepodporuje CSS. Stránku sice vidíte bez pokročilejšího formátování, avšak veškerý obsah je plně přístupný i pro vás.