PX ke REM & Tinggi Baris
- File tidak meninggalkan perangkat Anda
- Berjalan di browser
- Gratis, tanpa daftar, tanpa watermark
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
Cara memakai PX ke REM & Tinggi Baris
Konversi antara px, rem, em, pt, %, dan vw memakai ukuran font akar dan induk Anda sendiri, serta dapatkan tinggi baris dan panjang baris yang direkomendasikan untuk ukuran apa pun. Halaman ini juga membangun skala tipe modular dan aturan clamp() cair untuk teks responsif.
- 1
Atur Ukuran font akar, Ukuran font induk, dan Lebar viewport di Konteks.
- 2
Ketik nilai ke kotak mana pun di Konverter; satuan lain mengikuti.
- 3
Baca Tinggi baris yang direkomendasikan dan Panjang baris yang nyaman untuk ukuran itu.
- 4
Opsional: bangun Skala tipe dari rasio, atau Tipe cair dengan aturan clamp(), lalu salin CSS.
Pertanyaan umum
Berapa piksel 1rem?
1rem sama dengan ukuran font akar (<html>), yang diatur browser ke 16 px secara bawaan. Ubah Ukuran font akar jika situs Anda memakai dasar yang berbeda.
Apa bedanya rem dan em?
rem relatif terhadap ukuran font akar; em dan % relatif terhadap ukuran font elemen induk. Atur Ukuran font induk untuk mengonversi em dengan benar.
Bagaimana tinggi baris dipilih?
Ini mengikuti praktik tipografi yang umum: sekitar 1,5 untuk teks isi dan leading yang lebih rapat untuk judul besar. Versi yang dijepit ke kisi 4 px juga ditampilkan.
Apa yang dilakukan pembangkit clamp()?
Ini menulis font-size yang tumbuh mulus antara ukuran min dan maks di dua lebar viewport dan tetap di luarnya. Simulasikan lebar viewport menampilkan hasil pada lebar apa pun.
Bisakah saya mengonversi poin untuk cetak?
Ya. pt memakai rasio CSS 72 pt terhadap 96 px, jadi 12 pt sama dengan 16 px.