هو - مكون النص، أي. يحتاج المستخدم إلى القراءة والقراءة والقراءة مرة أخرى. وفقًا للإحصاءات الموجودة على الإنترنت، لا أحد تقريبًا يقرأ مقالًا كاملاً؛ الجميع يتصفح ويحاول التقاط الفكرة الرئيسية فقط، نظرًا لأن المقالات، كقاعدة عامة، مليئة بـ "الماء". هدف مشرف الموقع هو جعل القراءة مريحة قدر الإمكان للمستخدم. ستخبرك هذه المقالة ليس فقط باختيار الخط، ولكن أيضًا حول أفضل السبل لوضع المحتوى على الموقع.

ما هي معايير اختيار الخط لموقع ويب؟ لقد أدرجت أدناه المعايير والتوصيات الرئيسية لكل منها.

1. اختيار عائلة الخطوط

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

• اريال ;
• فيردانا؛
• تايمز نيو رومان؛
• جورجيا؛
• منجنيق MS .

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

على سبيل المثال، يمكنك اختيار خط جميل على Google Font، ولكن لكي يظهر الخط المحدد في المتصفح للمستخدمين، ستحتاج إلى توصيله. ونتيجة لذلك، سيتم تحميل الخط من Google Font في كل مرة، وهو أمر سيء في رأيي وهناك عدد من الأسباب الوجيهة لذلك:

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

كان حل المشكلة بسيطًا: لقد قمت ببساطة بنسخ ملف .js بأكمله إلى الاستضافة الخاصة بي وقمت بتحميله من موقع الويب الخاص بي. من الأفضل أن يتم تحميل الموقع بأكمله من الاستضافة الخاصة بك. ومع ذلك، لن تتمكن من نقل الخطوط إلى موقع الويب الخاص بك؛ وسيتعين عليك دائمًا تنزيلها من موقع Google على الويب.

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

دعنا نعود إلى عائلات الخطوط. الخط الأفضل والأكثر تنوعًا هو خط Verdana. هذا الموقع لديه مثل هذا الخط. لا تحتوي على أي تعرجات، وهي صارمة وسهلة القراءة، وهو بالضبط ما يحتاجه المستخدم للحصول على المعلومات بسرعة.

2. تحديد حجم الخط

يعد اختيار حجم الخط مهمة صعبة حيث يحب بعض الأشخاص الخطوط الأصغر حجمًا والبعض الآخر يحب الخطوط الأكبر حجمًا. أنا شخصياً اخترت حجم 14 بكسل لنفسي. يعد هذا الحجم هو المعيار في العديد من المجالات (على سبيل المثال، يتم استخدام هذا الحجم عند كتابة الدبلومات والدورات الدراسية وفقًا لـ GOST). في هذا الموقع، ليست هناك حاجة لجعل حجم الخط 14 أو أكثر، وليس هناك حاجة لتصغيره أيضًا. تذكر أن الشيء الأكثر أهمية هو أن يتمتع المستخدمون بتجربة قراءة مريحة.

ملحوظة

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

3. اختيار لون الخط والخلفية له

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

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

• أزرق على أبيض؛
  مثال - أزرق على أبيض
• أسود على أصفر.
  مثال - أسود على أصفر
• أخضر على أبيض؛
  مثال - أخضر على أبيض
• أسود على خلفية بيضاء؛
  مثال - أسود على أبيض
• أحمر على أصفر؛
  مثال - أحمر على أصفر
• أحمر على أبيض؛
  مثال - أحمر على أبيض
• أخضر على أحمر؛
  مثال - أخضر على أحمر
• برتقالي على أسود؛
  مثال - برتقالي على أسود
• أسود على أرجواني.
  مثال - أسود على أرجواني
• برتقالي على أبيض؛
  مثال - برتقالي على أبيض
• أحمر على أخضر؛
  مثال - أحمر على أخضر

4. أشياء صغيرة أخرى

ومن بين هذه الأشياء الصغيرة أود أن أدرج ما يلي:

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

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

حول المبادئ الأساسية للعمل مع الطباعة.

إلى الإشارات المرجعية

يكتب جوناثان أن إحدى أهم مهارات المصمم هي القدرة على اختيار الطباعة. بعد كل شيء، يعد النص إحدى الطرق الرئيسية التي يتواصل بها المصمم مع المستخدمين. والطباعة يمكن أن تصنع التصميم أو تكسره.

الطباعة معقدة وجميلة. بعض الناس يكرسون حياتهم المهنية بأكملها لذلك. ولحسن الحظ، فإن عملهم موثق جيدًا، لذلك لدينا الكثير من موارد الطباعة عبر الإنترنت.

تم تصميم هذه المادة لتطوير المهارات الأولية في اختيار أسلوب الطباعة لتصميمك، بالإضافة إلى تشجيع تجربة الخطوط ومجموعاتها - بما في ذلك الخطوط غير المعروفة.

حدد هدفك

أولا وقبل كل شيء، عليك أن تفهم ما هو الغرض من التصميم الخاص بك. ما هي المعلومات التي تريد نقلها؟ مع استخدام ماذا؟ في التصميم الجيد، الطباعة تناسب الغرض. وذلك لأن الطباعة عامل رئيسي في خلق الحالة المزاجية والنغمة وأسلوب التصميم.

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

اختر خطًا يتوافق مع نمط الرسوم التوضيحية الخاصة بك

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

إذا كانت الصور هي العنصر الرئيسي في تصميمك، فاستخدم خطوطًا بسيطة لتسليط الضوء على الرسم التوضيحي.

حدد جمهورك

بمجرد أن تفهم الغرض من التصميم، حدد الجمهور. هذه الخطوة مهمة للغاية لأن اختيار الخطوط سيعتمد على عمر الجمهور واهتماماته وخلفيته الثقافية.

على سبيل المثال، بعض الخطوط أكثر ملاءمة للأطفال. نظرًا لأنهم يتعلمون القراءة للتو، فإن الخطوط سهلة القراءة ذات الأحرف الكبيرة والمقروءة هي الأفضل لهم. وخير مثال على هذا الخط هو Sassoon Primary. تم إنشاؤه بواسطة روزماري ساسون بناءً على بحثها الخاص حول الحروف الأسهل للأطفال في القراءة.

مدرسة ساسون الابتدائية

الخطوط الأخرى أكثر ملاءمة للأطفال الأكبر سنًا. في مثل هذه الخطوط، تكون الحروف بالحجم المناسب، والألوان متباينة، ولا يوجد نمط مكتوب بخط اليد أو أنماط زخرفية.

عند اختيار الطباعة، ضع في اعتبارك جمهورك واحتياجاتهم. ببساطة، ضع نفسك مكان المستخدمين.

ابحث عن الإلهام

انتبه إلى عمل المصممين الآخرين. حاول أن تفهم كيف قرروا مظهر الطباعة الخاصة بهم.

أفكار الخط

إذا لم تكن متأكدًا من الخط الذي تختاره، فإن أفضل 100 خط مجاني من CreativeBloq يمكنها أن تجعلك في مزاج جيد بسرعة. يشرح فيه المؤلف الدافع وراء تصميم كل خط من الخطوط المائة المقدمة.

مصدر آخر مفيد للأفكار هو مجموعة أعظم 100 خط مجاني لعام 2015 من Awwwards. بالإضافة إلى ذلك، نشرت Invision مؤخرًا قائمة ضخمة من موارد الطباعة. هناك الكثير من مصادر الأفكار هناك.

لمعرفة كيف تبدو الأفكار على مواقع الويب الحقيقية، قم بزيارة Typ.io. أنه يحتوي على أمثلة للخطوط من جميع أنحاء شبكة الإنترنت. بالإضافة إلى ذلك، يوجد في أسفل كل نموذج خط وصف له بلغة CSS.

بالإضافة إلى هذه الخدمات "الملهمة"، قم بمراجعة مواقعك المفضلة وتعرف على الخطوط التي يستخدمونها. WhatTheFont هو أداة جيدة لهذا الغرض. WhatTheFont هو امتداد لمتصفح Chrome يتيح لك استكشاف الخطوط على الويب عن طريق سحب الماوس فوقها.

أفكار للمجموعات

بالإضافة إلى الخطوط فقط، ابحث عن أفكار لمجموعاتها. المجموعات الصحيحة لا تقل أهمية عن الخطوط نفسها. بفضل المجموعة الصحيحة من الخطوط، يتم إنشاء تسلسل هرمي مرئي للمعلومات وتحسين إمكانية قراءة التصميم.

لإلهام الاقتران، ابدأ بـ Typewolf. أنه يحتوي على أمثلة لمجموعات الخطوط من مواقع مختلفة. بالإضافة إلى ذلك، يحتوي الموقع على توصيات ومقالات مع تحليل متعمق للطباعة. كنز حقيقي من المعلومات.

اختر الخطوط الخاصة بك

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

قبل اختيار الخط، اكتشف سبب إنشائه

اختر خطًا يناسب الغرض وفقًا للمعايير التقليدية ويسهل قراءته. تجنب الخطوط الفاخرة بشكل مفرط لصالح الخطوط البسيطة والعملية. ضع في اعتبارك أيضًا سبب حاجتك للخط. على سبيل المثال، بعض الخطوط أفضل للعناوين، والبعض الآخر أفضل للنص الأساسي.

مزيج من خطين يتناقضان مع بعضهما البعض

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

بالنسبة لخطوط الويب، تعد Google Fonts وTypekit وFont Squirrel خيارات جيدة. Google Fonts مجاني، ويحتوي Typekit وFont Squirrel على خطوط مجانية ومدفوعة.

تحديد أحجام الخطوط

بمجرد معرفة مجموعات الخطوط، انتقل إلى أحجامها. يعد المقياس المعياري من Tim Brown، رئيس قسم الطباعة في Adobe، أمرًا رائعًا لهذا الغرض. في الواقع، Modular Scale هو نظام لتحديد نسب حجم الخط المثالية تاريخيًا.

على سبيل المثال، يمكنك استخدام مقياس النسبة بناءً على النسبة الذهبية. ستكون هذه أحجام الخطوط الخمسة الأولى:

النسبة الذهبية (1:1.618)

1.000 × 1.618 = 1.618

1.618 × 1.618 = 2.618

2.618 × 1.618 = 4.236

4.236 × 1.618 = 6.854

6.854 × 1.618 = 11.089​

قد تكون النسبة لديك مرتفعة جدًا. على سبيل المثال، إليك ما تبدو عليه الفواصل الزمنية الأخيرة على مقياسنا استنادًا إلى النسبة الذهبية:

النسبة الذهبية (1:1.618)

11.089 × 1.618 = 17.942

17.942 × 1.618 = 29.03

29.030 × 1.618 = 46.971

46.971 × 1.618 = 75.999

75.999 × 1.618 = 122.966

كما ترون، أصبحت الفواصل الزمنية بين الأرقام كبيرة جدًا. بالنسبة لمعظم الواجهات، هذه الفواصل الزمنية ليست مناسبة - هناك حاجة إلى أقل. لحسن الحظ، في

كم مرة تتساءل " ما هو الخط الأفضل استخدامه للموقع؟"، كثير من الناس لا ينتبهون لهذا الأمر، ولكن دون جدوى!

يريد كل مشرف موقع مبتدئ أن يجعل موقعه على الويب متميزًا بطريقة ما بحيث يبرز من بين الموارد التي لا تعد ولا تحصى والتي تم إنشاؤها باستخدام القالب.

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

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

الخطوط المستخدمة بشكل متكرر

الخطوط القياسية للموقع هي:

• تايمز نيو رومان؛
• اريال. جورجيا؛
• تأثير؛
• منجنيق MS .
• فيردانا وآخرون.

يتم تضمينهم في المجموعة الآمنة. دعونا ننظر إليهم بمزيد من التفصيل:

اريال. ميزة هذا الخط المضغوط هو ارتفاع الحروف.

تاهوما. بفضل الحروف متوسطة العرض، فهو مثالي للمقالات التقنية.

منجنيق MS. الأكثر غير مناسبة للقراءة. حتى مع الحجم الطبيعي الذي يتراوح بين 12 و14 بيكسل، يجب عليك النظر إلى النص، مما يؤدي إلى إجهاد العين.

تايمز نيو رومان. الخط الأكثر شيوعا واستخداما على نطاق واسع. مثالية للقراءة، ولكن بحجم 12 بيكسل تبدو صغيرة.

MS بلا شريف. يعتبر أحد خطوط نظام Windows. تتم كتابة جميع التذكيرات والتنبيهات الخاصة بنظام التشغيل عليها.

جورجيا. مشابهة جدا للتايمز. لكن لها رقاقات ونهايات أوسع وأكثر وضوحًا.

هزلية بلا MS. أكثر ما يكرهه المجتمع . ويتميز بخطوط مستديرة ناعمة، واعوجاج طفيف في الحروف، ومسافة صغيرة بين الحروف.

ساعي جديد. على غرار تلك التي كانوا يكتبون بها على الآلة الكاتبة. يتميز Courier New بأحرف واضحة وسهلة القراءة مع ضغط بسيط. -ناقص: اللون غير المشبع.

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

فيردانا. خيار الخط المثالي لموقع الويب. بفضل المسافة المثالية بين الحروف وعرضها، تصبح القراءة مريحة.

إذًا، ما هو أفضل خط يمكن استخدامه على موقع الويب؟ وفقا للاستطلاعات الأخيرة بين مستخدمي الإنترنت، فإن الخيار الأفضل هو جعل العنوان باستخدام Verdana، والنص الأساسي باستخدام Times New Roman. ولكن من الممكن أن يتم جعل النص بأكمله فيردانا.

يحدث أن الخط لا يتم عرضه على الكمبيوتر. في هذه الحالة، لا ينبغي عليك تحديد خط واحد، بل عدة خطوط.

على سبيل المثال، Verdana، Impact، Trebuchet MS. ثم المتصفح، بعد الفشل في استخدام Verdana، سيحاول استخدام Impact ثم Trebuchet. إذا لم يتم عرض جميع الخطوط المحددة، فسيقوم النظام بتعيين الخطوط الخاصة به - افتراضيًا. وبالتالي، يمكنك بسهولة وببساطة تصميم موقع ويب حسب ذوقك، وجعله مشرقًا وغير عادي. الشيء الرئيسي هو منع حدوث مشكلات عند عرض الموارد على أجهزة الكمبيوتر الخاصة بزوار الموارد.

الابتكار من ياندكس. القياس يهم!

باتباع خوارزمية الهاتف المحمول "فلاديفوستوك"، صنعت ياندكس عامل الترتيبحجم الخط . الآن أصبح حجم النص على موقع الهاتف المحمول مهمًا ومعياره هو 12 سم PX (أو أكثر). يمكنك التحقق من الخط بحثًا عن "ملاءمة الهاتف المحمول" في Yandex.Webmaster.

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

غالبًا ما يتبين أن المواقع التي تكون فيها النصوص مريحة وقابلة للقراءة للمستخدم سيكون لها حجم كبير في إصدارات الأجهزة المحمولة.

مثير للاهتمام! أنواع الخطوط المختلفة ليست بنفس الحجم. إذا كنت تريد تكبيره، فلن تحتاج إلى تغيير حجم البكسل الخاص به. يمكنك تجربة اختيار الخطوط الأخرى. على سبيل المثال، إذا قمت بتعيين أبعاد Times New Roman وTahoma - 12 بيكسل - فسوف تبدو مختلفة. هذا الأخير سوف يبدو بصريا أكبر.

في الجزء الأول نظرنا. تم إيلاء الكثير من الاهتمام لمسألة سهولة قراءة النصوص على مواقعك. اليوم سنتعمق قليلاً في هذا الموضوع ونتحدث عن الخطوط.

الخطوط لها أهمية كبيرة في التصميم. في هذا المقال سنخبرك:

كيفية الجمع بين عدة خطوط في صفحة واحدة؛

كيفية إنشاء التباين باستخدام الخطوط.

1. أين يمكنني الحصول على الخطوط؟

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

يعد شراء الخط نوعًا من شراء ترخيص لاستخدام البرنامج، ولكن ليس حقوق الملف نفسه.

فيما يلي بعض الموارد للعثور على الخطوط:

• http://www.google.com/fonts/- كتالوج الخطوط المجانية من جوجل؛
• http://www.fontsquirrel.com/ - مجمع الخطوط ومحولها؛
• http://www.myfonts.com/ - كتالوج كبير من الخطوط؛
• http://www.fonts.com/ - دليل خطوط كبير آخر؛
• http://webfont.ru/ - مجموعة من الخطوط المجانية.

2. كيفية اختيار الخطوط؟

أي صفحة على الإنترنت تتكون من الخطوط. في بعض الأحيان يصبح من الضروري استخدام خطوط مختلفة في التصميم. ولكن كيف يمكنك معرفة الخطوط التي تتوافق معًا؟

عند العمل باستخدام المحرر المرئي، تتوفر أنواع مختلفة من الخطوط:

أسهل طريقة لتنسيق النص هي استخدام الخطوط من نفس الخط على الصفحة. بهذه الطريقة سوف تبدو متناغمة.

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

ما هو عدد الخطوط التي يجب استخدامها في التصميم؟

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

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

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

كيفية اختيار الخط الأساسي

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

عند اختيار خط للنص الرئيسي، عليك أولاً الانتباه إلى سهولة قراءته. من الأفضل عدم محاولة إعادة اختراع العجلة واستخدام الخطوط "المختبرة" التي بدت جيدة في المشاريع السابقة. يمتلك كل مصمم دائمًا العديد من الخيارات المثبتة في المخزون - وهذه هي الخطوط التي يجب استخدامها أولاً. إذا تحدثنا عن خطوط Google، فسيكون الخيار الأمثل هو Droid Sans وNoto Serif وCabin.

كيفية اختيار الخط للعناوين

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

يستخدم هذا المثال مجموعة من الخطوط FiraSansو ميريويذر.

الخيار 1: الاختيار الآمن

يتم إنشاء العديد من الخطوط في نسختين - sans serif وserif. على سبيل المثال، خطوط Scala Sans وScala Serif وMeta وMeta Serif وDroid Sans وDroid Serif. يمكن استخدام هذه الخطوط في أزواج دون أي خوف، نظرًا لأن شكل الحروف في sans وserifs متطابق تقريبًا، ولكنها في نفس الوقت تتناقض جيدًا مع بعضها البعض. بالنسبة لأولئك المصممين الذين ليسوا واثقين تمامًا من قدرتهم على اختيار الخطوط بشكل صحيح، فمن الأفضل استخدام هذه الطريقة، لأنها الأكثر أمانًا.

مزيج الخط DroidSansو درويدسيريف

الخيار 2: اللعب بالتباين

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

على سبيل المثال، يحتوي خط Noto Serif على مخططات حروف سلسة، وهو خفيف وسهل القراءة. في الوقت نفسه، فهي معبرة للغاية، وإذا كان من الممكن تطبيق هذه الكلمة على الخط، فهي ودية. ما هو الخط الأفضل للاقتران به؟ من الأفضل اختيار خط sans-serif ذو الخصائص المشابهة. أي أن الخط الشخصي يجب أن يكون له أبعاد متشابهة، ويجب أن تعكس حدوده الخطوط العريضة للخط الرئيسي. سيبدو Questa Sans جيدًا جدًا عند اقترانه بـ Noto Serif - فهو معبر جدًا وحديث ويتناقض جيدًا مع الخط serif.

مزيج الخط نوتو شريفو كويستا بلا

الخيار 3: زيادة التباين

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

من الأفضل استخدام مجموعة من الخطوط المتباينة في الصفحات المقصودة، ومواقع بطاقات العمل، وعند إنشاء اللافتات، وما إلى ذلك.

خط Cabin بسيط وجذاب وسهل القراءة. لا يمكنك تسميتها خفيفة، فهي كلها "مربعة" وديناميكية، ولكنها في نفس الوقت مثالية لكتابة النص الأساسي. يمكن استخدامه في الحالات التي تحتاج فيها إلى تعزيز عرض المعلومات وجذب انتباه القارئ. للحصول على خط متباين، يمكنك اختيار خط serif مثل Buenard. هذا الخط أكثر تقليدية ومحافظًا وباردًا إلى حد ما. وفي الوقت نفسه، تبدو رائعة عندما تقترن بالمقصورة، مما يسلط الضوء على ديناميكيتها بهدوئها.

مزيج الخط الطائرةو بوينار

خاتمة

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

ولكن في الواقع، لا يهم على الإطلاق ما هي الخطوط المستخدمة - الشيء الرئيسي هو النتيجة النهائية. في بعض الأحيان يكون الأمر أفضل عندما يخاطر المصمم ويجري تجارب باستخدام مجموعة من الخطوط المختلفة - وفي بعض الأحيان تؤدي مثل هذه التجارب إلى اكتشافات مفاجئة.