الطباعة المتقدمة: منح العلامة صوتاً

الطباعة هي الصوت، لا الكسوة

سار عرض صفحة هبوط Sereno جيداً — جيداً جداً حتى. لكن عند الخروج من القاعة، أسرّ العميل بجملة تغيّر مسار المشروع: «إنها جميلة. الآن أريد أن يُتعرَّف على Sereno وأعيننا مغمضة.» ينظر إليك مدير Studio Mango: «هذه هي الطباعة.» وهو محق: الواجهة مكوّنة بنسبة 90% من النص. غيّر طباعة منتج وستغيّر صوته — قبل اللون، وقبل الصور.

في الفصل الثاني، وضعت سلّم أحجام بنسبة 1.25 وعائلتين اختيرتا على عجل. كان ذلك كافياً للنمذجة الأولية؛ لكنه لم يعد كافياً لهوية. هذا الفصل ينزل طابقاً: كيف تقرأ شخصية خط، وكيف تزاوج بين خطين دون تنافر، وكيف تضبط طول السطر وتفاصيل الطباعة الدقيقة التي تفصل الهاوي عن المحترف — وكيف تجعل كل ذلك سائلاً بين الهاتف وسطح المكتب بسطر CSS واحد.

قراءة شخصية الخط

الخط ليس «جميلاً» أو «قبيحاً»: له سمات شخصية قابلة للقياس. الأذيال (النهايات الصغيرة في خطوط serif) توحي بالعراقة والنشر والدفء؛ وغيابها يوحي بالحياد الحديث. تباين السماكة والرقة — فرق السُّمك داخل الحرف الواحد — يضفي أناقةً حين يكون قوياً، ومتانةً حين يكون ضعيفاً. ارتفاع x (حجم الأحرف الصغيرة نسبةً إلى الكبيرة) يؤثر في المقروئية في الأحجام الصغيرة. والأشكال المفتوحة أو المغلقة لحروف مثل «e» و«a» تجعل الخط مرحّباً أو صارماً.

لست بحاجة إلى أن تصبح خبير طباعة: تحتاج هذا المعجم لكتابة الموجز. والذكاء الاصطناعي معلّم خصوصي ممتاز هنا أيضاً — أرِه خطين واسأل: «قارن شخصية Fraunces وPlayfair Display من حيث الأذيال والتباين والأشكال؛ أيهما يترجم أفضل “هدوء فاخر دافئ” ولماذا؟». تحصل على تحليل معلَّل، والأهم: الكلمات لتبرير اختيارك أمام العميل غداً.

المزاوجة بين عائلتين دون نشاز

القاعدة الذهبية للزواج الطباعي تُختصر في جملة: تباين صريح أو قرابة تامة، وأبداً المنزلة الوسطى. خطان شبه متطابقين (خطا sans-serif هندسيان مثلاً) يخلقان تنافراً خفياً — تشعر العين بأن شيئاً ما لا يستقيم دون أن تعرفه. أما خطان مختلفان بوضوح (serif ذو طابع قوي للعناوين، وsans-serif محايد للمتن) فيُبرز كلٌّ منهما الآخر. إنه الثنائي الأكثر أماناً، وهو ثنائي Sereno: Fraunces الذي يتكلم، وInter الذي يتوارى.

المعيار الثاني، الأقل شهرة: تقارب ارتفاع x. إذا كانت الأحرف الصغيرة لخط العناوين أكبر نسبياً بكثير من أحرف خط المتن، فسيبدوان غير متعايرين جنباً إلى جنب حتى بأحجام «متطابقة». وأخيراً، اكتفِ بـعائلتين — الثالثة محجوزة للحالات الخاصة جداً (كود يُعرض، رقم لوحة قيادة بخط display). كل عائلة إضافية عبء تحميل وخطر نشاز.

اقترح 3 أزواج من خطوط Google Fonts لـSereno، تطبيق تأمل، التوجه «هادئ، فاخر، دافئ»:
- لكل زوج: خط العناوين، خط المتن، وجملتان تبرران الزواج من حيث الأذيال وتباين السماكة/الرقة وارتفاع x
- القيد: يجب أن يبقى خط المتن متقَناً عند 16px وبسماكة 400
- استبعد: الخطوط المنتشرة في كل مكان بلا قصد (لا Montserrat ولا Roboto افتراضياً)
ثم أوصِ بزوج واحد واشرح بمَ يتميز عن الآخرين لهذا المنتج تحديداً.

طول السطر: 45 إلى 75 حرفاً، لا أكثر

طول السطر هو طول سطر النص محسوباً بالأحرف. تحت 45، تقفز العين بين الأسطر بلا توقف وتصبح القراءة متقطعة؛ وفوق 75، تضيع العين عند العودة إلى أول السطر وتعيد قراءة السطر نفسه مرتين. منطقة الراحة بين 45 و75 حرفاً، والمثالي حوالى 65 للنصوص الطويلة. إنه الخطأ الأكثر شيوعاً في الويب: فقرات ممدودة على كامل عرض شاشة 27 بوصة، أي 150 حرفاً وأكثر — غير مقروءة مهما بلغت عناية الباقي.

الحل في خاصية واحدة: max-width: 65ch على كتل النص (الوحدة ch تعادل تقريباً عرض حرف من الخط الحالي). ازوِجها مع ارتفاع السطر: كلما طال السطر، وجب أن يكون التباعد بين الأسطر أسخى لمساعدة العين على إيجاد السطر التالي. وفي المحاذاة، قاعدة بسيطة على الويب: محاذاة إلى بداية السطر، وأبداً لا ضبط كامل (justify) — الضبط الكامل يخلق أنهاراً من المسافات غير المنتظمة تديرها المتصفحات بشكل سيئ، خصوصاً دون فصل مقطعي.

/* كتلة قراءة مريحة */
.prose {
  max-width: 65ch;          /* طول السطر: حوالى 65 حرفاً */
  font-size: var(--text-base);
  line-height: var(--leading-body);  /* 1.6 لهذا الطول */
  text-align: left;          /* لا justify على الويب أبداً */
  text-wrap: pretty;         /* يتجنب الكلمات اليتيمة آخر الفقرة */
}

.prose + .prose { margin-top: var(--space-6); }

/* العناوين: سطر أقصر وتباعد أضيق */
h1, h2 {
  max-width: 22ch;
  line-height: var(--leading-tight);
  text-wrap: balance;        /* يوازن أسطر العناوين */
}

الطباعة السائلة مع clamp()

سلّمك من الفصل الثاني ثابت: عنوان h1 بحجم 3.052rem يبقى بهذا الحجم في كل مكان. لكن 49px مثالي على سطح المكتب وساحق على هاتف بعرض 375px. الجواب الكلاسيكي كان سلسلة media queries؛ والجواب الحديث في دالة واحدة: clamp(min, valeur-fluide, max). تعطي حجماً أدنى وحجماً أقصى، وبينهما قيمة تتنفس مع عرض الشاشة (بوحدة vw). يكبر العنوان باستمرار من 2rem على الهاتف إلى 3.05rem على سطح المكتب، دون أي قفزة.

تفصيل إتاحة حاسم: لا تستخدم vw وحدها أبداً في الجزء السائل. الحجم بـvw الخالصة يتجاهل تكبير المتصفح — مستخدم ضعيف البصر يكبّر إلى 200% سيرى النص... باقياً بالحجم نفسه. الصيغة الآمنة تجمع دائماً جزءاً بـrem وجزءاً بـvw: clamp(2rem, 1.4rem + 2.6vw, 3.05rem). الـrem تضمن احترام التكبير وتفضيلات حجم الخط في النظام.

:root {
  /* سلّم سائل — النسبة 1.25 محفوظة عند الطرفين */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --text-xl:   clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem);
  --text-2xl:  clamp(1.6rem, 1.35rem + 1.2vw, 2.2rem);
  --text-3xl:  clamp(1.9rem, 1.5rem + 1.9vw, 2.75rem);
  --text-4xl:  clamp(2.25rem, 1.7rem + 2.8vw, 3.4rem);
}

حوّل سلّمي الطباعي الثابت (أدناه) إلى سلّم سائل باستخدام clamp():
[الصق هنا tokens --text-* الحالية]
القيود:
- viewport المرجع: من 375px (هاتف) إلى 1280px (سطح مكتب)
- كل clamp يجمع rem + vw (لا vw وحدها أبداً، احتراماً لتكبير المتصفح)
- حافظ على النسبة 1.25 بين المستويات عند الطرفين
- أعطِ كتلة :root النهائية، ثم جدولاً تلخيصياً: الحجم عند 375px / عند 768px / عند 1280px لكل مستوى
وأخيراً، حدّد ارتفاعات الأسطر الموصى بها لكل مستوى.

التسلسل الهرمي دون تكبير

انعكاس المبتدئ الشرطي للتسلسل الهرمي هو الحجم: الأهم = الأكبر. لكن الحجم رافعة من خمس، وغالباً الأقل رهافةً. السماكة تميّز عنواناً عن تسمية بالحجم نفسه. حالة الأحرف — عنوان علوي بأحرف كبيرة صغيرة متباعدة («تأمل موجَّه») فوق عنوان كبير — تخلق طابق هرمية أنيقاً لا يستهلك بكسلاً إضافياً. اللون يُرجع نصاً ثانوياً إلى الخلف (--color-text-muted) دون تصغيره. والمساحة تعزل فتُثمّن. اجمع رافعتين خفيتين بدل رافعة واحدة صارخة: إنه الفرق بين صفحة تصرخ وصفحة تتكلم.

كلمة عن الخطوط المتغيّرة، المعيار الحديث: ملف واحد يحوي كل السماكات (وأحياناً محاور أخرى كالبصريات أو العرض). الميزة مزدوجة: تحمّل ملفاً بدل أربعة، وتستطيع استخدام سماكات وسيطة دقيقة (550 بدل الخيار الثنائي 500/600). وFraunces تحديداً متغيّر ويكشف محور «بصريات» يلطّف الرسم أو يؤكده بحسب الحجم — بالضبط نوع التفاصيل الذي يجعل هويةً قابلة للتمييز «والأعين مغمضة».

الطباعة الدقيقة: التفاصيل التي تصنع الاحتراف

تبقى الطبقة الأخيرة، غير المرئية حين تُتقن والصارخة حين تغيب. الفواصل العليا المنحنية (الفاصلة العليا المستقيمة أثر من الآلة الكاتبة)، وعلامات الاقتباس الصحيحة مع مسافاتها، والمسافات غير المنقسمة قبل علامات الترقيم المزدوجة وبين الرقم ووحدته — للغات قواعد دقيقة لا يحترمها النص المولَّد بالذكاء الاصطناعي دائماً. اطلب منهجياً جولة: «طبّق الاصطلاحات الطباعية الصحيحة على كل نصوص الصفحة».

تقنياً، ثلاثة انعكاسات تسليم: قدّم الخطوط بصيغة woff2 (الصيغة المضغوطة الحديثة)، وأضف font-display: swap ليظهر النص فوراً بخط نظام ريثما يصل الخط الحقيقي، وتحقق من الترخيص — خطوط Google Fonts حرة، لكن خطاً مدفوعاً وُجد «في مكان ما» قد يكلّف العميل غالياً عند أي تدقيق. عائلتان مقدَّمتان جيداً تزنان أقل من 200 كيلوبايت؛ هذه هي الميزانية التي لا يجب تجاوزها كي لا يُدفع ثمن الفخامة ثوانيَ تحميل.