حجم الخط وارتفاع الرسم المرئي للحرف

حجم الخط وارتفاع الرسم المرئي للحرف ليسا قياسًا واحدًا. قد تبقي رقم الحجم نفسه عند تبديل الخط، ثم ترى اختلافًا في هيئة الحروف وارتفاعها الظاهر. لذلك لا يكفي الرقم وحده للحكم على تطابق الشكلين.

نشرح الفكرة في سياق الخطوط القابلة للتكبير وصفحات الويب، باستخدام شكلين هندسيين أصليين يشبهان حرف H. الأبعاد اختيارات تعليمية داخل مربعين متساويين، وليست قياسات لخطي طباعة تجاريين أو نتائج دراسة على قراء.

الخلاصة السريعة

في الخطوط القابلة للتكبير، يطبق حجم الخط مقياسًا على وحدة مرجعية للخط، لا ارتفاعًا متطابقًا لكل شكل حرف. وتوضح المواصفة أن المظهر قد يختلف بين الخطوط عند الحجم نفسه. [1]

المرجع شيء ورسم الحرف شيء آخر. وقد تتجاوز بعض الأشكال صندوقها المرجعي، كما تنبه المواصفة. [1] لا تفترض أن كل حرف يملأ الصندوق أو يبقى داخله.
في نموذجينا المربع المرجعي 100 وحدة، وارتفاع الشكل أ 70 وحدة وارتفاع الشكل ب 50 وحدة. المربعات متساوية، والرسوم مختلفة الارتفاع.
عند تحجيم مرجع النموذج إلى 16 وحدة، يصير ارتفاع أ 11.2 وحدة وارتفاع ب 8 وحدات. هذه حسابات لشكلين مؤلفين، لا أبعاد خطين مثبتين على جهازك.
ارتفاع السطر في CSS يختلف عن ارتفاع حبر الحرف. وللمضاعف غير ذي الوحدة، تستعمل الخاصية حجم خط العنصر نفسه في الحساب. [2] في مثال 16 مع 1.5 تكون القيمة 24.
قارن النص نفسه مع ثبات الحجم والظروف التي تعرضه فيها. إذا عدلت الحجم والتباعد والخط معًا، سجل أنها مقارنة تغير أكثر من عامل.
الحكم على قراءة فقرة يحتاج إلى رؤية النص الفعلي. النموذج لا يعلن أفضل خط أو رقم حجم مناسبًا لكل قارئ وكل موضع.

رقم الحجم يحدد مقياسًا مرجعيًا

تصف مواصفة CSS حجم الخط القابل للتكبير بأنه مقياس يطبق على وحدة EM، وتذكر أن بعض أشكال الحروف قد تمتد خارج صندوقها. [1]

يمكن تصور مرجع الرسم ومحتواه كشيئين نريد وصفهما منفصلين. قولك إن المرجعين متساويان لا يصف بعد كم يمتد الشكل الذي رسمته داخل كل منهما. لهذا نحتاج إلى اسم القياس، لا إلى الرقم فقط.

في مثالنا نثبت المربع ثم نغير ارتفاع الشكل المقصود. لا نستعمل عبارة أكبر للدلالة على حجم المرجع مرة وعلى ارتفاع الرسم مرة أخرى دون توضيح؛ فقد تبدو العبارتان متناقضتين مع أنهما تصفان شيئين مختلفين.

مربعان متساويان ورسمان مختلفان

صممنا أ وب من ثلاثة مستطيلات لكل شكل، لتقريب هيئة حرف H دون نسخ خط موجود. ارتفاع كل مربع مرجعي 100 وحدة، وخط القاعدة مشترك في موضعه داخل المربعين. جعلنا أ بارتفاع 70 وحدة وب بارتفاع 50 وحدة.

تستطيع مقارنة أعلى الرسمين بعد تثبيت القاعدة:أ يمتد إلى أعلى أكثر، مع أن مربع أ ليس أعلى من مربع ب. الفراغ الباقي داخل المربع لا يتحول إلى جزء من ارتفاع الحبر لمجرد أنه داخل المرجع.

هذه حدود النموذج الذي اخترناه. لا نقول إن كل حرف H في الخطوط الفعلية له إحدى النسبتين، ولا نحول شكلًا واحدًا إلى جدول يقيس الحروف العربية أو علامات التشكيل أو كل المحارف الأخرى.

القياس في النموذج	أ	ب
ارتفاع المرجع	100	100
ارتفاع الرسم	70	50
الارتفاع إذا صار المرجع 16	11.2	8

ما الذي يحدث عند تغيير المقياس؟

نحافظ على نسبة ارتفاع الشكل إلى مرجعه في نموذجنا الهندسي. لأ لدينا 70 من 100، ولب 50 من 100. إذا صار المرجع 16 وحدة بدل 100، نضرب 16 في كل نسبة لنحصل على 11.2 و 8 على الترتيب.

إذن تساوي المرجع الجديد لا يزيل اختلاف الرسم الذي بدأنا به. أما إذا أردت مساواة ارتفاع الشكلين في هذا النموذج، فهذه مهمة أخرى تتطلب تغيير المقياس الذي تطبقه على أحدهما؛ عندئذ لا تبقى المقارنة نفسها ذات المرجعين المتساويين.

ويذكر النص المعياري اختلاف الحجم الظاهر بين الخطوط عند حجم خط معين. [1] يشرح نموذجنا سببًا هندسيًا للفصل بين المرجع والشكل، لكنه لا يحسب تلقائيًا ارتفاع كل حرف في صفحة فعلية؛ لذلك نعود إلى النص المعروض عند تقييم نتيجته.

ارتفاع السطر ليس ارتفاع الحبر

تصف MDN خاصية ارتفاع السطر في الكتابة الأفقية بأنها مرتبطة بارتفاع صندوق السطر، لا بقياس الرسم المرئي لكل حرف. [2]

وللقيمة التي لا تحمل وحدة، يكون الحساب من حجم خط العنصر مضروبًا في تلك القيمة. [2] نختار مثالًا بسيطًا:حجم 16 بكسلًا ومضاعف 1.5 يعطيان 24 بكسلًا قيمة مستعملة لهذه الخاصية.

لا يعني 24 هنا أن الحرف في سطر المثال صار حبرًا بارتفاع 24. كما أن النتيجة الحسابية للخاصية لا تصف وحدها كل ترتيب سطر يجمع عناصر مختلفة. عند قراءة الأرقام، سم خاصية الحجم وخاصية ارتفاع السطر بدل جمعهما تحت وصف ارتفاع الحرف.

قارن ما تحتاج إلى قراءته فعلًا

اختر العبارة نفسها في البديلين، وضعها في موضع متشابه، ثم ثبت الرقم الذي تريد مقارنة أثر الخط عنده. يمكنك بعدها تسجيل الاختلاف المرئي دون القول إن الأرقام التي أدخلتها كانت مختلفة.

وفي مقارنة ثانية تستطيع تعديل الحجم أو ارتفاع السطر وفق ما تراه في النص. سجل التعديل بوضوح:بدلت الخط فقط في الأولى، وغيرت الحجم في الثانية. بذلك لا تنسب اختلافًا جديدًا إلى العامل الذي ثبتته سابقًا.

جرب أيضًا فقرة فيها الحروف والعلامات التي سيعرضها تصميمك، بدل بناء القرار كله على نموذج H وحده. يوضح الرسم علاقة مقدارين، بينما قرارك في الصفحة يحتاج إلى مراجعة كلماتك الفعلية. لا نقدم من هذه المقارنة اختبار قراءة على أشخاص أو ترتيبًا عامًا للخطوط.

المصادر ومتابعة القراءة

أُعدّ هذا المقال بصياغة عربية أصلية بالاستناد إلى المصادر أعلاه، وهو مدخل تمهيدي إلى الموضوع. اقرأ منهجية المحتوى وحدوده.