بالنسبة لموقع ويب احترافي، اختر خطًا نصيًا سهل القراءة للغاية، وعلى الأكثر، عائلة ثانية لإضفاء طابع على العناوين. يعتبر sans-serif البسيط مناسبًا لمعظم المواقع؛ يمكن أن يعزز الرقيق صورة تحريرية أو متميزة أو تراثية.
دليل من تأليف SiteQuiVend، المتخصص في إنشاء وإعادة تصميم مواقع الويب ومتاجر Shopify. تم تحديث المعلومات في أغسطس 2026.
كيفية التعرف على الخط الاحترافي؟
الاحتراف يأتي من نظام مطبعي متسق. قبل اختيار اسم معروف، قم بتقييم شروط الاستخدام الفعلية.
سهولة القراءة
يجب أن تظل الحروف متميزة في الأجسام الصغيرة: لاحظ على وجه الخصوص "i" و"l" و"I" والأرقام واللهجات. اختبار الفقرات الحقيقية، وليس فقط اسم العلامة التجارية.
الاتساق مع تحديد المواقع
يمكن للهندسة الحادة أن تستحضر التكنولوجيا أو الحداثة؛ يمكن أن يقترح الرقيق المتناقض النشر أو التطوير. يجب أن يدعم التأثير العرض دون تصويره كاريكاتوريًا.
عائلة كاملة بما فيه الكفاية
تحقق من الدهون المتوفرة بالفعل، والخط المائل، واللهجات الفرنسية، ورمز اليورو، ولغات الأسواق المستهدفة. نادرًا ما يعطي المتغير السميك بشكل مصطنع نتيجة نظيفة.
الترخيص والتوافر
يتطلب الخط التجاري ترخيصًا مناسبًا للويب. في Shopify، تعتمد الاختيارات المتاحة على الموضوع؛ قد يتطلب الخط المخصص التكامل الفني.
عرض Serif، sans-serif: ما هي العائلة التي تختارها؟
| عائلة | الاستخدام الموصى به | تأثير متكرر | نقطة اليقظة |
|---|---|---|---|
| بلا شريف | الأجسام والقوائم والأزرار والواجهات | واضحة وحديثة ومباشرة | بعض الأشكال الهندسية باردة أو ضيقة في الفقرات |
| شريف | العناوين، التحريرية، العلامات التجارية المتميزة | أنيقة وثقافية وراسخة | التناقضات الدقيقة تفقد حدتها على الشاشة الصغيرة |
| يعرض | خطافات قصيرة جدا | مميزة ومعبرة | تجنب الفقرات والتنقل والنماذج |
| حافلة صغيرة | الكود أو البيانات أو التفاصيل الفنية | دقيقة وتقنية | متعب كخط رئيسي في موقع تجاري |
| نظام | مواقع سريعة وواجهات رصينة | مألوفة وفعالة | يختلف العرض حسب نظام التشغيل |
في غالبية المشاريع، يكون sans-serif للنص كافيًا. أضف عائلة ثانية فقط إذا أدى ذلك إلى إنشاء تسلسل هرمي مفيد. ضرب الخطوط لا يجعل التصميم أكثر ثراءً: فهو يؤدي إلى تجزئة الصفحة.
ما هي ارتباطات الخطوط التي يجب أن أستخدمها عمليًا؟
هذه المجموعات هي توجيهات للاختبار، وليست وصفات طبية. يعتمد توفرها على الموضوع والترخيص وطريقة الاستضافة.
رصين ومتعدد الاستخدامات
إنتر للعناوين والنصوص. تقوم الأحجام والشحوم بإنشاء تسلسل هرمي دون مضاعفة الملفات. هذا الحل مناسب للخدمات وSaaS والمتاجر المعاصرة.
حديثة ويمكن الوصول إليها
Manrope للعناوين، Source Sans 3 للجسم. يظل التباين متحفظًا، مع طابع في الخطافات وقراءة مريحة.
قسط والتحرير
عرض Playfair للعناوين، Inter أو Lato للجسم. الرقيق يجلب الشخصية؛ يحافظ sans-serif على سهولة القراءة. حجز Playfair للنصوص القصيرة.
مألوفة وتجارية
مونتسيرات على الألقاب، Open Sans على الجسم. هذا الارتباط المعروف واضح. ستأتي شخصيته بشكل أساسي من الألوان والصور والتخطيطات.
system-ui, -apple-system, "Segoe UI", sans-serif. توصي Shopify بالنظر في خطوط النظام الموجودة بالفعل على الجهاز لتجنب التنزيل الذي قد يؤدي إلى إبطاء المتجر.الأحجام والشحوم والمسافات: الخط ليس كافيا
تعتمد الطباعة الاحترافية على التسلسل الهرمي أكثر من اعتمادها على اسم العائلة. فيما يلي قيم البداية للتكيف مع تصميم الخط الفعلي.
نص مشترك
ابدأ بحوالي 16 بكسل أو 1 ريم، بارتفاع سطر يتراوح من 1.5 إلى 1.7. قد يتطلب الخط الصغير بصريًا المزيد.
العناوين
إنشاء فجوات واضحة بين المستويات. على الهاتف المحمول، يتجنب المقياس المرن الكلمات المقطوعة والكتل المرتفعة جدًا.
الدهون
ويكفي وزنان أو ثلاثة: عادي للنص، وشبه سمين للمراجع، وقوي للعناوين.
عرض القراءة
تجنب تشغيل الفقرات عبر شاشة كبيرة بأكملها. الخط المعتدل يجعل من السهل الانتقال إلى السطر التالي.
تشير توصيات إمكانية الوصول الخاصة بـ Shopify إلى الحد الأدنى لحجم الجسم الذي يعادل 16 بكسل وتذكر بأن خطين من نفس الحجم قد يبدوان مختلفين. يتطلب W3C أيضًا أن يدعم المحتوى تكبير النص دون فقدان أو تداخل.
كيفية الحفاظ على السرعة وإمكانية الوصول؟
الحد من الملفات
قم بتحميل العائلات والأوزان والأنماط والأحرف المستخدمة فقط. خط الشعار في الصور ليس ضروريًا في كل مكان.
اختر تنسيق الويب
من أجل التكامل الشخصي، اختر بشكل عام WOFF2 وقم بتوفير عائلة إغاثة وثيقة.
تجنب النص غير المرئي
font-display يتحقق من استبدال شرطة الطوارئ. الاختيار بين swap, fallback أو optional يعتمد على التسوية البصرية والأداء.
اختبار المحتوى الحقيقي
التحكم في اللهجات والأسعار والأزرار والنماذج والترجمات، ثم الأسطر الجديدة بدقة 375 بكسل وبالتكبير.
في Shopify، يتم تعديل الطباعة الشاملة متجر على الإنترنت → السمات → تحرير الموضوع → إعدادات السمة → الطباعة. يتم تحديد الخطوط المتاحة بواسطة مطور السمة. قم بتكرار السمة قبل إجراء تغيير كبير وتحكم أيضًا في صفحة الدفع التي لها إعداداتها الخاصة.
مراجع مفيدة: shopify الإعدادات المطبعية, إمكانية الوصول إلى المواضيع و ممارسات أداء الويب الجيدة.
الأخطاء المطبعية التي تعطي مظهرًا هواة
الكثير من العائلات المختلفة
ثلاثة أو أربعة خطوط متنافسة تمنعنا من فهم التسلسل الهرمي. ابدأ بعائلة واحدة، ثم قم بتبرير كل إضافة.
خط زخرفي للجسم
يمكن أن تعمل الكتابة اليدوية، الضيقة أو المتناقضة جدًا، في خطاف، ولكنها تتعب بسرعة في الوصف أو الأسئلة الشائعة أو النموذج.
التناقضات ضعيفة جدا
تبدو الشحوم الناعمة ذات اللون الرمادي الفاتح على خلفية بيضاء أنيقة في العارضة، ولكن يصعب قراءتها على شاشة ساطعة أو لشخص ضعيف البصر.
التغيير دون التحقق من الموضوع بأكمله
يغير الخط الجديد عرض الزر وارتفاع البطاقة والخطوط الجديدة. فحص المنزل والمجموعات والمنتجات وعربة التسوق والنماذج والهاتف المحمول.
إذا كانت الطباعة الخاصة بك مجرد واحدة من العلامات العديدة للتصميم القديم، فتحقق منها أيضًا علامات على أن متجر Shopify يفتقر إلى الاحتراف والدليل ل ترقية متجر Shopify القديم.
ما هي خدمة SiteQuiVend التي يجب عليك اختيارها؟
ثلاث توصيات تركز على وضوح الموقع والثقة والخبرة. هذا التشخيص الأول لا يحل محل التدقيق الكامل.
3 طلبات بسيطة في حدود ساعة واحدة، مع الإعلان عن الاستجابة الأولى خلال 48 إلى 72 ساعة عمل. تعتمد الجدوى على الموضوع والنطاق.
5 صفحات أو نماذج رئيسية، وما يصل إلى 10 منتجات و3 مجموعات، مع موعد نهائي إرشادي يتراوح من 5 إلى 7 أيام عمل بعد استلام العناصر الضرورية.
يتم تحديد تكلفة الترخيص وتكامل الملفات المخصصة والتطوير المعقد والتدخلات خارج الحزمة بشكل منفصل.
قائمة المراجعة قبل التحقق من صحة خطوط موقعك
الضوابط الأساسية الـ 12
- عائلة أو عائلتين كحد أقصى.
- اللهجات والرموز متوفرة.
- يسمح الترخيص باستخدام الويب.
- يظل الجسم مريحًا عند حوالي 16 بيكسل أو أكثر.
- مستويات العنوان متميزة.
- الدهون لا تحل محل التسلسل الهرمي.
- تظل الأزرار قابلة للقراءة وواسعة جدًا.
- التباين كافٍ في كل خلفية.
- الفقرات ليست واسعة بشكل مفرط.
- لا يتم تحميل الملفات والدهون غير الضرورية.
- الموقع يعمل مع شرطة الطوارئ.
- تم التحقق من المنزل والمنتج وعربة التسوق والهاتف المحمول.
الأسئلة الشائعة: اختيار الخطوط من موقع احترافي
ما هو أفضل خط لموقع احترافي؟
لا شيء عالمي. تعد Inter أو Manrope أو Source Sans 3 أو Open Sans أو مكدس النظام قواعد قابلة للقراءة للتكيف مع العلامة التجارية والموضوع.
كم عدد الخطوط التي يجب عليك استخدامها على الموقع؟
الأسرة الكاملة غالبا ما تكون كافية. عملان إذا قام أحدهما ببناء الألقاب والآخر يسهل الجسد. أبعد من ذلك، يصبح الاتساق معقدًا.
هل الخط الرقيق احترافي؟
نعم، خاصة بالنسبة لعالم تحريري أو متميز. اختر رسمًا قابلاً للقراءة واحجز الأشكال الدقيقة للنصوص الكبيرة إلى حد ما.
ما حجم الخط الذي سيتم استخدامه على الهاتف المحمول؟
بالنسبة للجسم، 16 بكسل أو 1 ريم هي نقطة بداية آمنة. قم بتكييفه مع الارتفاع المرئي للخط.
هل تعمل خطوط Google على إبطاء الموقع؟
يضيف أي خط ويب ملفات محتملة. يعتمد التأثير على الاستضافة والشحوم والمجموعات الفرعية والعرض.
هل يمكنك إضافة خط مخصص على Shopify؟
نعم، اعتمادا على الموضوع والترخيص. قد يتطلب الخط المفقود من المحدد ملفات وتعديلات فنية.
هل يجب عليك استخدام نفس الخط في الدفع Shopify؟
الاتساق أمر مرغوب فيه في الخيارات المتاحة. يتيح لك محرر الدفع ضبط العناوين والنص.
هل يمكن أن يكون تغيير الخط كافياً لتحديث الموقع؟
أحياناً. إذا كانت الألوان والمسافات والمكونات والأنماط غير متسقة، فلن يكون الخط وحده كافيًا.
