Istnieją dwie szkoły jeśli chodzi o ustalanie wielkości czcionki na stronie internetowej: używanie px lub em. Dyskusja na temat tego które podejście jest lepsze nie ma sensu, ponieważ oba mają swoje plusy i minusy. Wszystko zależy od konkretnego przypadku użycia. Czy w takim środowisku możliwe jest wprowadzenie w życie innych, nowych jednostek? Propozycją CSS3 jest REM.

PX vs EM

Co prawda jednostek miary jeśli chodzi o czcionkę jest całe mnóstwo: em, px, % ex pt, cm, mm, in, pc (dowiedz się więcej, zobacz porównanie), jednak w powszechnym użyciu mamy do czyenienia z pierwszymi dwoma:

Wielkość tekstu definiowana za pomocą px

Piksele były od początku istnienia internetu domyślną miarą wielkości czcionki na stronie. Definiowanie rozmiarów blokom tekstu było proste. Problem pojawia się w momencie, kiedy zależy nam na użyteczności strony, tzw. "usability". Tekstu zdefiniowanego pikselami nie można w prosty sposób zwiększać lub zmniejszać w niektórych starszych przeglądarkach (oraz oczywiście w IE), by dostosować wygodę czytania. Co prawda nowsze przeglądarki mogą mieć wbudowany mechanizm powiększania całości strony (a nie samego tekstu), jednak to nie rozwiązuje całkowicie tego problemu.

Wielkość tekstu definiowana za pomocą em

Drugie podejście różni się od pierwszego. Jednostka em jest relatywna, a więc rzeczywista wielkość czcionki zależy od tego gdzie została zdefiniowana i jakie są wartości nadrzędne. Świetny artykuł na temat manipulacji wielkością tekstu znajduje się na A List Apart: How to size text in CSS. W skrócie: definiujemy wielkość czcionki w procentach dla elementu body ustawiając ją na 62,5%, dzięki czemu dostaniemy wielkość 10px zamiast domyślnych 16px dla całego dokumentu. Teraz wystarczy modyfikować wielkość danego elementu za pomocą em (przykłady ze Snook.ca), jeśli chcemy uzyskać 14px to ustalamy wielkość czcionki na 1.4em:
body { font-size: 62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

Problem pojawia się w momencie, kiedy zaczynamy zagnieżdżać elementy. Tekst listy wewnątrz innej listy nie będzie miał rzeczywistej wielkości 14px, ale 20px (10px x 1.4 x 1.4). Co prawda można to obejść definiując bazowe wartości dla danych elementów: li li, li p /* etc */ { font-size: 1em; }, jednak jest to dosyć uciążliwe. I tu z pomocą przychodzi rem.

Czym jest REM?

Ok, wiemy z czym mieliśmy do czynienia do tej pory, ale co nowego przynosi nam CSS3? Teraz do dyspozycji dostajemy REM: jednostka REM to nic innego jak root em, czyli znana jednostka em, której wielkość liczona jest bezpośrednio od roota naszego dokumentu (czyli zazwyczaj od html), a nie od elementów nadrzędnych. Wartość rem nadal jest relatywna, ale zagnieżdżanie elementów nie popsuje nam wielkości tekstu: wartość nadrzędną definiujemy raz, w elemencie html, po czym odnosimy sie do niego bezpośrednio definiując wielkość czcionki dla poszczególnych elementów na stronie:
html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */

Dzięki temu podejściu możemy bardzo łatwo manipulować wielkością tekstu na całej stronie za pomocą jednej wartości - zmieniając font-size na 100% dla elementu html zwiększy się także wielkość tekstu wszystkich innych elementów.

Wsparcie przeglądarek

Zdziwić może fakt, że wsparcie jednostek rem jest całkiem przyzwoite. Możemy z nich korzystać w następujących rodzinach przeglądarek: Safari 5, Chrome, Firefox 3.6+ a nawet IE9. Niestety, Opera nie wspiera rem, chociaż może kiedyś doczekamy się ich implementacji. Jeśli chcemy zachować kompatybilność wsteczną, możemy zdefiniować wielkość czcionki najpierw w px (dla starszych przeglądarek), a następnie w em (dla tych, które to wspierają):
html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */

Dzięki tej sztuczce będziemy mieli kod, który korzysta z najnowszych bajerów CSS3 w przeglądarkach, które go wspierają, a jednocześnie wyświetla poprawnie stronę w starszych modelach.

Podsumowanie

Czy REM jest przyszłością definiowania wielkości czcionek na stronach internetowych? Ja bym to raczej nazwał drobnym ułatwieniem lub propozycją pasującą do specyficznych projektów, ponieważ bardzo trudno przekonać kogoś do zmiany przyzwyczajeń, jeśli przez całe swoje front-endowe życie używał np. pikseli. Jest to na pewno interesująca alternatywa, która daje większą kontrolę nad naszym kodem i jednocześnie pozwala na tworzenie użytecznych stron internetowych.