من 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 بكسل افتراضيًا. غيّر «حجم خط الجذر» إذا كان موقعك يستخدم أساسًا مختلفًا.
ما الفرق بين rem وem؟
rem نسبي إلى حجم خط الجذر؛ وem و% نسبيان إلى حجم خط العنصر الأب. اضبط «حجم خط الأب» لتحويل em بشكل صحيح.
كيف يُختار ارتفاع السطر؟
يتبع الممارسة الطباعية الشائعة: نحو 1.5 لنص المتن وتباعد أضيق للعناوين الكبيرة. تُعرض أيضًا نسخة مُثبَّتة على شبكة 4 بكسل.
ماذا يفعل مولّد clamp()؟
يكتب حجم خط ينمو بسلاسة بين حد أدنى وأقصى عبر عرضي إطار عرض ويبقى ثابتًا خارجهما. يعرض «محاكاة عرض إطار العرض» النتيجة عند أي عرض.
هل يمكنني تحويل النقاط للطباعة؟
نعم. يستخدم pt نسبة CSS البالغة 72 نقطة إلى 96 بكسل، فتعادل 12 نقطة 16 بكسل.