Przelicz piksele na punkty typograficzne

Jeden piksel odpowiada 0,75 punktu, bo standard CSS ustala, że w calu mieści się 96 pikseli i 72 punkty [1]. Z tego wychodzi para, która wraca w każdym projekcie: 16 px to dokładnie 12 pt, a 24 px to 18 pt.

Przeliczenie w tę stronę robi się wtedy, gdy materiał powstał na ekranie, a trafia do świata druku. Programy do składu, klienty poczty, arkusze kalkulacyjne i format PDF mierzą tekst oraz strony w punktach, więc makieta opisana w pikselach wymaga przełożenia na ich jednostkę.

Konwerter sprawdza się dla osób przygotowujących plik z ekranu do drukarni, dla programistów odczytujących wymiary strony w PDF-ie oraz dla projektantów interfejsów mobilnych, gdzie punkt znaczy coś zupełnie innego niż w druku.

Dalej znajdziesz tabelę rozmiarów tekstu, tabelę dużych wartości, wymiary dziewięciu formatów strony w punktach PDF oraz zestawienie punktów i pikseli na ekranach Apple. Drogę w przeciwną stronę obsługuje konwerter punktów na piksele.

Wzór jest krótki: liczba punktów = liczba pikseli × 72 ÷ 96, czyli mnożenie przez 0,75. Dwadzieścia pikseli daje 15 pt, 40 px daje 30 pt, a 96 px to równe 72 pt, czyli dokładnie jeden cal.

Wynik wychodzi okrągły za każdym razem, gdy liczba pikseli dzieli się przez cztery: 12 px to 9 pt, 16 px to 12 pt, 20 px to 15 pt, 24 px to 18 pt. Przy pozostałych wartościach pojawiają się ćwiartki punktu — 15 px daje 11,25 pt, a 18 px daje 13,5 pt. Programy do składu przyjmują takie ułamki bez zastrzeżeń.

Mnożnik 0,75 obowiązuje przy gęstości 96 pikseli na cal, którą standard CSS przyjmuje dla ekranu i dla druku z przeglądarki [1]. Gdy przygotowujesz grafikę rastrową w innej rozdzielczości, wymiar fizyczny policzysz konwerterem px na mm z regulowanym DPI. Punkt trzyma się tej gęstości niezależnie od ustawień czytelnika, a jednostka rem idzie za rozmiarem tekstu w przeglądarce: przy bazie 16 px jeden piksel to 0,0625 rem, co policzy konwerter px na rem.

Format PDF opisuje położenie każdego elementu w przestrzeni użytkownika, a jej domyślna jednostka to 1/72 cala, czyli dokładnie punkt typograficzny. Wpis UserUnit w opisie strony może tę wartość zmienić, a kiedy go brakuje, obowiązuje 1/72 cala [2]. Początek układu współrzędnych leży w lewym dolnym rogu strony i oś pionowa rośnie do góry.

Dlatego kartka A4 ma w pliku PDF wymiary 595 × 842 pt, a amerykański Letter 612 × 792 pt. Te liczby zobaczysz w bibliotekach do generowania dokumentów, w logach narzędzi drukarskich i w polu rozmiaru strony w Acrobacie po przełączeniu jednostki na punkty.

Jeżeli robisz raport albo fakturę z kodu i masz wymiary makiety w pikselach, przemnóż je przez 0,75, a otrzymasz gotowe współrzędne strony. Szerokość 800 px daje 600 pt, czyli o pięć punktów więcej niż 595 pt szerokości A4 — cała zawartość zmieści się na stronie dopiero przy makiecie o szerokości 793 px.

Apple nazywa punktem podstawową jednostkę układu w swoich systemach, ale mierzy nią ekran, nie papier. Właściwość scale opisuje ją wprost jako zależność między punktami, czyli logiczną przestrzenią współrzędnych, a pikselami, czyli przestrzenią urządzenia [3]. Wartość 1,0 oznacza, że punkt równa się pikselowi, wartość 2,0 rozkłada go na dwa piksele, a 3,0 na trzy.

W praktyce projektant rysuje iPhone'a w siatce 402 punktów szerokości, a wyświetlacz pokazuje 1206 pikseli [4]. Punkt iOS przelicza się więc przez współczynnik skali urządzenia, a mnożnik 0,75 z tej strony obsługuje punkt typograficzny.

Android rozwiązał to samo zadanie pod nazwą dp, czyli piksel niezależny od gęstości. Punktem odniesienia jest tam ekran o gęstości 160 dpi, a wzór ma postać px = dp × (dpi ÷ 160). Dokumentacja podaje go wprost i jednocześnie zaleca, żeby w kodzie sięgać po TypedValue.applyDimension() zamiast wpisywać rachunek na sztywno [5]. Dwanaście punktów to jedna pika, więc wynik 240 pt można podać także jako 20 pik — konwerter pikseli na piki liczy od razu w tej jednostce.