PX do REM i interlinia
- Pliki nie opuszczają urządzenia
- Działa w przeglądarce
- Za darmo, bez konta, bez znaku wodnego
Converter
Type in any box, the rest follow.Preview
Typography is the craft of making language visible. A good line length and generous leading let the eye glide from one line to the next without losing its place.
Common sizes
Click a row to load it into the converter.| px | rem | em | pt | vw | Line-height |
|---|---|---|---|---|---|
| 10 | 0.625 | 0.625 | 7.5 | 0.694 | 1.7 |
| 12 | 0.75 | 0.75 | 9 | 0.833 | 1.65 |
| 13 | 0.8125 | 0.8125 | 9.75 | 0.903 | 1.63 |
| 14 | 0.875 | 0.875 | 10.5 | 0.972 | 1.6 |
| 15 | 0.9375 | 0.9375 | 11.25 | 1.042 | 1.57 |
| 16 | 1 | 1 | 12 | 1.111 | 1.55 |
| 18 | 1.125 | 1.125 | 13.5 | 1.25 | 1.52 |
| 20 | 1.25 | 1.25 | 15 | 1.389 | 1.5 |
| 24 | 1.5 | 1.5 | 18 | 1.667 | 1.4 |
| 28 | 1.75 | 1.75 | 21 | 1.944 | 1.32 |
| 32 | 2 | 2 | 24 | 2.222 | 1.25 |
| 36 | 2.25 | 2.25 | 27 | 2.5 | 1.23 |
| 40 | 2.5 | 2.5 | 30 | 2.778 | 1.2 |
| 48 | 3 | 3 | 36 | 3.333 | 1.15 |
| 56 | 3.5 | 3.5 | 42 | 3.889 | 1.13 |
| 64 | 4 | 4 | 48 | 4.444 | 1.1 |
| 72 | 4.5 | 4.5 | 54 | 5 | 1.09 |
| 96 | 6 | 6 | 72 | 6.667 | 1.05 |
Type scale
Fluid type with clamp()
Text grows smoothly between two viewport widths and stays fixed outside them.
font-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);
The quick brown fox
Jak używać: PX do REM i interlinia
Konwertuj między px, rem, em, pt, % i vw, używając własnego rozmiaru czcionki korzenia i rodzica, i dostań zalecaną interlinię oraz długość wiersza dla dowolnego rozmiaru. Strona buduje też modularną skalę typograficzną i płynną regułę clamp() dla tekstu responsywnego.
- 1
Ustaw Rozmiar czcionki korzenia, Rozmiar czcionki rodzica i Szerokość obszaru widoku w Kontekście.
- 2
Wpisz wartość w dowolne pole Konwertera; pozostałe jednostki podążają za nią.
- 3
Odczytaj Zalecaną interlinię i Wygodną długość wiersza dla tego rozmiaru.
- 4
Opcjonalnie: zbuduj Skalę typograficzną ze stosunku albo Płynny typ z regułą clamp() i skopiuj CSS.
Częste pytania
Ile pikseli to 1rem?
1rem równa się rozmiarowi czcionki korzenia (<html>), który przeglądarki ustawiają domyślnie na 16 px. Zmień Rozmiar czcionki korzenia, jeśli witryna używa innej podstawy.
Jaka jest różnica między rem a em?
rem jest względem rozmiaru czcionki korzenia; em i % są względem rozmiaru czcionki elementu rodzica. Ustaw Rozmiar czcionki rodzica, aby poprawnie przeliczyć em.
Jak wybierana jest interlinia?
Idzie za zwykłą praktyką typograficzną: około 1,5 dla tekstu zasadniczego i ciaśniejsze prowadzenie dla dużych nagłówków. Pokazana jest też wersja przyciągnięta do siatki 4 px.
Co robi generator clamp()?
Pisze font-size, który płynnie rośnie między rozmiarem minimalnym a maksymalnym na dwóch szerokościach obszaru widoku i zostaje stały poza nimi. Symuluj szerokość obszaru widoku pokazuje wynik przy dowolnej szerokości.
Czy mogę przeliczać punkty do druku?
Tak. pt używa stosunku CSS 72 pt do 96 px, więc 12 pt równa się 16 px.