الطباعة

يمزج نظام الخطوط بين عائلتَي خطوط مستوحاتَين من التصميم السويسري، مما يُرسّخ تسلسلاً هرمياً واضحاً بين العناوين التعبيرية ونص المحتوى الوظيفي.

فلسفة التصميم

تستخدم طباعة الخطوط النسب والإيقاع والتناغم — من خلال أسلوب النص والمقياس والوزن واللون والتباعد الرأسي والأفقي — لإنشاء تسلسل هرمي بصري واضح.

• Neusa Next Wide مستوحى من معالجات النصوص في حقبة استكشاف الفضاء المبكر، مما يضفي طابعاً إنسانياً وتعبيرياً على العناوين والعناوين الفرعية
• Proxima Nova يجلب انفتاحاً وأسلوباً هندسياً إلى اللحظات الأكثر أهمية عملياً كنص المحتوى والنصوص المساعدة

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

عائلات الخطوط

Neusa Next Wide

الدور: العناوين، والعناوين الفرعية، والاقتباسات البارزة، ونداءات الإجراء، والتسميات، والإحصاءات الرقمية

يعرض مركز العلامة التجارية خمسة أنماط:

النمط	قيمة الوزن	font-weight CSS	font-style CSS
خفيف	300	300	normal
عادي	400	400	normal
مائل	400	400	italic
متوسط	500	500	normal
غامق	700	700	normal

Proxima Nova

الدور: نص المحتوى، والنص المساعد، ورؤوس الأقسام، وعناصر واجهة المستخدم

يعرض مركز العلامة التجارية أربعة أنماط:

النمط	قيمة الوزن	font-weight CSS	font-style CSS
عادي	400	400	normal
عادي مائل	400	400	italic
غامق	700	700	normal
غامق مائل	700	700	italic

Proxima Nova مرخّص بشكل منفصل وغير مدرج في تنزيل خطوط مركز العلامة التجارية. تأتي السمة مع أوزان 400 و500 و600 و700 بالنمط العادي.

التسلسل الهرمي للنص

المبادئ الأساسية

• إرساء التسلسل الهرمي من خلال تناقص حجم الخط مقروناً بمعالجات تناوب حالة الأحرف
• استخدام Neusa Wide Bold بحالة جملة للعناوين الرئيسية والفرعية للحملات
• ضبط تباعد أسطر العناوين على 1.1× حجم الخط
• استخدام Proxima Nova Bold بأحرف كبيرة (UPPERCASE) مع تباعد الحروف لرؤوس الأقسام للتمييز عن العناوين بحالة الجملة
• تستخدم التوقيعات ونداءات الإجراء Neusa Wide Bold مع سهم متجه لليمين (›) باللون الأحمر السحابي للإشارة إلى الإجراء في التجارب الرقمية

جدول التسلسل الهرمي

العنصر	الخط	الوزن	حالة الأحرف	ملاحظات
عنوان رئيسي	Neusa Wide	غامق (700)	جملة	التباعد = 1.1× حجم الخط
عنوان علوي	Proxima Nova	غامق (700)	أحرف كبيرة	صغير، مع تباعد الحروف
عنوان فرعي / مقدمة	Neusa Wide	متوسط (500)	جملة	أو Proxima Nova إذا تلاه مباشرةً نص محتوى
رأس قسم	Proxima Nova	غامق (700)	أحرف كبيرة	مع تباعد الحروف
رأس قسم فرعي	Proxima Nova	غامق (700)	جملة
نص المحتوى	Proxima Nova	عادي (400)	جملة
نقاط التعداد	Proxima Nova	عادي (400)	جملة
اقتباس بارز	Neusa Wide	غامق (700)	جملة	اللون الأحمر السحابي؛ علامات اقتباس حمراء كبيرة مع الإسناد أدناه
توقيع / نداء إجراء	Neusa Wide	غامق (700)	جملة	مع سهم متجه لليمين (›) باللون الأحمر السحابي

المعالجات المتخصصة

السياق	الخط	الوزن	الحجم/التباعد	ملاحظات
اقتباسات بارزة في المطبوعات	Neusa Wide	غامق (700)	9pt / 14pt	حالة جملة
اقتباسات بارزة في الكتب الإلكترونية	Neusa Wide	عادي (400)	16pt / 19pt	مع خط فوقها
أرقام وحقائق الرسوم البيانية	Neusa Wide	خفيف (300)	—	للتأثير البصري بالأحجام الكبيرة
أرقام الجداول والأشرطة البيانية	Neusa Wide	عادي (400)	—	تسمية الجداول القياسية

استخدام حالة العنوان

يمكن استخدام حالة العنوان لـ:

• العناوين الفرعية
• الاقتباسات البارزة
• الإحصاءات الرقمية
• التسميات

تعتمد جميع العناصر الأخرى بشكل افتراضي على حالة الجملة.

أمثلة حية

العناوين

عنوان المستوى الثاني

عنوان المستوى الثالث

عنوان المستوى الرابع

عنوان المستوى الخامس

عنوان المستوى السادس

أنماط النص

هذا نص غامق للتأكيد.

هذا نص مائل للتأكيد الخفيف.

هذا نص مشطوب للمحتوى المهجور.

هذا كود مضمّن للمراجع التقنية.

هذا نص غامق مائل للتأكيد القوي.

هذا مزيج: غامق مع كود مضمّن بداخله ومائل مع كود بداخله.

قائمة مرتبة

1. العنصر الأول في القائمة المرتبة
2. العنصر الثاني مع نص غامق
3. العنصر الثالث مع كود مضمّن
4. العنصر الرابع مع رابط إلى Astro

قائمة غير مرتبة

• نقطة التعداد الأولى
• النقطة الثانية مع تأكيد
• النقطة الثالثة مع مرجع كود
• النقطة الرابعة مع رابط

قوائم متداخلة

1. عنصر مرتب على المستوى الأعلى
   • عنصر غير مرتب متداخل أ
   • عنصر غير مرتب متداخل ب
     1. عنصر مرتب متداخل بعمق
     2. عنصر متداخل بعمق آخر
   • عودة إلى مستوى التداخل الأول
2. العنصر الثاني على المستوى الأعلى
   • عنصر متداخل آخر

الاقتباسات

هذا اقتباس من سطر واحد.

هذا اقتباس متعدد الأسطر.

يمتد على عدة فقرات ويمكن أن يحتوي على تنسيق غامق، ومائل، وكود.

اقتباسات متداخلة:

هذا اقتباس متداخل داخل الخارجي.

يمكن أن يحتوي على تنسيقه الخاص.

خط أفقي

محتوى فوق الخط.

---

محتوى تحت الخط.

الروابط

• رابط داخلي: العودة إلى نظرة عامة على المستندات
• رابط خارجي: وثائق Starlight
• رابط مع عنوان: Astro

الحواشي السفلية

هذه جملة تحتوي على مرجع حاشية سفلية¹.

وجملة أخرى بحاشية سفلية مختلفة².

ملفات الخطوط

تأتي السمة مع 10 ملفات woff2 في مجلد fonts/:

Neusa Next Pro Wide

الملف	الوزن	النمط	الحجم
neusaNextProWide-300.woff2	300 (خفيف)	عادي	~49 KB
neusaNextProWide-400.woff2	400 (عادي)	عادي	~49 KB
neusaNextProWide-400i.woff2	400 (عادي)	مائل	~49 KB
neusaNextProWide-500.woff2	500 (متوسط)	عادي	~49 KB
neusaNextProWide-700.woff2	700 (غامق)	عادي	~49 KB
neusaNextProWide-700i.woff2	700 (غامق)	مائل	~49 KB

Proxima Nova

الملف	الوزن	النمط	الحجم
proximaNova-400.woff2	400 (عادي)	عادي	~18 KB
proximaNova-500.woff2	500 (متوسط)	عادي	~18 KB
proximaNova-600.woff2	600 (شبه غامق)	عادي	~18 KB
proximaNova-700.woff2	700 (غامق)	عادي	~18 KB

اصطلاح التسمية

تتبع ملفات الخطوط النمط familyName-weight.woff2، مع لاحقة i للمتغيرات المائلة (مثلاً، neusaNextProWide-400i.woff2).

فجوات التغطية

المتغيرات المائلة التالية غير متوفرة بعد في السمة:

المتغير المفقود	السبب
Proxima Nova 400 مائل	الملف المصدر غير متوفر في التنزيلات الحالية
Proxima Nova 500 مائل	الملف المصدر غير متوفر في التنزيلات الحالية
Proxima Nova 600 مائل (شبه غامق)	الملف المصدر غير متوفر
Proxima Nova 700 مائل (غامق)	الملف المصدر غير متوفر

لإضافة متغيرات Proxima Nova المائلة، احصل على ملفات woff2 أصلية من مصدر مرخّص، وسمّها وفق الاصطلاح (مثلاً، proximaNova-400i.woff2)، وأضف قواعد @font-face المقابلة إلى font-face.css.

إعلانات @font-face

تقع جميع تسجيلات الخطوط في fonts/font-face.css. يستخدم كل إعلان:

• font-display: swap — يعرض النص فوراً بخط بديل، ثم يتبدّل عند تحميل الخط المخصص
• format("woff2") — صيغة مضغوطة حديثة مدعومة من جميع المتصفحات الحالية
• عناوين URL نسبية — مسارات ./ تُحلّ نسبةً إلى موقع ملف CSS

لإضافة متغير خط جديد، ألحق كتلة @font-face بـ font-face.css:

@font-face {
  font-family: "familyName";
  font-weight: 400;
  font-style: italic;  /* or normal */
  font-display: swap;
  src: url("./familyName-400i.woff2") format("woff2");
}

تكامل CSS

يحقن المكوّن الإضافي للسمة (index.ts) كلا ملفَي CSS عبر خطاف config:setup:

index.ts → fonts/font-face.css → styles/custom.css → Starlight renders

تعيينات الخطوط

في styles/custom.css:

:root {
  --sl-font: "proximaNova", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "neusaNextProWide", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}

• --sl-font (متغير خط جسم Starlight) ← Proxima Nova لنص المحتوى وواجهة المستخدم
• --sl-font-heading (رمز مخصص) ← Neusa Next Pro Wide كمرجع لخط العناوين
• h1–h6 ← عائلة الخط والوزن وحالة الأحرف مطبّقة وفق التسلسل الهرمي لنصوص السحابة
• مجموعة الخطوط الاحتياطية: system-ui, "Segoe UI", Helvetica, Arial, sans-serif للعرض الأولي السريع قبل تحميل الخطوط المخصصة

رموز طباعة Starlight

تتجاوز السمة خصائص CSS المخصصة التالية لـ Starlight:

الرمز	القيمة	الغرض
--sl-font	"proximaNova", ...	نص المحتوى، وعناصر واجهة المستخدم
--sl-font-heading	"neusaNextProWide", ...	رمز مخصص لخط العناوين
--sl-line-height-headings	1.1	تباعد أسطر عناوين علامة السحابة التجارية
--sl-text-h1	var(--sl-text-5xl)	عنوان رئيسي 2.625rem
--sl-text-h2	var(--sl-text-3xl)	عنوان فرعي 1.8125rem
--sl-text-h3	var(--sl-text-2xl)	مقدمة قسم 1.5rem
--sl-text-h4	var(--sl-text-lg)	قسم فرعي 1.125rem

تعيين التسلسل الهرمي للعناوين

HTML	عائلة الخط	الوزن	حالة الأحرف	الدور في العلامة التجارية
h1	Neusa Next Wide	700 (غامق)	جملة	عنوان رئيسي
h2	Neusa Next Wide	700 (غامق)	جملة	عنوان فرعي
h3	Neusa Next Wide	500 (متوسط)	جملة	مقدمة / عنوان فرعي-فرعي
h4	Proxima Nova	700 (غامق)	أحرف كبيرة	رأس قسم
h5	Proxima Nova	700 (غامق)	أحرف كبيرة	رأس قسم فرعي
h6	Proxima Nova	700 (غامق)	أحرف كبيرة	رأس قسم ثانوي

استبدال الخطوط

لاستخدام عائلات خطوط مختلفة:

1. أضف ملفات woff2 إلى fonts/ باستخدام اصطلاح التسمية familyName-weight.woff2 (أضف لاحقة i للمتغيرات المائلة)
2. حدّث fonts/font-face.css بقواعد @font-face جديدة تتطابق مع أسماء ملفاتك وأوزانها وأنماطها
3. حدّث styles/custom.css لضبط --sl-font وfont-family للعناوين على أسماء عائلاتك الجديدة
4. احتفظ بمجموعة الخطوط الاحتياطية (system-ui, "Segoe UI", Helvetica, Arial, sans-serif) للعرض الأولي السريع

فحوصات السمة

• يستخدم H2 وH3 عائلة خط neusaNextProWide بوزن 700/500
• يستخدم H4 وH5 وH6 خط proximaNova، بأحرف كبيرة، مع تباعد حروف 0.05em
• لون تمييز الروابط هو #f06680 في الوضع الداكن، و#e4002b في الوضع الفاتح
• للكود المضمّن صبغة خلفية من --sl-color-gray-5
• حد الاقتباس الأيسر مرئي في كلا السمتَين
• مراجع الحواشي السفلية مرفوعة ومرتبطة
• للفاصل الأفقي تباين مناسب

Footnotes

1. هذا هو محتوى الحاشية السفلية الأولى. يظهر في أسفل الصفحة. ↩

2. هذه هي الحاشية السفلية الثانية. يمكن أن تحتوي على تنسيق وكود. ↩