CSS Rozmiar czcionki: Pixels vs Em vs Rem vs Percent vs Viewport Units

Wiele dyskutuje się o pixels vs em vs percent vs rem i o tym której właściwości czcionki użyć i kiedy. Pomimo wszystkich ponad 100 artykułów online, ten temat może być bardzo mylący biorąc pod uwagę jak użycie tych właściwości czcionek różni się w zależności od potrzeb naszych projektów. Na przykład, niektórzy sugerują, aby nie używać stałych wartości pikseli na poziomie podstawowym (html i elementy body), ponieważ użytkownik nie będzie miał możliwości zresetowania rozmiaru czcionki do swoich specyfikacji. Ale dla ludzi takich jak ja, którzy są zależni od bootstrapa, nie jest to wskazane. Kończy się na tym, że mamy ustaloną wartość bazową w pikselach i musimy tworzyć właściwości czcionek w całym projekcie w odniesieniu do bazowych wartości pikseli.

Ten artykuł wyjaśnia różnicę pomiędzy tymi właściwościami czcionek i jak najlepiej ich używać. Oczywiście, nie ma właściwego sposobu, aby to zrobić i duża część tego, które wielkości czcionek do użycia i jak będzie w dużej mierze deterministyczne w oparciu o nasze zrozumienie tych jednostek wielkości czcionek i projektu, o którym mowa.

Piksele: Przed nadejściem responsywnego projektowania, piksel był szeroko stosowany jako THE font sizing dla wszystkiego od typografii do szerokości, paddingu i wysokości. Jednak piksele są jednostkami o stałym rozmiarze i nie zmieniają się w oparciu o rozmiar rzutni lub są skalowalne. Jeśli chcesz zbudować responsywną stronę używając pikseli, może być bardzo trudno śledzić wszystkie wartości oparte na pikselach w całym arkuszu stylów CSS, włączając w to wartości w zapytaniach o media. Więc, jakiej właściwości czcionki możemy użyć, która pozwoli nam dokonać minimalnych zmian w naszym arkuszu stylów CSS, ale nadal będzie skalowalna? To właśnie tam em, rem, percent i jednostki rzutni wchodzą do obrazu.

Em:Em jest elastyczną, skalowalną jednostką, która jest konwertowana przez przeglądarkę na wartości w pikselach. Jeśli domyślny rozmiar czcionki w chrome to 16 px, 1 em = 16 pikseli. Jednym z wielkich nieporozumień dotyczących em jest to, że jest on względny w stosunku do rozmiaru czcionki elementu nadrzędnego. Zgodnie z W3 spec, em jest względny do rozmiaru czcionki elementu, na którym jest używany. Ten artykuł tutaj wykonał wspaniałą pracę wyjaśniając koncepcję em w sposób jasny i szczegółowy. Jeśli naprawdę chcesz się dowiedzieć jak działa em, nie pomijaj powyższego artykułu. Ems są powszechnie używane do typografii, takie jak nagłówki, teksty, akapity i elementy związane z typografią, takie jak marginesy, padding itp. Jeśli ustawisz swój bazowy rozmiar czcionki html i elementów body w pikselach, a właściwości twojego elementu typografii są zdefiniowane przy użyciu ems, dla responsywnego projektu wszystko, co musisz zrobić, to zmienić domyślny rozmiar czcionki na poziomie bazowym, takim jak

@media (max-width: 400px) {
html, body { font-size: 15px; }
}

i wszystkie wartości em będą automatycznie ponownie obliczane do poziomu bazowego.

Jednakże ems mają główne zastrzeżenie, Dziedziczenie!!! Na przykład, <div> z rozmiarem czcionki 16px zawierający <p> z rozmiarem czcionki 2em przekłada się na 32 px dla elementu <p>. Teraz dodaj <div> wewnątrz <p> z rozmiarem czcionki 0.5em również, wynik div będzie 16px, połowa z 32 px, a nie 8px. To jest, gdzie rems wchodzą do obrazu.

Rem: Rem jest względny w stosunku do rozmiaru czcionki elementu root (element html). Jeśli font-size elementu html wynosi 16 px, to 1rem = 16 px. Rem będzie ZAWSZE względny do elementu root, niezależnie od tego, jak zagnieżdżone są elementy. Jednak używanie tylko remów i żadnych emów może mieć swój własny udział w kłopotach, ponieważ typografia może stać się zbyt duża lub zbyt mała, co może prowadzić do problemów ze skalowaniem. Ten artykuł wyjaśnia świetny sposób na rozwiązanie tego problemu.

Percenty: Wartość procentowa jest zawsze względna w stosunku do innej wartości, czy to wartości rodzica elementu, czy też z innej właściwości samego elementu. Procenty są szeroko stosowane w projektowaniu responsywnym. Świetnym przykładem może być Bootstrap firmy Twitter. Bootstrap’s 12-Column layout ma swoje szerokości ustawione w procentach, więc są one zawsze płynne i wielkości w stosunku do ich elementu nadrzędnego
Procenty są powszechnie używane dla szerokości i wysokości kontenerów, divów i dla rozmiaru responsywnych obrazów.

Jednostki rzutni: Właściwości szerokości i wysokości rzutni są względne w stosunku do szerokości/wysokości bieżącego rozmiaru rzutni.

1vw = 1% szerokości rzutni
1vh = 1% wysokości rzutni

Viewport tutaj oznacza rozmiar okna przeglądarki. Jeśli chcesz dopasować rozmiar swojego elementu na podstawie szerokości rzutni, a nie elementu nadrzędnego/root element, to jednostki rzutni są jednostkami rozmiaru czcionki, których musisz użyć. jednostki vw/vh świetnie sprawdzają się w typografii i są powszechnie używane do tego samego.
Tutaj jest świetny artykuł, który wyjaśnia, jak korzystać z tej właściwości.

Final Verdict: Ponieważ często używam bootstrapa, mój domyślny rozmiar bazowy jest w pikselach. Używam procentów, aby ustawić szerokość i wysokość obrazów, kontenerów i divów, ems i rems dla typografii i elementów związanych z typografią, takich jak margines, padding itp. Obecnie bawię się z jednostkami rzutni dla responsywnej typografii i uważam, że jest to niesamowite. Eksperymentuj dużo z tymi właściwościami czcionek, a wkrótce wpadniesz w styl stworzony dla Ciebie.