دليل اقتران الخطوط: اختيار أفضل مجموعات الخطوط لموقعك على الويب
نشرت: 2020-11-02كمصمم ويب ، لديك الكثير من القرارات الكبيرة التي يجب عليك اتخاذها لكل موقع ويب تقوم بإنشائه. لوحات الألوان وتفاعلات واجهة المستخدم وتخطيط التنقل واختيار أفضل خط لموقع الويب الخاص بك وغير ذلك الكثير.
ومع ذلك ، فإن أحد مجالات تصميم الويب التي قد لا تقضي وقتًا كافيًا في التفكير فيها هو اقتران الخطوط.
اختيار خط واحد رائع هو شيء واحد. بمجرد أن يكون لديك إحساس جيد بصوت العلامة التجارية وأسلوبها ، يصبح من الأسهل بكثير تحديد الخطوط التي تنقل إحساسًا مشابهًا.
جدول المحتويات
- لماذا تحتاج إلى اقتران الخطوط؟
- ما يجب مراعاته عند إقران الخطوط
- 4 قواعد اقتران الخطوط في تصميم الويب
- القاعدة رقم 1: لا تستخدم أكثر من ثلاثة خطوط على موقعك
- القاعدة رقم 2: التوافق والتباين جيدان ؛ الصراع سيء
- القاعدة رقم 3: لا تخف من الاقتران ضمن العائلات الفائقة للخطوط
- القاعدة رقم 4: تأكد من حجم الخطوط وشكلها بشكل صحيح
- أفضل 30 مجموعة خطوط لتصميم الويب
لماذا تحتاج إلى اقتران الخطوط؟
تحتاج مواقع الويب إلى أكثر من خط واحد - لإنشاء تسلسل هرمي ، ولإبقاء الزائرين منشغلين بالكثير من النصوص ، ولإخبار الزوار بشكل لا شعوري بالمزيد عن شخصية العلامة التجارية ونهجها.
عندما تضيف هذه الطبقة الإضافية من التعقيد إلى المزيج ، يمكن أن تصبح الأمور صعبة. لا تقوم فقط بإقران الخطوط مع بعضها البعض ؛ تقوم بإقرانهم بتصميم الويب أيضًا.
أنا متأكد من أنك واجهت سيناريوهات مثل هذه في رحلاتك عبر الويب:
- يجعل الخطان المملان من الصعب جدًا قراءة منشور مدونة طويل وينتهي بك الأمر بالقفز عبر الرؤوس لمعرفة ما إذا كان بإمكانك تجميع القصة معًا بهذه الطريقة.
- يقدم الخط المخطوطي الممتع والفريد الزوار إلى العمل ، فقط لخط جسم صغير جدًا وبسيط للغاية يتعارض مع هذا الانطباع الأول.
- يدعي الموقع أن الشركة تتخذ نهجًا شابًا ومبتكرًا للأعمال ، ولهذا السبب تبدو الخطوط الرجعية في غير مكانها.
هناك الكثير مما يمكن أن يحدث بشكل خاطئ في إقران الخطوط إذا لم تأخذ الوقت الكافي لفهم كيف تتلاءم الخطوط معًا.
ما يجب مراعاته عند إقران الخطوط
في دليلنا لأفضل الخطوط لمواقع الويب ، قمنا بتلخيص الخصائص الرئيسية التي يجب البحث عنها:
1. الوضوح
أحد أسباب تفضيل الرقيق بشدة في الأدب والصحف هو الوضوح. تجعل الأحرف الرقيقة (القدم) في الجزء العلوي والسفلي من الأحرف من السهل على القراء التمييز بين الأحرف المتشابهة مثل الأحرف الكبيرة "I" والحروف الصغيرة "l" ، لذلك لا يوجد تباطؤ بسبب مشكلات الفهم.
إذا كنت تصمم صفحة بها أكثر من 600 كلمة ، فلن تكون فكرة سيئة أن تستخدم serif في النص الأساسي لهذا السبب بالذات.
ومع ذلك ، إذا وجدت حرفًا بلا رقيق بأشكال حروف مميزة (حتى بدون الرقيق) ، فلا تخف من التجربة. لدينا بعض الأمثلة حول كيفية استخدام sans serif في كل من مواضع النص والرأس أدناه.
2. المقروئية
كان أحد الأسباب التي جعلت سان serifs كان يُعتقد منذ فترة طويلة خيارًا أفضل من الرقيق للنصوص عبر الإنترنت هو قابليتها للقراءة العالية. ومع ذلك ، فقد أظهرت الدراسات أن هناك اختلافًا بسيطًا في مدى سرعة أو سهولة قراءة الأشخاص لنصوص serif مقابل نصوص san serif - على الأقل بأحجام أصغر.
نظرًا لتحسن دقة الشاشة بشكل كبير على مر السنين ، تمكن المصممون من إنشاء وجوه الخطوط في كلا الأنماط التي يمكن قراءتها بنفس القدر. كما يوضح NNG:
"كان دليل قابلية الاستخدام القديم للطباعة عبر الإنترنت بسيطًا: التمسك بمحارف sans-serif. نظرًا لأن شاشات الكمبيوتر كانت رديئة جدًا بحيث لا يمكنها عرض Serifs بشكل صحيح ، فإن محاولة كتابة serif بأحجام نص الجسم أدت إلى ظهور أشكال أحرف ضبابية ".
بينما قد يكون من الصعب جدًا قراءة أنواع الخطوط الأخرى - مثل الأنواع الزخرفية بشكل مفرط - خارج نص العنوان الكبير ، فإن المصممين لديهم الكثير من الخيارات فيما يتعلق بكيفية تصميم النص على صفحة بها serif و san serifs.
ما يجب أن تكون أكثر دراية به ، إذن ، هو تغيير حجم الأحرف والتباعد بينها بدلاً من ذلك لأن ذلك له تأثير على قابلية القراءة والوضوح.
3. الراحة
هناك بعض مصممي الويب الذين يترددون في استخدام الخطوط مثل Helvetica أو Times New Roman بسبب الإفراط في استخدامها. ومع ذلك ، لا يتعلق تحديد الخط والاقتران بما تشعر به حيال طباعة موقع الويب الخاص بك ، بل يتعلق بمدى راحة زوارك في قراءته.
لذلك ، لا عيب في اختيار الكلاسيكيات إذا أنجزوا المهمة.
4. النمط
حدد أنواع الخطوط والخطوط ذات الأنماط التي تتوافق جيدًا مع علامتك التجارية. على سبيل المثال ، تبدو الخطوط الرقيقة أكثر تقليدية وجدية على عكس الخطوط المخطوطة التي تميل إلى أن تكون أكثر غرابةً ومتعةً.
يمكنك إخبار الزائرين بالكثير عن علامتك التجارية بمجرد اختيار الأنواع المناسبة من الخطوط للبدء بها.
لا تغفل عن هذه القواعد وأنت تنتقل إلى الخطوة التالية في التصميم باستخدام الطباعة: