معاينة تنسيق الخطوط

كيفية استخدام معاينة تنسيق الخطوط

1. ابدأ بأحد الأزواج المقترحة (تحريري ومدونة عصرية وصفحة هبوط وأخبار وأنيق ومجلة تقنية وكتاب وكلاسيكي وتوثيق ومرِح). يعرض كل زر خط العناوين وخط النص اللذين يطبّقهما.
2. أو اختر بنفسك خط العناوين وخط النص. القوائم مقسّمة إلى خطوط دون زوائد، وبزوائد، وخطوط عرض، وثابتة العرض، وخطوط يدوية. ويبادل زر تبديل الخطين بينهما.
3. اضبط حجم العنوان وحجم النص وارتفاع السطر، واختر سُمك العنوان (عريض (700) أو عادي (400)). وفعّل خلفية داكنة لتجرّب الزوج في الوضع الداكن.
4. استبدل نص العنوان ونص الفقرة بكلماتك: فالعنوان الحقيقي والفقرة الحقيقية يخبرانك أكثر بكثير من جملة تجريبية. اترك سطرًا فارغًا بين الفقرات.
5. انسخ شيفرة CSS، ثم اتبع قسم الاستضافة الذاتية باستخدام Fontsource لإضافة الخطوط إلى مشروعك.

تُحمَّل الخطوط عند اختيارها أول مرة (نحو 12 إلى 50 KB لكل سُمك). وتُقدَّم من هذا الموقع، وليس من أي شبكة CDN للخطوط.

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

ما الذي يجعل تنسيق الخطوط ناجحًا؟

• تباين لا تصادم. الوصفة الكلاسيكية هي خط بزوائد لدور وخط دون زوائد للدور الآخر: Playfair Display فوق Lato، أو Montserrat فوق Merriweather. أما خطان متشابهان دون أن يكونا متطابقين (كخطين هندسيين دون زوائد) فيبدوان غالبًا كأنهما خطأ.
• خط نص هادئ. النص الأساسي هو المكان الذي يقضي فيه القرّاء وقتهم. اختر خطًا بأشكال حروف مفتوحة وارتفاع x سخي (Inter وLato وOpen Sans وSource Serif 4 وMerriweather)، واحتفظ بخطوط العرض مثل Playfair Display وDM Serif Display وOswald وCaveat للعناوين القصيرة.
• تناسب الأبعاد. الخطوط ذات ارتفاع x المتقارب تنسجم معًا على السطر نفسه وفي العمود نفسه.
• خطّان يكفيان. أنشئ التسلسل الهرمي بالحجم والسُّمك والتباعد بدلًا من خط ثالث.

لنص أساسي مقروء، يُعدّ حجم 16 إلى 20 px مع ارتفاع سطر بين 1.4 و1.7 نطاقًا جيدًا للبداية، مع نحو 60 إلى 75 حرفًا في السطر. وتحتاج العناوين عادةً إلى ارتفاع سطر أضيق (1.1 إلى 1.3)، وتضبطه لك شيفرة CSS.

شيفرة CSS

تعرّف الشيفرة خاصيتين مخصّصتين، --font-heading و--font-body، ولكل منهما مجموعة خطوط احتياطية: فإذا لم يكن خط الويب قد حُمّل بعد، يعرض المتصفح خط نظام مشابهًا (Georgia للخطوط بزوائد، وخط واجهة النظام للخطوط دون زوائد). وتُكتب الأحجام بوحدة rem (‏16 px = 1rem)، فتتبع إعداد حجم الخط في متصفح القارئ.

الاستضافة الذاتية والتراخيص

الخطوط العشرون كلها مأخوذة من Fontsource، الذي يحزم الخطوط مفتوحة المصدر لـ npm. يعطيك صندوق التثبيت أمر npm install وأسطر import للمجموعة اللاتينية وللسُّمك الذي تستخدمه فقط، ثم تنسخ أداة التجميع ملفات woff2 إلى مشروعك. وتقديم الخطوط من نطاقك الخاص أسرع (دون اتصال إضافي)، ويعمل دون إنترنت، ويتجنب إرسال عناوين IP لزوارك إلى خدمة خطوط خارجية، وهي مشكلة معروفة مع اللائحة العامة لحماية البيانات (GDPR) في الاتحاد الأوروبي.

كل خط هنا مرخّص بموجب SIL Open Font License 1.1 وفقًا لبيانات حزمته: يمكنك استخدامه في المواقع والتطبيقات والمطبوعات، تجاريًا أو غير تجاري، وتضمينه. ولا يجوز لك بيع ملفات الخط وحدها. وإذا عدّلت خطًا، فيجب أن يبقى تحت ترخيص OFL وألا يحمل الاسم الأصلي المحجوز. ويُرفق ملف الترخيص في كل حزمة.