Czcionki

Wielkość

selektor { font-size: rozmiar }

1. Imienne wartości absolutne:
   • xx-small - najmniejsza
   • x-small - mniejsza
   • small - mała
   • medium - średnia
   • large - duża
   • x-large - większa
   • xx-large - największa

   UWAGA!
   W Internet Explorerze 6 i 7.0 wielkość czcionki, podana przez powyższe wartości, zależy od zadeklarowanej wersji DTD.

   W trybie Quirks wielkości są następujące (w przypadku ustawienia w menu przeglądarki średniego rozmiaru tekstu): xx-small = 10px (10 pikseli), x-small = 12px, small = 16px, medium = 18px, large = 24px, x-large = 32px, xx-large = 48px. Natomiast w trybie zgodności ze standardami: xx-small = 10px, x-small = 10px, small = 12px, medium = 16px, large = 18px, x-large = 24px, xx-large = 32px (w tym przypadku wszystkie wartości są o jeden rozmiar mniejsze niż w trybie Quirks).
   W Internet Explorerze 5.0 wielkość czcionki nie zależy od DTD i wynosi zawsze tyle, co w przypadku trybu Quirks.

   Z powyższych powodów bezpieczniej jest podawać wszystkie wielkości czcionek w pikselach (np.: 14px). Niestety wtedy uniemożliwiamy użytkownikowi zmianę rozmiaru tekstu, poprzez wybranie polecenia z menu: Widok/Rozmiar tekstu, dotyczy to jednak właściwie tylko bardzo przestarzałych przeglądarek - jak np. MSIE 6.0.

   Przykład:

   rozmiar xx-small

   rozmiar x-small

   rozmiar small

   rozmiar medium

   rozmiar large

   rozmiar x-large

   rozmiar xx-large

2. Wartości względne:
   • smaller - mniejsza od bieżącej
   • larger - większa od bieżącej

   Czcionka bieżąca to taka, której wielkość została określona w arkuszu stylów (importowanym, zewnętrznym lub wewnętrznym) albo poprzez styl lokalny [zobacz: Wstawianie stylów]. Jeśli czcionka bieżąca nie została określona, najczęściej przyjmuje domyślną wielkość 16px.

   Przykład:

   rozmiar smaller

   czcionka bieżąca

   rozmiar larger

3. Jednostki długości

   Jednostka "em" jest w tym przypadku miarą względną i odnosi się do rozmiaru czcionki zdefiniowanej dla elementu rodzica, czyli: 1em = 100%.

   Przykład:

   rozmiar 0.5cm

   rozmiar 4mm

   rozmiar 0.25in

   rozmiar 10pt

   rozmiar 1pc

   rozmiar 15px

   rozmiar 1em

   rozmiar 2ex

4. Procent wielkości bieżącej:

   Przykład:

   rozmiar 75%

   Czcionka bieżąca

   rozmiar 150%

Jeśli definiowane własności mają odnosić się do całej strony (np. wielkość czcionki na całej stronie), można użyć selektora BODY albo HTML.

Najlepszy sposób ustalania wielkości czcionki

Jak widać, rozmiar tekstu można definiować przy pomocy wielu jednostek, jednak wcale nie jest wszystko jedno, w jaki sposób to zrobimy.

em

Kiedyś panowała opinia, że najlepszą jednostką do ustalania rozmiaru czcionki jest "em" i rzeczywiście tak mogłoby się wydawać, ponieważ jednostka ta jest bezpośrednio związana z czcionką - oznacza po prostu rozmiar dużej litery. Dodatkowo w czasach, gdy na rynku królowała przeglądarka MSIE 6.0, taki sposób zapewniał użytkownikom możliwość skalowania rozmiaru tekstu. Dzisiaj wszystkie popularne przeglądarki (MSIE od wersji 7.0) nie mają już z tym żadnych problemów.

Innym powodem stosowania tej jednostki mogła być chęć polepszenia czytelności witryny w urządzeniach mobilnych, które posiadają zwykle niewielki ekran. W takim przypadku jednak i tak pozostała cześć stylizacji dokumentu najczęściej nie nadaje się do wyświetlenia na ekranie np. telefonu komórkowego. Znacznie lepszym pomysłem jest przygotowanie osobnego arkusza CSS, przeznaczonego specjalnie dla medium handheld.

Używanie "em" posiada natomiast bardzo poważną wadę. Pamiętajmy, że "1em" to tyle samo co "100%", a więc jest obliczane zawsze względem jakiejś wartości bazowej, wyrażonej w pikselach. Gdy samodzielnie jej nie wpiszemy w naszym arkuszu stylów - a nie możemy, ponieważ wtedy utracilibyśmy wszystkie wyżej wymienione zalety - przeglądarka przyjmie swój domyślny rozmiar czcionki. W większości przypadków domyślną wartością jest "16px", ale nie ma na to żadnej gwarancji. Niesie do ze sobą poważne trudności:

• Nie da sie zapanować nad ułożeniem na stronie elementów graficznych, które z zasady posiadają rozmiary pikselowe.
• Czytelność tekstu zależy nie tylko od jego rozmiaru, ale również m.in. od proporcji, a więc rodzaju czcionki. Dlatego tak samo jak kolor tekstu zawsze powinno ustalać się wspólnie z kolorem tła, definiując rodzaj czcionki trzeba podać również jej rozmiar. Może się zdarzyć, że domyślnie ustawiona w przeglądarce czcionka ma bardzo duże proporcje, a więc będzie zupełnie czytelna przy rozmiarze "13px", podczas gdy najczęściej domyślnie stosowana w systemie Windows 'Times New Roman' jest czytelna dopiero przy ok. "16px". Jeśli teraz ustalimy na stronie czcionkę bezszeryfową, może okazać się, że "16px" to dla niej za dużo, ponieważ zwykle ma większe proporcje. Dlatego podajemy np. "font-size: 0.75em", co daje: 0.75 * 16px = 12px, podczas gdy dla domyślnego rozmiaru "13px" będzie to: 0.75 * 13px = 9.75px, co najczęściej oznacza miniaturowy tekst, bardzo trudny do odczytania.
• Na ekranie monitora wszystkie elementy są wyświetlane zawsze przy użyciu pikseli, a więc każda jednostka ostatecznie i tak musi być w ten sposób przeliczona. Jak można było zauważyć na wcześniejszym przykładzie obliczeń, korzystając z jednostek takich jak "em" (lub "%"), może się okazać, że przeliczona wartość pikselowa nie jest liczbą całkowitą. Jak wiadomo, nie da się podzielić piksela ekranowego, a więc wartość ta musi być zaokrąglona. Nie ma jednak żadnej pewności, w jaki sposób zostanie to wykonane: w dół, w górę, czy zgodnie z zasadami matematyki, a czasem nawet jeden piksel różnicy może być granicą dobrej czytelności tekstu.
• W przeglądarce, która była główną przyczyną rozpowszechnienia się koncepcji ustalania wielkości czcionki przy użyciu jednostek "em" (MSIE 6.0), w pewnych przypadkach występował błąd, objawiający się wyświetlaniem miniaturowego tekstu dla wszystkich wartości poniżej "1em" - nie ważne, że po przeliczeniu na piksele, wynikowy rozmiar wypadał np. 15px, co powinno zagwarantować dobrą czytelność.

Nie używaj jednostek "em" ani "%" do ustalania wielkości czcionek.

px

Piksele są nierozerwalnie związane z ekranem monitora. Dlatego jednostka ta jest idealnym wyborem przy ustalaniu wielkości czcionki w podstawowym arkuszu CSS. Problemy ze skalowaniem tekstu, którego rozmiar został podany w pikselach, dzisiaj należą już do rzadkości - aktualne wersje wszystkich popularnych przeglądarek bez problemu sobie z tym radzą. Nie ma sensu na siłę szukać innego sposobu wymiarowania czcionek, ponieważ i tak nie uciekniemy od tego, że wszystkie ilustracje osadzone na stronie mają rozmiary pikselowe. Teoretycznie można narzucić im wymiary przy użyciu jednostek "em", ale może to wywołać konieczność ich przeskalowania przez przeglądarkę, co zawsze skutkuje utratą jakości zdjęcia - nawet przy pomniejszaniu.

Wartości pikselowe zupełnie nie nadają się do ustalania czcionki w arkuszu dla wydruku.

pt

Jednostka "pt" (punkty) miała być dobrym kompromisem między trudnymi do przewidzenia konsekwencjami używania "em" a sztywnym blokowaniem rozmiaru za pomocą "px". Jeśli z komputera korzysta osoba słabowidząca lub po prostu posiadająca monitor z niewielkim ekranem, może zwiększyć podstawowy rozmiar czcionki w całym systemie operacyjnym, zmieniając tzw. wartość dpi, czyli liczbę pikseli przypadająca na jeden cal długości. Okazuje się jednak, że wiele osób w ogóle nie jest świadoma takiej możliwości. Przy tym przeglądarki często mają problem z prawidłowym wyznaczeniem ustawionej wartości dpi. Ponadto, jak to zwykle bywa z wartościami domyślnymi, nie da się w żaden sposób przewidzieć, co zostało ustawione w systemie użytkownika czytającego naszą stronę, a tutaj standardowe ustawienia różnych systemów operacyjnych mocno się różnią - wiele osób nawet nie wie jak to przestawić.

Nie używaj jednostki "pt" do ustalania rozmiaru czcionki na ekranie.

Większość edytorów tekstu podaje jednak rozmiary w punktach, a nie w pikselach. Drukarka zawsze zna dokładne wymiary arkusza papieru, a więc może zapewnić prawidłowy wydruk tekstu. "pt" jest zatem idealną jednostką w arkuszach CSS stylizujących formatowanie tekstu na wydruku.

Podsumowanie

• W tym rozdziale dowiesz się...
• Rodzaj

• Do góry
• Strona główna
• Drukuj rozdział