CZCIONKA BAZOWA, względna i bezwzględna

Każda przeglądarka wyświetla tekst czcionką bazową względną medium o wielkości 16px. W celu jej zmniejszenia deklaruje się w sekcji body mniejszą czcionkę regułą body {font-size:small;}. Jej wielkość w IE7 wynosi około 13px. Można stosować regułę body {font-size:0.75em;} co daje w pikselach wielkość 16px × 0.75=12px. Można także zadeklarować zmianę czcionki wartością bezwględną w pikselach, regułą body {font-size:12px;}. Efekt na ekranie dwóch ostatnich jest ten sam ale czcionka względna zadeklarowana jako font-size:small; lub jako font-size:0.75em; jest skalowalna i spełnia reguły dostępności a czcionka bezwzględna deklarowana w pikselach jest nieskalowalna i niespełnia reguł dostępności, które opisywałem na poprzedniej stronie.

PROBLEMY Z CZCIONKAMI względnymi

Zadeklarowanie czcionki względnej jako small umożliwia uzyskanie większych czcionek w tytułach lub nagłówkach jednostkami em lub procentowymi. Deklaracja font-size:0.75em; pozwala operować jednostkami em. Zadeklarowanie czcionki bezwględnej w pikselach zmusza do określania zmiany wielkości także w pikselach. Stosowanie jednostek em i procentowych utrudnia projektowanie stron nasyconych grafiką ponieważ przy powiększaniu czcionek grafika określana w pikselach pozostaje bez zmian. Powoduje to wylewanie się powiększonych znaków z fotografii, nagłówków i przycisków menu, których wymiary są określane w pikselach. Rozkład powiększonych czcionek i stałej w wymiarach grafiki, powoduje nieprzewidywalne zmiany w wyglądzie strony a nawet jej zburzenie w wypadku stosowania pływających kolumn. Strona o stałej szerokości z czcionką w pikselach zawsze wygląda jednakowo jak w Bibliotece. To tłumaczy skłonność projektantów do konstrukcji sztywnych z czcionką w pikselach.

MYŚL w pixelach DEFINIUJ w em

Dla osób przyzwyczajonych do myślenia w pikselach a chcących posługiwać się jednostkami em Richard Rutter wymyślił następującą metodę. Wyszedł z założenia że domyślny rozmiar tekstu przeglądarki jest ustawiony na medium co wynosi 16px. Dokonał obliczenia 16px × 0.625=10px i zmniejszył tą podstawową wielkość regułą body {font-size: 62.5%} otrzymując w wyniku bazę tj. element rodzica 10px. W ten sposób 1em=10px, 1.2em=12px ,  1.3em=13px  a  2em=20px itd. Problemy zaczynają się w momencie zagnieżdżania wartości em co powoduje konieczność stworzenia dla nich nowych deklaracji stylów. Zagadnienie te szczegółowo opisuje D.Cederholm na str.38-39 swej książki wymienionej obok.

JAKĄ WYBRAĆ CZCIONKĘ

W kolumnie bocznej zestawiono 5-typów deklaracji czcionek w sekcji BODY, od stosowanej najczęściej w pikselach do używanej rzadziej, określającej tylko rodzaj czcionki bezszeryfowej sans-serif.