PX'ten REM'e ve Satır Yüksekliği
- Dosyalar cihazınızdan çıkmaz
- Tarayıcıda çalışır
- Ücretsiz, kayıt yok, filigran yok
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
PX'ten REM'e ve Satır Yüksekliği nasıl kullanılır
Kendi kök ve üst öğe yazı boyutlarınızı kullanarak px, rem, em, pt, % ve vw arasında dönüştürün ve herhangi bir boyut için önerilen bir satır yüksekliği ile satır uzunluğu alın. Sayfa ayrıca modüler bir tip ölçeği ve duyarlı metin için bir akışkan clamp() kuralı kurar.
- 1
Bağlam altında Kök yazı boyutu, Üst öğe yazı boyutu ve Görüntü alanı genişliği'ni ayarlayın.
- 2
Dönüştürücü'deki herhangi bir kutuya bir değer yazın; diğer birimler izler.
- 3
O boyut için Önerilen satır yüksekliği ve Rahat satır uzunluğu'nu okuyun.
- 4
İsteğe bağlı: bir orandan bir Tip ölçeği veya clamp() kuralıyla Akışkan tip kurun ve CSS'i kopyalayın.
Sık sorulan sorular
1rem kaç pikseldir?
1rem kök (<html>) yazı boyutuna eşittir; tarayıcılar bunu varsayılan olarak 16 px ayarlar. Siteniz farklı bir taban kullanıyorsa Kök yazı boyutu'nu değiştirin.
rem ile em arasındaki fark nedir?
rem kök yazı boyutuna göredir; em ve % üst öğenin yazı boyutuna göredir. em'i doğru dönüştürmek için Üst öğe yazı boyutu'nu ayarlayın.
Satır yüksekliği nasıl seçilir?
Yaygın tipografi uygulamasını izler: gövde metni için yaklaşık 1,5 ve büyük başlıklar için daha sıkı satır aralığı. 4 px ızgaraya yapışmış bir sürüm de gösterilir.
clamp() üreteci ne yapar?
İki görüntü alanı genişliği arasında bir en az ve en çok boyut arasında pürüzsüz büyüyen ve dışında sabit kalan bir font-size yazar. Görüntü alanı genişliğini simüle et sonucu herhangi bir genişlikte gösterir.
Baskı için punto dönüştürebilir miyim?
Evet. pt, 72 pt'nin 96 px'e CSS oranını kullanır, bu yüzden 12 pt 16 px'e eşittir.