أحجام الخط الشائعة (أساس 16 بكسل)
| نقطة | بكسل | مليمتر | rem |
|---|---|---|---|
| 6 | 8 | 2.12 | 0.5 |
| 7 | 9.33 | 2.47 | 0.583 |
| 8 | 10.67 | 2.82 | 0.667 |
| 9 | 12 | 3.17 | 0.75 |
| 10 | 13.33 | 3.53 | 0.833 |
| 10.5 | 14 | 3.7 | 0.875 |
| 11 | 14.67 | 3.88 | 0.917 |
| 12 | 16 | 4.23 | 1 |
| 14 | 18.67 | 4.94 | 1.167 |
| 16 | 21.33 | 5.64 | 1.333 |
| 18 | 24 | 6.35 | 1.5 |
| 20 | 26.67 | 7.06 | 1.667 |
| 24 | 32 | 8.47 | 2 |
| 28 | 37.33 | 9.88 | 2.333 |
| 32 | 42.67 | 11.29 | 2.667 |
| 36 | 48 | 12.7 | 3 |
| 48 | 64 | 16.93 | 4 |
| 60 | 80 | 21.17 | 5 |
| 72 | 96 | 25.4 | 6 |
طريقة الاستخدام
- اكتب الحجم واختر وحدته: نقطة أو بكسل أو مليمتر أو em/rem.
- إن كنت تستخدم em أو rem فاضبط الحجم الأساسي بالبكسل، والمتصفحات تبدأ من 16 بكسل.
- اقرأ كل المكافئات وراجع المعاينة. وعاير المسطرة على الشاشة أولًا إن أردت المعاينة بالحجم الفعلي.
كيف تعمل
يربط معيار CSS الوحدات كلها عبر الإنش: 1 إنش = 96 بكسل = 72 نقطة = 25.4 ملم. النقطة والمليمتر وحدتان مطلقتان، أما em وrem فنسبيتان: تضربان حجم الخط الأساسي المعمول به، وتضبطه المتصفحات على 16 بكسل ما لم يغيّره القارئ أو ملف التنسيق.
pt = px × 0.75 · mm = px × 25.4 ÷ 96 · em = px ÷ base
مثال محسوب
يطلب التصميم المطبوع نصًا بحجم 9 نقاط، وأنت تبني النسخة الإلكترونية على أساس 16 بكسل: 9 × 96 ÷ 72 = 12 بكسل، أي 12 ÷ 16 = 0.75rem. وعلى الورق يكون ارتفاع مربع الخط 12 × 25.4 ÷ 96 = 3.175 ملم. وفي الاتجاه المعاكس، عنوان بحجم 24 بكسل يساوي 18 نقطة و1.5rem و6.35 ملم.
الافتراضات والحدود
- بكسل CSS ليس بكسل الشاشة الفعلي. ففي هاتف بشاشة كثافتها 3× يغطي 16 بكسل CSS قرابة 48 بكسلًا حقيقيًا، ويتوقف حجمه الظاهر على الشاشة، ولهذا تحتاج المعاينة إلى مسطرة معايَرة لتكون بالحجم الحقيقي.
- النقطة هنا هي نقطة النشر المكتبي (PostScript) وتساوي 1/72 إنش، أما نقطة ديدو المستخدمة في بعض المطابع الأوروبية فنحو 0.376 ملم، أي أكبر بنحو 7٪.
- حجم الخط يحدد مربع الحرف لا ارتفاع الحروف، فقد يبدو خطّان بالحجم نفسه مختلفين كثيرًا، والفرق أوضح في الخطوط العربية.
- بعض التطبيقات تكبّر النص مع إعداد العرض، فبتكبير 125٪ قد يظهر الخط بحجم 12 نقطة بعرض 20 بكسل.
أسئلة شائعة
كم بكسلًا في 12 نقطة؟
16 بكسل. فمعيار CSS يجعل الإنش 96 بكسل و72 نقطة، أي أن النقطة 1.333 بكسل.
ما الفرق بين em وrem؟
كلتاهما مضاعف لحجم خط. فـ 1rem يساوي دائمًا حجم خط الجذر (16 بكسل ما لم تغيّره)، أما 1em فيساوي حجم خط العنصر الأب، لذا تتضاعف قيم em عند التداخل.
هل ارتفاع حروف الخط بحجم 12 نقطة 4.23 ملم؟
هذا ارتفاع المربع الذي يحتوي الحرف لا الحروف نفسها. فالحروف اللاتينية الكبيرة تشغل نحو 70٪ منه، أي قرابة 3 ملم بحجم 12 نقطة، والحروف العربية تختلف حسب الخط.