Podczas tworzenia strony internetowej większość profesjonalistów zaleca, aby rozmiar czcionek (a właściwie wszystkiego) był określany miarą względną, taką jak ems, exs, wartości procentowe lub piksele. Dzieje się tak, ponieważ tak naprawdę nie znasz wszystkich sposobów, w jakie ktoś może przeglądać Twoje treści. A jeśli użyjesz miary bezwzględnej (cale, centymetry, milimetry, punkty lub piki), może to wpłynąć na wyświetlanie lub czytelność strony na różnych urządzeniach. I zaleca W3C że używasz ems dla rozmiarów.
Ale jak duży jest em?
Według W3C em:
„jest równa obliczonej wartości właściwości „rozmiar czcionki” elementu, na którym jest używana. Wyjątkiem jest sytuacja, gdy 'em' występuje w wartości samej właściwości 'font-size', w którym to przypadku odnosi się do rozmiaru czcionki elementu nadrzędnego."
Innymi słowy, ems nie mają rozmiaru bezwzględnego. Przyjmują swoje wartości rozmiaru na podstawie tego, gdzie się znajdują. Dla większości projektanci stron internetowych, oznacza to, że znajdują się w przeglądarce internetowej, więc czcionka o wysokości 1 em ma dokładnie taki sam rozmiar jak domyślny rozmiar czcionki dla tej przeglądarki.
Ale jak wysoki jest domyślny rozmiar? Nie ma możliwości uzyskania 100% pewności, ponieważ klienci mogą zmienić swoje domyślny rozmiar czcionki w swoich przeglądarkach, ale ponieważ większość ludzi nie wierzy, możesz założyć, że większość przeglądarek ma domyślny rozmiar czcionki 16px. Więc przez większość czasu 1em = 16px.
Myśl w pikselach, używaj ems do pomiaru
Gdy już wiesz, że domyślny rozmiar czcionki to 16 pikseli, możesz użyć ems, aby umożliwić klientom łatwą zmianę rozmiaru strony, ale zastanowić się piksele dla twoich rozmiarów czcionek. Załóżmy, że masz strukturę rozmiarów podobną do tej:
- Nagłówek 1 – 20 pikseli
- Nagłówek 2 – 18 pikseli
- Nagłówek 3 – 16 pikseli
- Tekst główny - 14px
- Tekst podrzędny — 12 pikseli
- Przypisy — 10 pikseli
Możesz je zdefiniować w ten sposób, używając pikseli do pomiaru, ale wtedy każdy, kto używa IE 6 i 7, nie będzie w stanie dobrze zmienić rozmiaru strony. Więc powinieneś przekonwertować rozmiary na ems, a to tylko kwestia matematyki:
- Nagłówek 1 – 1,25 em (16 x 1,25 = 20)
- Nagłówek 2 – 1,125em (16 × 1,125 = 18)
- Nagłówek 3 – 1 em (1 em = 16 pikseli)
- Tekst główny - 0,875em (16 x 0,875 = 14)
- Tekst podrzędny — 0,75 em (16 x 0,75 = 12)
- Przypisy — 0,625em (16 x 0,625 = 10)
Nie zapomnij o dziedziczeniu!
Ale to nie wszystko. Inną rzeczą, o której musisz pamiętać, jest to, że przybierają rozmiar rodzica. Jeśli więc masz zagnieżdżone elementy z różnymi rozmiarami czcionek, możesz otrzymać czcionkę znacznie mniejszą lub większą niż się spodziewasz.
Na przykład możesz mieć taki arkusz stylów:
Spowoduje to powstanie czcionek o wielkości 14 pikseli i 10 pikseli odpowiednio dla tekstu głównego i przypisów. Ale jeśli umieścisz przypis w akapicie, możesz otrzymać tekst o rozmiarze 8,75 zamiast 10 pikseli. Spróbuj sam, umieść powyższe CSS i następujący kod HTML do dokumentu:
Tak więc, gdy używasz emów, musisz być bardzo świadomy rozmiarów obiektów nadrzędnych, w przeciwnym razie na twojej stronie pojawią się naprawdę nieparzyste elementy.