Typografia w sieci: Jednostki wielkości
W CSS do dyspozycji dostajemy kilkanaście różnych jednostek wielkości. Użycie części z nich wydaje się być dość oczywiste, jednak koderzy często nie są świadomi, że za każdą z nich kryje się swojego rodzaju „drugie dno”. Poza tym wydawało mi się, że warto wspomnieć o takich podstawach, żeby nie wyjaśniać wszystkiego później.
Jednostki absolutne
Jednostki absolutne to takie, które w założeniu mają stały wymiar niezależnie od miejsca ich użycia. Oczywistym przykładem będą cale, centymetry czy milimetry. Nie są to raczej popularnie stosowane wielkości, głównie ze względu na brak skalowalności. Być może chcemy, żeby tekst na ekranie komputera miał 3 centymetry wysokości, ale pomyślmy jak duże te trzy centymetry wydają się kiedy otworzymy tę samą stronę na telefonie komórkowym. Jednostki tego typu sprawdzać się mogą na przykład w osobnej wersji strony internetowej przygotowanej specjalnie do druku (za pomocą media queries).
Osobną kwestią są piksele. Zaliczane były przez długi czas do jednostek absolutnych, ale to nie do końca prawda. Pamiętajmy, że jeden piksel też może mieć różne wymiary fizyczne. Na przykład piksel na moim monitorze ma około 0,257 milimetra, ale już piksel na telewizorze w pokoju obok to 0,639 milimetra, a w iPhone 4 ma zaledwie 0,077 milimetra. Mam nadzieję, że widać tu już wyraźnie główną wadę piksela – nigdy nie mamy pewności na jakim urządzeniu wyświetlona zostanie strona, więc nie możemy założyć, że tekst wielkości 12 px nie będzie np. za mały na telewizorze.
Oczywiście większość software radzi sobie z tym bez większego problemu, przeskalowując tekst dla odpowiedniej widoczności. Podobnie bez większych problemów przeglądarki internetowe potrafią zoomować stronę internetową powiększając tekst razem z resztą elementów. Zdania na temat używania bądź nie używania pikseli do określania wielkości związanych z tekstem są podzielone, ale mówi się raczej, że lepszym wyjściem jest używanie jednostek relatywnych.
in– cal (2,54 centymetra)cm– centymetrmm– milimetrpt– punkt (0,03528 centymetra)pc– pica (0.423 centymetra)
Jednostki relatywne
Jednostki relatywne to te, które w jakiś sposób zależą od innej wartości. Idealnie nadają się do operowania na rozmiarach związanych z tekstem, ponieważ bezproblemowo skalują się z jednego medium do drugiego (np. z monitora na ekran smartphone’a).
Podstawową i jedną z najczęściej wykorzystywanych jednostek relatywnych jest em. Nazywa się tak, ponieważ wielkość jednostki jest w założeniu zbliżona do szerokości wielkiej litery M. Jest to jednak wielkość relatywna w stosunku do font-size. Jak to działa w praktyce?
<p>Lorem ipsum <span>dolor</span> sit amet, consectetur adipiscing elit.</p>p { font-size: 16px; }
span { font-size: 1.5em; }Nadajemy elementowi <p> wielkość czcionki 16px. Element <span> dziedziczy tę wielkość, jednak zmieniliśmy ją na 1.5em. W praktyce oznacza to, że powiększamy wielkość tekstu o 50% w stosunku do elementu nadrzędnego (więc będzie równa 24px). Warto pamiętać, że em zawsze będzie odwoływać się do wielkości tekstu, nawet jeśli użyjemy go np. w width.
Em technicznie jest bardzo fajnym narzędziem, ponieważ pozwala manipulować wielkościami w zależności od tego, co na stronie najważniejsze, czyli treści. Nie są jednak zbyt wygodne w użyciu, ponieważ wymagają liczenia i sprawdzania jaką wartość ma element nadrzędny. Łatwo sobie wyobrazić, że przy kilkunastu zagnieżdżonych elementach można się zgubić. Z pomocą przychodzą nam różne narzędzia, które pomogą policzyć odpowiednie wartości jak np. Em Calculator.
Oprócz tego, wraz z pojawieniem się CSS3 do dyspozycji oddano nam ciekawą alternatywę dla em, która jest o wiele wygodniejsza w użyciu. Jest nią rem. Od swojego poprzednika różni się tym, że jest relatywna tylko w stosunku do głównego elementu strony (czyli najczęściej <body>). Nie musimy dzięki temu każdorazowo obliczać wielkości w stosunku do kolejnych elementów. Niestety jest to jednostka nowa i minie trochę czasu zanim będzie wspierana przez większość używanych przeglądarek.
Warto pamiętać również o procentach, które od czasu do czasu przydają się również w manipulowaniu wartościami związanymi z tekstem.
em– wartość relatywna dofont-sizerodzicaex– tak zwany x-height (wysokość małej literyx) używanego fontach– długość cyfry0w używanym foncie%– wartość relatywna do wartości nadrzędnej
Komentarze
Dobry artykuł, zawsze warto przypomnieć sobie podstawy.
Nie chcę być niemiły, ale przeczytałem całość w Safari Reader. Teskt tutaj jest po prostu za mały, żeby go wygodnie czytać.
pim: Dzięki. :) Zdaję sobie sprawę, ale jeszcze nie wykombinowałem jak to poprawię.
Czy skrót DPI ma się w jakiś sposób do jednostki pt? Może warto to napisać? Podobnie jak o relacji px<->pt... Wydaje mi się to ważniejsze, niż o tym ile cm=1pt...
Możesz dopisać, że jednostka em oznacza szerokość litery m czcionki danego kroju.
Do tej pory nie spotkałem się z rem. Które przeglądarki to obsługują?
mt3o: Szczerze mówiąc rozważałem w ogóle nie wspominanie o punktach i siedzą tam tylko jako ciekawostka i dopełnienie całości. Punkty nie nadają się do używania na stronach internetowych.
To jest w tekście. ;)
IE > 9, Firefox od zawsze, Safari > 5, Chrome od 10 na pewno, na Androidzie i nowym iOS też. Opera (nawet mini) nie obsługuje.
Nie doczytałem.. Przewertowałem wzrokiem tekst i musiałem tego nie zauważyć. Natomiast uderzył mnie po oczach że przy wypunktowaniu jednostek względnych nie było o tym informacji
20% rynku wg ranking.pl, chyba jeszcze warto się wstrzymać z tym i jednak stosować em albo piksele ;)
mt3o: Bo praktycznego znaczenia to raczej nie ma, tym bardziej, że dzisiejszy
emjest trochę większy niż sama litera. W CSS i tak przeliczasz to na piksele.Niestety. Tzn. IE od 9 włącznie, nie dodałem znaku równości. ;)
Po pierwsze, fajno, że piszesz (i będziesz pisać więcej) o typografii.
Po drugie, mimo przyzwoitego tekstu ciężko się go czyta. Używam FF5 pod Linuksem i tekst na twoim blogu u mnie wygląda tak: http://i53.tinypic.com/2nbdiya.png
Pod Chromium wygląda z deczka lepiej.
rsf: Łał. Linux ma jednak koszmarny anty-aliasing. o_O Jak napisałem wyżej, jak będę miał wenę i więcej czasu, to postaram się coś w tej kwestii zmienić.
Linux ma dobry anty-aliasing, trzeba tylko przy kompilacji zaznaczyć opcję --miej-w-dupie-patenty ;)
Eee tam, w Ubuntu standardowo jest w porządku. W Fedorze (a chyba to Fedorę widać na zrzucie) jest marnie przez te głupie patenty, ale wystarczy doinstalować dwie paczuszki i jest perfect.
lrem: już nie trzeba - patenty sobie wygasły
http://www.freetype.org/patents.html