Przelicznik PT na PX

Przelicznik PT na PX zamienia punkty na piksele — i piksele z powrotem na punkty — zarówno na potrzeby ekranu, jak i druku. Większość przeliczników podaje jedną liczbę na podstawie stałej proporcji CSS 1pt = 1.3333px. Ten wynik jest poprawny w przeglądarce, ale niemal wszędzie indziej nie, ponieważ punkt jest jednostką fizyczną, a liczba pikseli przypadających na niego zależy od rozdzielczości wyjściowej. To narzędzie podaje oba wyniki: wartość CSS, którą rzeczywiście wyrenderuje przeglądarka, oraz wartość w pikselach urządzenia przy 72, 150, 300, 600 lub dowolnym niestandardowym DPI, a także rzeczywisty rozmiar fizyczny w milimetrach i calach na prawdziwej linijce.

Wzór konwersji PT na PX

Jeden punkt jest dokładnie zdefiniowany jako jedna siedemdziesiąta druga cala. Jeden cal zawiera tyle pikseli, ile wskazuje rozdzielczość wyjściowa. Połącz te dwa fakty, a otrzymasz konwersję:

W WWW rozdzielczość nie jest zmienną. Specyfikacja CSS z definicji ustala 1in = 96px, więc przeglądarka zawsze używa wartości 96, a wzór upraszcza się do stałej:

Dlatego 12pt to 16px w każdej przeglądarce i na każdym urządzeniu, niezależnie od tego, czy jest to panel laptopa 1×, czy ekran telefonu 3×. Piksel CSS jest jednostką referencyjną, a nie pikselem sprzętowym.

Jeden cal, trzy nazwy

Najłatwiej zachować właściwe proporcje jednostek, pamiętając, że wszystkie opisują tę samą odległość fizyczną. Każdy pasek poniżej ma dokładnie jeden cal szerokości:

Tabela konwersji PT na PX

Kolumna WWW jest tą, której potrzebujesz dla CSS. Kolumna 300 DPI przyda się podczas eksportowania PDF do obrazu rastrowego, tworzenia pliku do druku lub ustawiania rozmiaru tekstu w bitmapie przeznaczonej do drukowania.

Dlaczego ten sam rozmiar punktowy daje różną liczbę pikseli

To jedyna rzecz, która często wprowadza w błąd, więc warto powiedzieć ją wprost. Rozmiar fizyczny nigdy się nie zmienia: 12pt to zawsze jedna szósta cala. Zmienia się tylko dokładność próbkowania tego cala.

• 72 DPI — historyczna rozdzielczość ekranu komputerów Macintosh, wybrana dokładnie po to, by 1pt = 1px. Nadal domyślna w niektórych starszych potokach przetwarzania obrazów, dlatego tekst 12pt bywa eksportowany do rozczarowujących 12 pikseli.
• 96 DPI — domyślna Windows i rozdzielczość referencyjna, względem której definiowany jest CSS. To wynik dla WWW i wartość używana przez przeglądarkę.
• 150 DPI — jakość druku roboczego lub praca wielkoformatowa przeznaczona do czytania z odległości.
• 300 DPI — standard druku komercyjnego. Podpis 12pt w eksporcie 300 DPI potrzebuje wysokości 50 pikseli, a nie 16.
• 600 DPI — precyzyjna grafika liniowa, druk wysokiej jakości i wydruk laserowy, gdy znaczenie mają cienkie linie.

Jeśli kiedykolwiek eksportowałeś grafikę w „właściwym rozmiarze”, a tekst wyszedł miękki i rozpikselowany, ta proporcja jest niemal zawsze przyczyną: układ mierzono w punktach, a raster wygenerowano przy 72 lub 96 DPI zamiast 300.

Co właściwie mierzy rozmiar punktowy

Font 12pt nie oznacza 12 punktów widocznej litery. Rozmiar punktowy opisuje kwadrat em — niewidoczną siatkę projektową, na której rysowany jest krój pisma. To, jaką część tego kwadratu zajmują litery, zależy wyłącznie od projektanta kroju, dlatego dwa fonty ustawione w tym samym rozmiarze punktowym mogą wyglądać na bardzo różne pod względem skali.

Czy w CSS używać pt czy px?

W stylach ekranowych używaj px lub rem. Punkty są w CSS jednostką absolutną, dokładnie tak jak px, więc mają tę samą wadę z punktu widzenia dostępności: tekst o rozmiarze pt ignoruje preferencję rozmiaru czcionki w przeglądarce odwiedzającego. Używanie pt powoduje też nieporozumienia, ponieważ osoba czytająca arkusz stylów może założyć, że chodzi o fizyczne punkty na urządzeniu wyjściowym, choć tak nie jest.

Miejsce, w którym pt naprawdę ma sens, to arkusz stylów do druku, ponieważ wynik jest faktycznie mierzony w calach:

@media print {
  body { font-size: 11pt; line-height: 1.45; }
  h1   { font-size: 24pt; }
  h2   { font-size: 18pt; }
  .no-print { display: none; }
}

Przeglądarki odnoszą te punkty do rzeczywistego rozmiaru papieru podczas generowania zadania drukowania, więc tekst 11pt rzeczywiście ma na stronie 11pt — taki sam rozmiar, jaki uzyskałby edytor tekstu.

Konwertowanie dokumentu Word lub InDesign do WWW

1. Pobierz rozmiary punktowe bezpośrednio z arkusza stylów dokumentu — zwykle 11pt dla tekstu podstawowego, 16pt dla śródtytułów, 24pt dla nagłówków.
2. Wklej je wszystkie naraz do pola wartości, oddzielone przecinkami, pozostawiając rozdzielczość na 96.
3. Odczytaj kolumnę pikseli CSS. 11pt staje się 14.67px, 16pt staje się 21.33px, a 24pt staje się 32px.
4. Przed wdrożeniem zaokrąglij do uporządkowanej skali. Typografia drukowana toleruje nietypowe ułamki; skale typograficzne WWW lepiej wyglądają przy całych lub połówkowych pikselach, więc 14.67px zwykle staje się 15px lub 16px.
5. Końcowe wartości pikselowe przelicz na rem, jeśli system projektowy korzysta z jednostek względnych.

Powiązane bezwzględne jednostki CSS

Punkty należą do niewielkiej rodziny jednostek bezwzględnych, które CSS definiuje względem tego samego cala o długości 96 pikseli. Znajomość całej rodziny sprawia, że konwersje są banalne:

• 1in = 96px = 72pt = 6pc = 25.4mm
• 1pc (pika) = 12pt = 16px
• 1cm = 37.795px ≈ 28.35pt
• 1mm = 3.7795px ≈ 2.835pt
• 1Q (ćwierć milimetra) = 0.945px

Jak korzystać z tego przelicznika

1. Wybierz kierunek: pt → px lub px → pt.
2. Wprowadź wartości: jedną liczbę albo całą skalę typograficzną oddzieloną przecinkami lub spacjami (maksymalnie 20 naraz). Jednostki końcowe, takie jak 12pt, są akceptowane i ignorowane.
3. Ustaw rozdzielczość wyjściową: pozostaw 96 DPI dla CSS i prac internetowych albo wybierz przycisk 72, 150, 300 lub 600 DPI.
4. Kliknij Konwertuj: odczytaj wynik, porównanie DPI, podgląd typografii w rzeczywistym rozmiarze, linijkę milimetrową i skalę referencyjną.
5. Skopiuj CSS: jeden przycisk kopiuje każdą deklarację font-size z zachowaną w komentarzu źródłową wartością punktową.

Najczęściej zadawane pytania

Jak przeliczyć pt na px?

Pomnóż wartość punktową przez rozdzielczość wyjściową i podziel przez 72, ponieważ jeden punkt to jedna siedemdziesiąta druga cala. W WWW rozdzielczość jest stała i wynosi 96 DPI, więc px = pt × 1.3333. Na przykład 12pt to 16px.

Ile pikseli ma 12pt?

W CSS i w każdej przeglądarce 12pt to dokładnie 16px. W wydruku lub pliku obrazu 300 DPI ten sam tekst 12pt ma wysokość 50 pikseli, a przy 600 DPI — 100 pikseli, ponieważ liczba pikseli skaluje się wraz z rozdzielczością, podczas gdy rozmiar fizyczny pozostaje taki sam.

Czy 1pt zawsze równa się 1.3333px?

W CSS zawsze wynosi 1.3333px, ponieważ specyfikacja CSS ustala jeden cal jako dokładnie 96 pikseli. Nie dotyczy to wyjścia rastrowego: przy 300 DPI jeden punkt to 4.1667 pikseli urządzenia, a przy 72 DPI jeden punkt to dokładnie jeden piksel.

Jaka jest różnica między pt i px?

Punkt jest fizyczną jednostką typograficzną równą jednej siedemdziesiątej drugiej cala, używaną w druku, edytorach tekstu i DTP. Piksel jest jednostką wyświetlania. W CSS piksel również jest zakotwiczony w fizycznym odniesieniu wynoszącym jedną dziewięćdziesiątą szóstą cala, dlatego obie jednostki przeliczają się w stałej proporcji w WWW, ale nie w plikach obrazów.

Czy w CSS używać pt czy px?

Używaj px lub rem w stylach ekranowych, a pt pozostaw dla arkuszy stylów do druku. Punkty są bezwzględną jednostką fizyczną, więc tekst ustawiony w pt ignoruje preferencję rozmiaru czcionki w przeglądarce odwiedzającego. W bloku @media print pt jest naturalną jednostką, ponieważ wynik jest rzeczywiście mierzony w calach.

Jakiego DPI używać do druku?

300 DPI to standard dla druku komercyjnego i wydruków fotograficznych, 150 DPI jest odpowiednie dla wersji roboczych i dużych formatów oglądanych z daleka, a 600 DPI stosuje się do precyzyjnej grafiki liniowej i druku wysokiej jakości. Ustaw w polu rozdzielczości wartość oczekiwaną przez drukarkę lub okno eksportu.

Dlaczego tekst 12pt nie ma na ekranie wysokości 12 punktów?

Rozmiar punktowy opisuje kwadrat em fontu, czyli siatkę projektową, na której rysowane są litery, a nie wysokość dowolnego pojedynczego glifu. Wysokość wersalików wynosi zwykle około 70% rozmiaru em, a wysokość x małej litery około 50%, więc wersaliki 12pt mają mniej więcej 8.4pt wysokości.

Czy współczynnik pikseli urządzenia zmienia konwersję pt na px?

Nie. Na ekranie 2× lub 3× przeglądarka nadal zgłasza 12pt jako 16 pikseli CSS, a następnie renderuje te 16 pikseli CSS za pomocą 32 lub 48 pikseli sprzętowych. Piksel CSS jest jednostką referencyjną, więc liczby w arkuszu stylów nigdy się nie zmieniają — dodatkowe piksele sprzętowe sprawiają tylko, że ten sam rozmiar wygląda ostrzej.

Dodatkowe materiały

• Jednostki długości CSS - MDN
• Długości bezwzględne - wartości CSS W3C