Piksel to nie kropka: mała historia jednostek typografii

Wyobraź sobie scenę z życia studia projektowego. Projektant kończy makietę aplikacji: nagłówki mają 24 piksele, tekst główny 16. Gotowy plik trafia do drukarni, gdzie zniecierpliwiony zecer odsyła go z żądaniem podania stopnia pisma w punktach i szerokości łamów w cycerach. Nad wszystkim czuwa klient, który po próbnym wydruku przykłada do papieru zwykłą linijkę wyskalowaną w milimetrach i stwierdza, że nic się nie zgadza z jego oczekiwaniami.

Wszyscy troje mówią o tym samym — o wielkości liter i przestrzeni na stronie — a jednak posługują się zupełnie innymi językami. Ta pozorna wieża Babel nie jest wynikiem braku standaryzacji, lecz efektem fascynującej ewolucji, która rozegrała się na przestrzeni ostatnich pięciu stuleci. Żeby projektować teksty na papier i na ekrany naraz, trzeba zrozumieć, skąd wzięły się te odmienne miary i jak precyzyjnie przekładać je między sobą.

Anatomia ołowiu: skąd wziął się punkt

Aby zrozumieć, dlaczego dokumenty w edytorach tekstu domyślnie składa się w „punktach", trzeba cofnąć się do epoki druku ołowianego. Tekst powstawał wtedy z metalowych klocków — czcionek — układanych ręcznie w wierszownikach.

Projektanci często utożsamiają fizyczny rozmiar wydrukowanej litery z jej stopniem pisma. To jednak błąd zakorzeniony w budowie dawnej czcionki. Stopień pisma nie określał wysokości samej litery, lecz wysokość metalowego klocka (tzw. wysokość stożka), na którym literę odlano. Na klocku, oprócz rysunku litery (oczka), musiała zmieścić się wolna przestrzeń nad i pod znakiem, zapewniająca, że wydłużenia górne (jak w „b") i dolne (jak w „p") sąsiednich linijek nie będą się zderzać. W efekcie dwie czcionki o identycznym stopniu pisma — na przykład 12 punktów — mogą po wydrukowaniu wyraźnie różnić się wielkością optyczną, jeśli jedna ma wyższą wysokość x (wysokość małych liter) kosztem mniejszych odstępów.

Zanim wprowadzono standaryzację, odlewnie w Europie i Ameryce stosowały własne, arbitralne rozmiary. Pierwszy krok ku matematycznemu porządkowi wykonał w 1737 roku francuski rytownik Pierre-Simon Fournier, dzieląc stopę francuską na punkty. Pomysł udoskonalił w 1775 roku François-Ambroise Didot, wiążąc punkt bezpośrednio z francuską stopą królewską (pied de roi) o długości 324,84 mm. Jeden punkt Didota zdefiniowano jako 1/72 cala francuskiego, czyli ≈ 0,376 mm. System ten stał się standardem w Europie kontynentalnej, w tym w Polsce. W 1879 roku niemiecki konstruktor Hermann Berthold dopasował go precyzyjnie do metra, ustalając 1 punkt na 0,37594 mm.

Równolegle w świecie anglosaskim rozwijał się system oparty na nieco krótszym calu angielskim, w którym pica odpowiadała 12 punktom, a cal mieścił dokładnie 6 pic. Punkt angloamerykański wynosił więc 1/72 cala angielskiego, czyli ≈ 0,3515 mm.

Zderzenie tych tradycji groziło paraliżem u progu komputerowego składu tekstu (DTP) na początku lat 80. Twórcy języka PostScript — technologicznego kręgosłupa pierwszych Macintoshy i drukarek laserowych Apple — przecięli węzeł radykalnie. Odrzucili ułamkowe niuanse i zdefiniowali punkt PostScript jako dokładnie 1/72 cala międzynarodowego (25,4 mm), czyli ≈ 0,3528 mm. To ta jednostka stała się globalnym standardem cyfrowym. Gdy dziś w edytorze ustawiasz rozmiar „12", nie używasz punktu Didota, lecz punktu PostScript — europejską tradycję wymieniono na matematyczną prostotę cyfrowego cala.

O srokach i rzymskim mówcy: skąd nazwy pica i cycero

Gdy zecer planował szerokość kolumny, operowanie pojedynczymi punktami było niepraktyczne. Wprowadzono więc jednostki zbiorcze: pica w krajach anglosaskich i cycero w Europie. Obie liczą dokładnie 12 punktów, ale — z powodu różnicy między punktem Didota a PostScriptem — mają różny wymiar fizyczny. Historyczne cycero (12 pt Didota) mierzy około 4,51 mm, a współczesna pica PostScript to dokładnie 1/6 cala, czyli 4,2333 mm. To właśnie tę drugą, cyfrową wartość przyjmuje polska nazwa „cycero" w konwerterze typograficznym tego serwisu: 1 cycero = 1 pica = 12 pt = 16 px = 4,2333 mm.

Obie nazwy mają barwną etymologię. Łacińskie pica oznacza „srokę". W XV wieku w Anglii mianem tym określano Directorium Sacerdotum — kościelną księgę z tabelami wyliczania świąt ruchomych. Jej strony, gęsto zadrukowane drobnym pismem z licznymi czerwonymi rubrykami, kojarzyły się czytelnikom z czarno-białym, „pstrym" upierzeniem sroki. Ponieważ księgi te składano czcionką o stopniu odpowiadającym dzisiejszym 12 punktom, drukarze zaczęli tak nazywać ten rozmiar pisma.

Nazwa „cycero" odsyła wprost do rzymskiego mówcy Marka Tuliusza Cycerona. W 1465 roku w Moguncji Peter Schöffer i Johann Fust wydali drukowane wydanie jego traktatu De officiis (O powinnościach), złożone niezwykle czytelną czcionką o stopniu odpowiadającym późniejszym 12 punktom Didota. Dzieło zyskało w Europie taką popularność, że drukarze zaczęli określać ten rozmiar mianem „cycera". Nazwa przetrwała stulecia i była podstawą planowania łamów w Polsce aż do zmierzchu składu gorącego.

Wojna standardów: 72 kontra 96 DPI

Wraz z komputerami osobistymi pojawił się problem: jak odwzorować fizyczne jednostki drukarskie na ekranie? Rozstrzygnęła to rywalizacja Apple z Microsoftem.

Gdy w 1984 roku debiutował Macintosh, inżynierowie zaprojektowali 9-calowy monitor o rozdzielczości 512 × 342 piksele, co dawało dokładnie 72 piksele na cal (PPI). Wybór był genialny w prostocie: skoro cal zawiera 72 punkty PostScript, to jeden piksel na ekranie Macintosha odpowiadał jednemu punktowi na papierze (1 pt = 1 px). Projektant widział tekst w skali 1:1 — linia długości 72 pikseli po wydruku miała dokładnie jeden cal.

Microsoft w systemie Windows wyszedł z innych założeń. Wczesne monitory PC miały zbliżoną gęstość fizyczną (ok. 70–75 PPI), ale drobne czcionki biurowe o wielkości 10 punktów były na nich niemal nieczytelne — brakowało pikseli, by wyrenderować szeryfy. Microsoft wprowadził więc logiczną rozdzielczość 96 DPI, o 1/3 wyższą niż rzeczywista. System sztucznie powiększał interfejs: czcionka 10 pt, którą Mac rysował 10 pikselami, w Windows dostawała budżet około 13 pikseli. Kosztem wierności fizycznej zyskała czytelność.

Gdy pod koniec lat 90. konsorcjum W3C tworzyło specyfikację CSS dla rozwijającej się sieci, musiało wybrać jedną konwencję — i przyjęło standard Microsoftu. Tak 96 DPI na stałe weszło do architektury internetu, a stosunek logicznego cala do piksela CSS zablokowano jako 1:96. Właśnie dlatego 1 cal = 96 px, 1 pt = 4/3 px, a 1 mm = 96/25,4 ≈ 3,7795 px.

Piksel to nie kropka na ekranie

Wielu początkujących zakłada intuicyjnie, że jeden piksel w kodzie CSS (1px) odpowiada jednej fizycznej diodzie na matrycy. To nieprawda. Piksel CSS jest jednostką abstrakcyjną, zdefiniowaną przez W3C jako piksel referencyjny.

Zgodnie ze specyfikacją CSS Values and Units, piksel referencyjny to nie element sprzętowy, lecz miara kątowa: kąt widzenia jednego piksela na urządzeniu o gęstości 96 DPI oglądanym z odległości wyciągniętej ręki (przyjęto nominalne 28 cali, ok. 71 cm). Kąt ten wynosi około 0,0213°. W takich warunkach fizyczny rozmiar piksela to około 0,26 mm, czyli dokładnie 1/96 cala. Kluczowe jest to, że rozmiar referencyjny skaluje się z typową odległością patrzenia — dla trzymanego bliżej smartfona maleje, dla oglądanego z kanapy telewizora rośnie. Dzięki temu tekst o rozmiarze 16 px zachowuje zbliżoną postrzeganą wielkość na zegarku, telefonie, laptopie i wielkim telewizorze.

Gdyby przeglądarki mapowały piksele CSS wprost na fizyczne diody w stosunku 1:1, rewolucja ekranów o wysokiej gęstości (Retina, AMOLED) zniszczyłaby czytelność sieci — ekran 220 PPI wyświetliłby standardowy tekst 16 px jako mikroskopijną plamkę o wysokości poniżej dwóch milimetrów. Rozwiązaniem jest współczynnik gęstości pikseli, DPR (Device Pixel Ratio) — stosunek liczby fizycznych pikseli do logicznych. Na ekranie o DPR = 2 jeden piksel CSS renderuje siatka 2 × 2, czyli 4 fizyczne diody; na flagowych telefonach DPR bywa 3, więc jeden piksel kodu składa się z 9 diod. Piksel CSS pilnuje proporcji i czytelności, a fizyczna dioda odpowiada tylko za ostrość krawędzi.

Jak istotny to podział, pokazują standardy dostępności WCAG 2.2. Kryterium 1.4.10 (Reflow) wymaga, by treść dała się powiększyć i zmieścić w szerokości 320 pikseli CSS bez przewijania w poziomie — zapis wprost odwołuje się do pikseli CSS jako jednostek niezależnych od gęstości sprzętu.

em i rem: elastyczność jako fundament dostępności

Kolejna pułapka to przekonanie, że 1em zawsze równa się 16 px. Owszem, domyślny rozmiar pisma w większości przeglądarek to 16 px — ale utożsamianie em ze stałą liczbą zaprzepaszcza jego największą zaletę: względność.

Jednostka em wywodzi się z typografii metalowej, gdzie oznaczała kwadrat o boku równym stopniowi pisma (mniej więcej szerokość wielkiej litery „M"). W CSS em jest jednostką względną, liczoną wobec aktualnego rozmiaru czcionki danego elementu. Jeśli akapit ma font-size: 20px, to dla niego 1em = 20 px, a margin-bottom: 1.5em da odstęp 30 px. Ta kaskadowość bywa uciążliwa: gdy zagnieżdżona lista dziedziczy 0.8em po liście o 0.8em, tekst kurczy się do 0,8 × 0,8 = 0,64 rozmiaru bazowego.

Rozwiązaniem jest rem (root em), który zawsze odnosi się do rozmiaru czcionki elementu głównego dokumentu (html). Jeśli korzeń ma 16 px, to 1.5rem zawsze wynosi 24 px, niezależnie od zagnieżdżenia. Projektowanie na jednostkach względnych to fundament dostępności: osoby niedowidzące często podnoszą domyślny rozmiar pisma w ustawieniach (np. z 16 do 24 px). Układ zbudowany na rem przeskaluje się wtedy harmonijnie — kolumny, marginesy i nagłówki urosną proporcjonalnie. Sztywne wartości w pikselach powiększą tylko sam tekst, który zacznie nachodzić na sąsiednie elementy i wypadać poza kontenery.

Matematyczny pomost: tabela konwersji

Poniższe wartości zakładają powszechną bazę: ekran 96 DPI i domyślny rozmiar czcionki korzenia równy 16 px. Wszystkie te jednostki przelicza między sobą konwerter typograficzny w tym serwisie.

Analiza tych liczb ujawnia elegancki pomost między dawnym zecerstwem a współczesnym internetem: standardowe 16 px przeglądarki odpowiada dokładnie 12 punktom (jednej pice), które przez dekady dominowały w składzie tekstu. Dzięki temu przejście z ery ołowiu do projektowania cyfrowego zachowało płynność proporcji.

Trzy mity pod lupą faktów

Mit 1: „Piksel to fizyczna kropka na ekranie". Fałsz. Piksel CSS jest jednostką logiczną i referencyjną, zdefiniowaną przez kąt widzenia oka. Na ekranach Hi-DPI jeden piksel CSS renderuje siatka kilku fizycznych diod (2 × 2, a nawet 3 × 3). Piksel CSS pilnuje spójności proporcji, a dioda — ostrości.

Mit 2: „Punkt typograficzny jest wszędzie taki sam". Oprogramowanie ujednoliciło punkt do standardu PostScript (1/72 cala = 0,3528 mm), ale historyczny punkt Didota, stosowany przez stulecia w Europie kontynentalnej i w Polsce, ma inny wymiar — około 0,376 mm. Nadal spotyka się go w tradycyjnych oficynach i klasycznych normach zecerskich.

Mit 3: „1 em zawsze równa się 16 px". 1em to jednostka dynamiczna, określająca rozmiar pisma dokładnie tego elementu, na którym jej użyto. 16 px to jedynie fabryczna wartość domyślna przeglądarek. Zmień rozmiar czcionki rodzica na 24 px, a w tym kontekście 1em zacznie wynosić 24 px.

Każda miara ma swój świat

Zrozumienie tych zależności pozwala świadomie projektować kompozycje, które trzymają się na papierze i na ekranie. Do fizycznego druku (wizytówki, plakaty, książki) niezastąpione pozostają jednostki bezwzględne — punkty (pt) i milimetry (mm) — bo gwarantują pełną kontrolę nad rozmiarem na papierze. W projektach cyfrowych prymat wiodą jednostki względne, rem i em, które pozwalają skalować interfejs zgodnie z potrzebami użytkownika — a to warunek dostępności. Piksel CSS zostawmy głównie do cienkich obramowań, drobnych cieni i precyzyjnej integracji z grafiką bitmapową.

Porzucenie sztywnych struktur pikselowych na rzecz dynamicznego skalowania to nie tylko wygoda kodowania. To ukłon w stronę inkluzywności — i uznanie, że projektant, zecer i klient wcale nie mówili różnymi językami. Mówili o tej samej literze, tyle że każdy mierzył ją narzędziem swojej epoki.

Dalsza lektura

• Robert Bringhurst, The Elements of Typographic Style — klasyka omawiająca historyczną ewolucję stopni pisma i tradycyjne proporcje kolumny.
• Josef Müller-Brockmann, Systemy siatek w projektowaniu graficznym (polskie wyd. d2d, 2020) — fundamentalny podręcznik o siatkach konstrukcyjnych w druku i na ekranie.
• W3C, CSS Values and Units Module Level 3 & 4 — oficjalne specyfikacje precyzyjnie definiujące interpretację jednostek przez przeglądarki.
• W3C, Web Content Accessibility Guidelines (WCAG) 2.2 — kryterium 1.4.10 (Reflow) i rola pikseli CSS w dostępności.