طباعة CSS وخطوط الويب: نصّ قراءته متعة

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

القراران الأهمّ ليسا خطوطًا أصلًا: اضبط نصّ المتن حوالي 16–18px بارتفاع سطر قرب 1.5، وحُدّ طول السطر قرب 60–75 حرفًا. كل صفحة "صعبة القراءة" تقريبًا تخالف أحدهما.

مجموعة الخطوط

font-family تأخذ قائمة، تُجرَّب من اليسار لليمين حتى يتوفّر أحدها، منتهيةً بعائلة عامة كاحتياطي مضمون:

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
code {
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
}

العائلات العامة الخمس — serif، وsans-serif، وmonospace، وcursive، وfantasy — يجب أن تكون دائمًا المُدخَل الأخير كي يكون لدى المتصفح ما يرتدّ إليه. ضع بين علامتي اقتباس أي اسم عائلة يحوي مسافات.

مجموعات خطوط النظام مثل system-ui تستخدم خطّ واجهة نظام التشغيل الأصلي (San Francisco على Apple، وSegoe على Windows، وRoboto على Android). تكلّف صفر بايت، وتُرسَم فورًا، وتبدو أصيلة — افتراضي ممتاز قبل أن تلجأ إلى خطّ منزَّل أصلًا.

خطوط الويب بـ @font-face

لاستخدام خطّ مخصّص، صرّح به بـ @font-face، ثم أشِر إلى اسم font-family عاديًّا:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;     /* مدى = خطّ متغيّر */
  font-style: normal;
  font-display: swap;        /* أظهِر النصّ الاحتياطي فورًا، وبدّله عند الجهوزية */
}

body { font-family: "Inter", sans-serif; }

ثلاث قواعد لخطوط سريعة بلا تقطّع:

• استخدم woff2 — إنه أصغر صيغة ومدعوم حيثما يهمّ.
• اضبط font-display: swap كي يُرسَم النصّ فورًا بالخطّ الاحتياطي ويُبدَّل عند تحميل خطّ الويب — متفاديًا النصّ غير المرئي (FOIT). optional أصرم (تخطَّ التبديل إن كان الخطّ بطيئًا).
• حمّل مسبقًا الخطّ الحرج في HTML كي يجلبه المتصفح مبكرًا:

<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>

الخطوط المتغيّرة

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

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;          /* محور الوزن المدعوم */
}

h1     { font-weight: 800; }      /* أي قيمة في المدى، لا 400/700 فقط */
.lead  { font-weight: 350; }      /* الأوزان البينية صارت ممكنة */

أبعد من الوزن، تستطيع الخطوط المتغيّرة كشف محاور مخصّصة عبر font-variation-settings (الحجم البصري، العرض، الدرجة)، لكن محور الوزن وحده يبرّر التحوّل عادةً.

التحجيم: rem وem والخطّ السائل

استخدم rem لأحجام الخطوط. 1rem يساوي حجم خطّ الجذر (16px افتراضيًّا)، فالتحجيم بـ rem يحترم تكبير المتصفح وتفضيل حجم الخطّ لدى المستخدم — مكسب وصولية يهدره px:

:root { font-size: 100%; }   /* يحترم إعداد المستخدم — لا تثبّت 16px */
body   { font-size: 1.125rem; }  /* 18px */
small  { font-size: 0.875rem; }  /* 14px */

em نسبيّ إلى حجم خطّ العنصر نفسه — مفيد لأشياء ينبغي أن تتحجّم مع سياقها (أيقونة بجوار نصّ، حشو داخل زر)، لكنه يتراكم عند التداخل، وهذا يفاجئ الناس.

للعناوين التي تتحجّم مع منفذ العرض، يمنح clamp() خطًّا سائلًا بلا استعلامات وسائط — حدّ أدنى، وقيمة مفضّلة، وحدّ أقصى:

h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); }  /* 32px → 56px، سائل */

ارتفاع السطر وطوله والتباعد

ثلاثة إعدادات تقوم بمعظم عمل القراءة:

body {
  line-height: 1.5;        /* بلا وحدة — يتحجّم مع font-size؛ ~1.4–1.6 للمتن */
  max-width: 65ch;          /* "العرض" — ~60–75 حرفًا هي النقطة المثلى */
}
h1 { line-height: 1.1; }    /* أضيق للنصّ العرضي الكبير */

• line-height — أبقِه بلا وحدة (1.5، لا 24px) كي يتحجّم تناسبيًّا مع حجم خطّ كل عنصر. نصّ المتن يريد ~1.5؛ والعناوين الكبيرة تريد أضيق (~1.1).
• العرض (measure) — طول السطر. وحدة ch (≈ عرض "0") تجعل max-width: 65ch طريقة مباشرة لحدّ السطور قرب مدى 60–75 حرفًا المقروء. السطور التي تمتدّ عرض شاشة عريضة بالكامل متعبة للقراءة فعلًا.

تعديلات أدقّ:

.heading { letter-spacing: -0.02em; }   /* اضغط النصّ الكبير قليلًا */
.caps    { letter-spacing: 0.05em; text-transform: uppercase; } /* باعِد الأحرف الكبيرة */

التتبّع (letter-spacing) بـ em يتحجّم مع النصّ. العناوين الكبيرة تستفيد غالبًا من لمسة سالبة؛ والأحرف الكبيرة والنصّ الصغير من لمسة موجبة.

الالتفاف والاقتطاع والموازنة

التحكّم في كيفية كسر النصّ:

/* اقتطاع سطر واحد بحذف لاحق */
.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* حدّ إلى N سطر بحذف لاحق */
.excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* اكسر السلاسل الطويلة غير المنكسرة (روابط، رموز) بدل الفيضان */
.code-ish { overflow-wrap: break-word; }

ولطيفتان حديثتان تحسّنان الخطّ مجّانًا:

h1, h2 { text-wrap: balance; }   /* أطوال أسطر متساوية في العناوين — بلا سطر أخير قصير وحيد */
p      { text-wrap: pretty; }    /* يتفادى الأيتام (كلمة وحيدة في السطر الأخير) */

text-wrap: balance أفضل على نصّ قصير كالعناوين (محدود ببضعة أسطر)؛ وpretty لفقرات المتن.

الإيقاع الرأسي

التباعد المتّسق بين كتل النصّ يجعل الصفحة تبدو مؤلَّفة. قُدْه من مقياس واحد بدل هوامش مرتجلة:

:root { --flow: 1.5rem; }
.prose > * + * { margin-block-start: var(--flow); }  /* مسافة بين الأشقّاء فقط */

محدّد * + * ("البومة المُفصَّصة") يطبّق هامشًا علويًّا على كل عنصر يتبع آخر — فتتباعد الكتل بانتظام دون هامش شارد في القمّة. اقرِنه بمقياس عناوين متّسق وتُقرَأ الصفحة كإيقاع لا كومة.

الأخطاء الشائعة

• تحجيم الخطوط بـ px، ما يتجاهل تفضيل حجم خطّ/تكبير المستخدم — استخدم rem.
• ترك السطور تمتدّ عرض شاشة عريضة بالكامل — حُدّ العرض قرب 65ch.
• ارتفاع سطر ضيّق جدًّا (1.0–1.2) على نصّ المتن — اهدف إلى ~1.5.
• ضبط line-height بوحدة (24px)، فيتوقّف عن التحجّم مع حجم الخطّ — أبقِه بلا وحدة.
• شحن خطوط الويب بلا font-display: swap، ما يسبّب نصًّا غير مرئيّ أثناء التحميل (FOIT).
• تحميل ملفّات أوزان ساكنة كثيرة حيث خطّ متغيّر واحد سيكون أصغر.
• استخدام .woff/.ttf بدل woff2، فتشحن تنزيلات أكبر بلا فائدة.
• نسيان عائلة عامة (sans-serif) في نهاية مجموعة الخطوط.
• اللجوء إلى   وكسور أسطر يدوية بدل text-wrap: balance/pretty.

تمارين

جرّب كلًّا منها قبل فتح الحل.

تمرين 1 — افتراضيات متن مقروءة

اضبط تجربة قراءة معقولة على body: نصّ 18px، وتباعد سطور مريح، وطول سطر محدود — بوحدات صديقة للوصولية.

body {
  font-size: 1.125rem;   /* 18px، لكنه يحترم تكبير المستخدم لأنه rem */
  line-height: 1.5;
  max-width: 65ch;
  margin-inline: auto;
}

تمرين 2 — خطّ مستضاف ذاتيًّا لا يومض

صرّح بخطّ ويب يُظهر النصّ الاحتياطي فورًا ويبدّله عند الجهوزية، بأكفأ صيغة.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

تمرين 3 — عنوان سائل

اجعل <h1> يتحجّم بسلاسة من 28px على الهواتف إلى 48px على سطح المكتب، بلا استعلامات وسائط.

h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); }

تمرين 4 — اقتطع عنوان بطاقة

أبقِ .card-title في سطر واحد، مضيفًا حذفًا لاحقًا حين يطول.

.card-title {
  white-space: nowrap;     /* لا تلتفّ إلى سطر ثانٍ */
  overflow: hidden;        /* اقصّ الفائض */
  text-overflow: ellipsis; /* أظهِر … عند القصّ */
}

النموذج الذهني الذي تحتفظ به

الطباعة سهولة قراءة أولًا. ثبّتها برقمين — نصّ متن ~16–18px بارتفاع سطر ~1.5، وعرض محدود قرب 65ch — ويكون معظم العمل قد تمّ. حجّم بـ rem كي يحتفظ المستخدمون بالتحكّم في المقياس، والجأ إلى clamp() حين ينبغي أن تكون العناوين سائلة، وأبقِ line-height بلا وحدة كي يتحجّم. ابنِ مجموعتك على خطوط النظام لخطّ أصيل فوريّ مجّانيّ، وعند إضافة خطّ ويب استخدم woff2 + font-display: swap (وحمّل مسبقًا الحرج منه)، مفضّلًا خطًّا متغيّرًا واحدًا على أوزان ساكنة كثيرة. اختم بـ text-wrap: balance على العناوين و**pretty** على الفقرات، وقُدْ التباعد من مقياس إيقاع رأسي واحد. اللون والتباين — النصف الآخر من الوضوح — يأتيان تاليًا في ألوان CSS والتدرّجات.