Z reguły na koncerty nie chodzę, ale dzięki uprzejmości jednego z moich pracodawców, dostałem wczoraj dwa bilety na Pozytywne Wibracje, więc i na koncert się wybrałem. Był całkiem fajny, ale ja nie o tym.

Dla stałych bywalców to pewnie żadna nowość, ale mnie zirytowało to wystarczająco, żeby napisać krótką notkę. ;) Chodzi mi o opaski, które dostaje się jako przepustkę. Pokazujesz bilet, zakładają ci opaskę i dzięki temu możesz sobie latać po terenie koncertu. Problem w tym, że festiwal trwa dwa dni. Po pierwszym uznałem, że mi już wystarczy i na drugi się nie wybieram, więc mógłbym komuś swoją wejściówkę odstąpić. Tyle, że takiej opaski nie można zdjąć i jej komuś oddać bez uszkodzenia, a to jest warunek wejścia. Raz, że muszę przetrzymać jeden dzień w obrączce, do kolejnych koncertów (to jestem w stanie znieść), a dwa, że mój bilet na drugi dzień teoretycznie przepada.

Oczywiście da się tę marną opaskę zdjąć i założyć ponownie tak, że praktycznie tego nie widać, ale nie o to w końcu chodzi. Rozumiem też, że organizatorzy chcą się jakoś zabezpieczyć, ale – dokładnie tak, jak przy oryginalnych płytach z filmami – z góry traktuje się mnie jak złodzieja i oszusta. Jak dla mnie to przegięcie.

BTW. jeśli ktoś chce dwie wejściówki na Golden Circle, to chętnie oddam. Będzie tylko musiał użyć jakiegoś kleju szybkowiążącego, żeby przykleić guziczek od zapięcia.

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 – centymetr
• mm – milimetr
• pt – 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 do font-size rodzica
• ex – tak zwany x-height (wysokość małej litery x) używanego fonta
• ch – długość cyfry 0 w używanym foncie
• % – wartość relatywna do wartości nadrzędnej

O ile na zagranicznych blogach można znaleźć bardzo dobre materiały dotyczące typografii w odniesieniu do publikowania w sieci, tak w polskim internecie jest tego zdecydowanie mniej. Albo po prostu źle szukam. Tak czy inaczej, postanowiłem zebrać w jednym miejscu wszystko czego się nauczyłem i opublikować w serii krótkich artykułów poruszając jedno zagadnienie za każdym razem.

Pamiętajcie proszę, że nie jestem typografem i daleko mi do wiedzy profesjonalistów. Wszystkiego uczyłem się sam, głównie z informacji dostępnych w sieci i własnych obserwacji (dlatego najczęściej nie odniosę się do źródeł). Czasami przedstawię surowo dane zagadnienie, a czasami przytoczę swój komentarz (bo nie ze wszystkimi zasadami typografii się zgadzam). Na pewno za każdym razem pokażę jak zastosować daną zasadę z użyciem HTML i CSS. Jeśli popełnię jakiś błąd, lub zapomnę o czymś wspomnieć – upominajcie mnie śmiało.

Dlaczego warto zadbać o typografię? Z jednego punktu widzenia zyskujesz w oczach osób znających się na rzeczy, z innego – warto pamiętać, że czytelnicy są przyzwyczajeni do dobrej typografii z książek czy czasopism. Zadbany tekst łatwiej i przyjemniej się czyta, wydaje się być bardziej naturalny i lżejszy w odbiorze. Warto tym bardziej, że nie kosztuje to dużo, a potrzebna wiedza nie jest trudna – to raczej kilka zasad, które stają się oczywiste zaraz po tym jak się o nich dowiesz.

1. Jednostki wielkości
2. Pamiętaj o odstępach między słowami
3. Wybierz odpowiednią długość wiersza
4. Wyrównywanie tekstu (justowanie)