PX เป็น REM และความสูงบรรทัด
- ไฟล์ไม่ออกจากอุปกรณ์ของคุณ
- ทำงานในเบราว์เซอร์
- ฟรี ไม่ต้องสมัคร ไม่มีลายน้ำ
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 เป็น REM และความสูงบรรทัด
แปลงระหว่าง px, rem, em, pt, % และ vw โดยใช้ขนาดฟอนต์รากและพ่อแม่ของคุณเอง และได้ความสูงบรรทัดกับความยาวบรรทัดที่แนะนำสำหรับขนาดใดก็ได้ หน้านี้ยังสร้างสเกลตัวอักษรแบบโมดูลาร์และกฎ clamp() แบบไหลสำหรับข้อความที่ตอบสนอง
- 1
ตั้งขนาดฟอนต์ราก ขนาดฟอนต์พ่อแม่ และความกว้างวิวพอร์ตใต้บริบท
- 2
พิมพ์ค่าในช่องใดก็ได้ในตัวแปลง หน่วยอื่นจะตาม
- 3
อ่านความสูงบรรทัดที่แนะนำและความยาวบรรทัดที่สบายสำหรับขนาดนั้น
- 4
ถ้าต้องการ: สร้างสเกลตัวอักษรจากอัตราส่วน หรือตัวอักษรไหลด้วยกฎ clamp() แล้วคัดลอก CSS
คำถามที่พบบ่อย
1rem เท่ากับกี่พิกเซล?
1rem เท่ากับขนาดฟอนต์ของราก (<html>) ซึ่งเบราว์เซอร์ตั้งเป็น 16 px โดยค่าเริ่มต้น เปลี่ยนขนาดฟอนต์รากหากไซต์ของคุณใช้ฐานอื่น
rem กับ em ต่างกันอย่างไร?
rem สัมพัทธ์กับขนาดฟอนต์ราก em และ % สัมพัทธ์กับขนาดฟอนต์ขององค์ประกอบพ่อแม่ ตั้งขนาดฟอนต์พ่อแม่เพื่อแปลง em ได้ถูกต้อง
ความสูงบรรทัดถูกเลือกอย่างไร?
ตามแนวปฏิบัติตัวอักษรที่ใช้กัน: ประมาณ 1.5 สำหรับข้อความเนื้อหา และระยะบรรทัดที่แน่นกว่าสำหรับหัวเรื่องใหญ่ เวอร์ชันที่กระโดดไปตาราง 4 px ถูกแสดงด้วย
ตัวสร้าง clamp() ทำอะไร?
มันเขียน font-size ที่โตอย่างลื่นระหว่างขนาดต่ำสุดและสูงสุดข้ามความกว้างวิวพอร์ตสองค่า และคงที่นอกช่วงนั้น จำลองความกว้างวิวพอร์ตแสดงผลที่ความกว้างใดก็ได้
แปลงพอยต์สำหรับพิมพ์ได้หรือไม่?
ได้ pt ใช้อัตราส่วน CSS ที่ 72 pt ต่อ 96 px ดังนั้น 12 pt เท่ากับ 16 px