Przelicz em na piksele przy dowolnym rozmiarze rodzica

Em zamienia się na piksele jednym mnożeniem: wartość w em razy rozmiar pisma rodzica. Przy domyślnym ustawieniu przeglądarki rodzic ma 16 px, więc 1 em daje 16 pikseli, a 1,5 em daje 24. Jednostka odnosi się do rozmiaru tekstu elementu nadrzędnego [1].

Przeliczenie przydaje się, gdy czytasz cudzy arkusz stylów i chcesz wiedzieć, ile realnie mierzy odstęp zapisany jako 0,75 em. Odpowiedź zależy od tego, w którym miejscu dokumentu ten odstęp leży, a to właśnie odróżnia em od pozostałych jednostek względnych.

Rodzic nie musi mieć 16 px. W karcie albo w tabeli często ma 14 px, w nagłówku sekcji 20 px lub więcej, dlatego pole rozmiaru przyjmuje wartości od 1 do 200.

Niżej znajdziesz tabelę 26 wartości przy trzech rozmiarach rodzica, tabelę kumulacji przy zagnieżdżeniu oraz rozstrzygnięcie, kiedy sięgnąć po em, a kiedy po rem. Drogę w drugą stronę pokrywa konwerter pikseli na em.

Wzór ma jedno działanie: piksele = em × rozmiar pisma rodzica. Rozmiar pisma rodzica to wartość font-size elementu, wewnątrz którego leży Twój element, a jeśli nikt jej nie zmieniał, przeglądarka używa 16 px.

Weź odstęp 1,25 em: przy rodzicu 16 px wychodzi 1,25 × 16 = 20 pikseli. Ta sama wartość wewnątrz karty z pismem 14 px daje 17,5 piksela, a w nagłówku o rozmiarze 20 px rośnie do 25.

Jedna zasada wymaga uwagi. We właściwości font-size em odnosi się do rodzica, ale w każdej innej właściwości tego samego elementu – w padding, margin czy width – odnosi się już do rozmiaru pisma tego elementu [2]. Element z font-size: 1.5em i padding: 1em przy rodzicu 16 px ma pismo 24 px i padding również 24 px, a nie 16.

Jednostka rem liczy się tak samo, tylko zawsze od elementu html, przez co daje ten sam wynik w całym dokumencie: to zadanie dla konwertera rem na piksele. Te same 16 pikseli to w składzie 12 punktów typograficznych, co przelicza konwerter punktów na piksele.

Em mierzy się względem rodzica, a rodzic ma swojego rodzica. Gdy ten sam zapis font-size: 1.25em powtórzy się na kolejnych poziomach zagnieżdżenia, każdy poziom mnoży wynik poprzedniego. Po sześciu poziomach z 16 pikseli robi się ponad 61.

Najczęściej widać to w listach zagnieżdżonych, w menu z podmenu i w komentarzach z odpowiedziami, bo tam struktura sama tworzy kolejne poziomy. Tabela niżej pokazuje każdy krok razem z rachunkiem, żeby było widać, skąd bierze się każda liczba.

Stąd praktyczna zasada: em sprawdza się tam, gdzie wartość ma iść za rozmiarem pisma najbliższego kontekstu – odstęp wokół tekstu przycisku, wcięcie listy, szerokość pola formularza. Do stopni pisma w całym serwisie lepiej nadaje się rem, bo liczy się od korzenia dokumentu i przy zagnieżdżaniu daje zawsze tę samą wartość.

Jeśli szukasz właśnie tej przewidywalności, przeliczenie zrobi konwerter rem na piksele, a zapis wymiaru z makiety w jednostce rem – konwerter pikseli na rem.