تعلم فن الطباعة

الطباعة ترتيب للنص لا اختيار لخط

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

وأسهل طريقة لرؤية ذلك تجربة. خذ صفحة تحبها وبدّل خطها بخط نظام عادي. ستظل الصفحة تعمل. ثم افعل العكس: أبقِ الخط، واجعل كل الأحجام واحدا، وانزع المسافات. ستنهار الصفحة. فالذي كان يمسكها لم يكن الخط قط.

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

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

ما الذي يجعل الخط مقروءا؟

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

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

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

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

كيف تبني سلم الأحجام؟

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

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

وأرقام الموقع الذي تقرأه، لتكون قد رأيت مثالا حقيقيا: الجذر 16px، ونص المتن 1.0625rem أي نحو سبعة عشر بكسلا، والنص الصغير كمسار التنقل وحواشي الأشكال 0.85rem. والعناوين كلها مكتوبة بـclamp(): h3 بين ١.١٥ و١.٤ rem، وh2 بين ١.٥ و٢.٢ rem، وh1 بين ٢ و٣.٣ rem. أي أصغر رقم على الهاتف وأكبره على شاشة كبيرة، بلا أي نقطة انكسار.

وclamp() هذه أنفع أداة عملية في هذا القسم وتحل محل ثلاثة أو أربعة استعلامات وسائط. تأخذ ثلاث قيم: حدا أدنى، وحجما سائلا يقوم عادة على عرض النافذة، وحدا أقصى. والخطأ الشائع كتابة الجزء السائل وحده وترك الحد الأدنى؛ والنتيجة عنوان ينكمش إلى حجم نص المتن على هاتف ضيق.

وقاعدة أهم من أي نسبة: قلّل عدد الأحجام. فخمسة أحجام تكفي أي موقع تقريبا، وإن شعرت أنك تحتاج سادسا فالمشكلة عادة ليست في الحجم بل في المسافة.

طول السطر وارتفاعه: الرقمان الأكثر أثرا

إن احتفظت برقمين فقط من هذا الدرس فليكونا هذين. فالسطر الطويل جدا يضيّع العين وهي عائدة إلى بداية السطر التالي؛ والسطر القصير جدا يحوّل القراءة إلى قفزات متتابعة. والتباعد الضيق يلصق سطرين حتى يعيد القارئ قراءة أحدهما دون أن يشعر.

ولطول السطر سقف رسمي. فمعيار WCAG في البند ١.٤.٨، وهو مستوى AAA لا AA، يقول إن عرض كتلة النص ينبغي ألا يزيد على ثمانين حرفا. ويقول البند نفسه شيئين آخرين أقل اقتباسا: ألا يُضبط النص من الطرفين، وأن يكون تباعد السطور واحدا ونصفا على الأقل.

وفي CSS تضبط هذا بوحدة ch لا بالبكسل، لأن العرض يجب أن يرتفع وينخفض مع حجم الخط. وأرقام هذا الموقع: فقرة التقديم في كل صفحة 56ch ومتون المقالات 78ch، أي تحت سقف الثمانين مباشرة.

ونقطة لا يكاد أحد يكتبها، وهي التي يخطئ فيها الجميع أول مرة: ch هي عرض الرقم صفر في الخط الجاري، لا عرض حرف حقيقي. وفي الخط الذي يستعمله هذا الموقع يبلغ ذلك الصفر ٥٧٠ وحدة من em من ألف وحدة، أي ٠.٥٧ em. فـ78ch رقم قابل للتكرار لكنه ليس «ثمانية وسبعين حرفا»، وفي الفارسية حيث تتفاوت عروض الحروف كثيرا تتسع الفجوة أكثر. فانظر إلى الرقم كمقياس قابل للضبط لا كعدّ.

وأما تباعد السطور فمعيار WCAG في البند ١.٤.١٢، وهو مستوى AA، يقول إن على المستخدم أن يستطيع رفع ارتفاع السطر إلى ١.٥ مرة على الأقل من حجم الخط دون فقد محتوى. وهذا حد أدنى لا توصية. ونص المتن في هذا الموقع عند 1.9، وهذا اختيار للفارسية: فالخط يحمل نقاطا وامتدادات كثيرة تحت خط الأساس، وعند تباعد يكفي اللاتينية يبدو مزدحما.

أتحتاج خطين أم واحدا؟

الجواب الصادق لأكثر المواقع: واحد. فعائلة خط واحدة بعدة أوزان تتفوق دائما تقريبا على عائلتين مختلفتين، لأن فرق الوزن فرق مصمَّم وفرق العائلة فرق عارض.

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

والكلفة التي لا تُرى عادة في القرار: كل عائلة إضافية ملفات أخرى تُنزَّل. وهذه الكلفة أثقل في الفارسية، لأن الخط الفارسي يحمل رسوما أكثر وملفه أكبر من نظيره اللاتيني. فخط ثان لا يظهر إلا في العناوين قد يكلّف على اتصال هاتفي بقدر عدة صور.

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

كيف تعرف أن التراتب صار صحيحا؟

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

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

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

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