دليل استخدام Google Web Fonts لانشاء موقع الكتروني مميز

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

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

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

أنواع الخطوط ومتى تستخدمها

هناك الكثير من الطرق لتصنيف الخطوط. ولكن لأغراض إنشاء موقع الويب الخاص بك الأول ، تحتاج بالفعل إلى معرفة ثلاثة أنواع واسعة: serif ، sans serif ، والزخرفية.
الخطوط التي يمكنك استخدامها؟ على مواقع Jimdo ، يمكنك استخدام أي خط ويب من Google مجانًا. هناك المئات للاختيار من بينها — تصفح “مكتبة الخطوط” بالكامل في Google لاختيار المفضلة لديك.

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

serifs .” Serifs … مثل الذوق للحروف. الكلاسيكية serifs على اليسار ، sans serif على اليمين.

الخطوط Serif

تُعد الروايات شائعة في عالم الطباعة (تذكر الطباعة؟) لأنها تجعل من السهل على القارئ اتباع قوالب النص الصغير على الورق. سترى على الأرجح الخطوط المائلة في المجلات والكتب والصحف. بعض خطوط serif الكلاسيكية هي Vollkorn و Merriweather و EB Garamond و Libre Baskerville.
خطوط Sans serif
عندما يبدأ الناس في قراءة المزيد على شاشات الكمبيوتر ، اكتب المصممين الذين قاموا بإنشاء خطوط sans serif. تخلصوا من الازدهار وبدلاً من ذلك فضلوا الخطوط بمظهر عصري وبسيط يظهر بوضوح على هيئة بكسل بدلاً من الحبر. بعض خطوط sans serif الشائعة هي Open Sans و Roboto و Lato و Ubuntu.

الخطوط الزخرفية

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

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

في ما يلي أمثلة لمواقع جيمدو المختلفة وخطوط الويب من Google التي تستخدمها:
الخط:

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

عندما تقوم بتصميم موقعك على الويب ، نوصي عادةً باختيار خطين أو ثلاثة:
واحد لنص جسمك / فقرة: لا يمكنك أن تخطئ في خط sans serif في “عناصر النص” الخاصة بك مقروء ، لا سيما في الأحجام الصغيرة. قم بتوجيه الخطوط المربوطة أو المسننة ، والتي تصبح صعبة القراءة في أكثر من بضع كلمات.
واحد لعناوينك: هنا يمكنك استخدام شيء أكثر ديكورًا أو متعة نظرًا لأنك ستستخدمه فقط للقطع القصيرة من النص. يمكنك أيضًا استخدام الخط الشامل بالكامل. يمكن أن يساعد اختيار خط فريد هنا في إضافة شخصية إلى موقعك على الويب.
أحدهما لقوائم وأزرار التنقل: يمكنك تكرار أحد أول خطين لديك هنا ، أو اختيار خط إضافي ثالث. تذكر فقط أنه يجب أن تكون قوائم التنقل الخاصة بك وعبارات الحث على اتخاذ إجراء سهلة القراءة ، لذلك نوصي بالابتعاد عن الخطوط المربوطة أو ذات الخطوط المفرطة. كما هو الحال مع العناوين ، يمكنك استخدام خط شامل تمامًا هنا.
يستخدم هذا الموقع عينة الخط sans serif Raleway لقائمة الملاحة والنص الأساسي ، والخط المزخرف Sacramento للعناوين.
بشكل عام ، تأكد من العثور على توازن جيد. وكما يقول Ian Yates of Tuts + ، “فكر في الخطوط الخاصة بك كضيوف في الطاولات في حفل زفاف. عادة ما يكون أحد الفنانين كافيًا لأن الكثير من الشخصيات القوية يمكن أن تجعل الجو محرجًا. ”
يمكنك استخدام أقل من هذا؟ تتحدى. لا يوجد شيء خاطئ في اختيار خط واحد فقط لموقعك على الويب وتمييز عناوين ونصوص الجسم باستخدام الحجم واللون بدلاً من ذلك.
هل يمكنك استخدام المزيد؟ هذا هو اصعب قليلا. الخطوط خلق التناسق والتسلسل الهرمي في جميع أنحاء موقع الويب الخاص بك. إذا كنت تستخدم الكثير من الخطوط المختلفة ، فالأمر يشبه وجود عدد كبير جدًا من إشارات الشارع في أحد التقاطعات. كما أنه يأخذ بعيدا عن تأثير العلامة التجارية الذي تحاول تحقيقه.

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

أو ماذا عن استوديو فني للأطفال يستخدم خطًا تقليديًا أكثر جدية مثل Libre Baskerville …

… مقابل الخط الذي يتناسب مع شخصية العلامة التجارية لأستوديو الأطفال بشكل أفضل ، مثل لوندرينا سكتش.

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

اختيار الخطوط التي تتقاطع معًا
عندما تقوم بإقران الخطوط ، فأنت تحاول تقديم الوحدة والتنوع.
بعبارة أخرى ، لا تريد أن تكون الخطوط متشابهة إلى حد كبير بحيث تبدو متشابهة أكثر من اللازم (وبالتالي يهزم هدف استخدام خطوط مختلفة). أنت أيضا لا تريد لهم أن يكونوا مختلفين تماما بحيث يصطدمون أو يبدو أنهم يأتون من عوالم مختلفة تماما.
في ما يلي بعض إستراتيجيات مطابقة الخط المختلفة:
التباين
إذا اخترت خطًا مزخرفًا قويًا بالفعل لعناوينك ، فقد توازنه بخط بسيط sans serif لن ينافس على الاهتمام.
التباين: يمكن أن تكون باسيفيكو مقترنة بشعار Roboto
Personality
Fonts حديثة وجريئة وناعمة وفاخرة ومبهجة. وينبغي أن تعكس هذه “الشخصيات” الخطية شخصية علامتك التجارية. إذا كنت تبحث عن مظهر أنثوي أكثر لموقعك على الويب ، فيمكنك اختيار خطين يشتركان في هذه الشخصية ، حتى وإن بدا مختلفًا.
شخصية: الرقص النصي & Josefin Sans
الفترة الزمنية
العديد من الخطوط جعل المراجع التاريخية. إذا كنت ترغب في استحضار عصر معين ، فيمكنك اختيار خطين رجعيين أو خطين من العالم القديم.
الفترة الزمنية: Vollkorn & Quattrocento
Concordance
يكون توافق الخطوط أقل صعوبة من التباين ، لكن النسب المتشابهة أو أشكال الحروف المشابهة يمكن أن تساعد خطين معاً. ستتقاسم الخطوط من نفس العائلة (مثل Roboto و Roboto Slab) سمات مماثلة.
التوافق: Droid Serif & Droid Sans

أين تجد تركيبات الخطوط المثالية من Google
إذا كنت من المؤمنين بحكمة الحشود ، فهناك الكثير من المواقع التي توصي باستخدام أزواج الخط حتى لا تضطر إلى إنشائها بنفسك.
مبادرة 25 × 52: يقدم هذا المشروع المستمر إلهامًا رائعًا من الخطوط مع مقاطع من Aesop’s Fables تم إعدادها في مجموعات مختلفة من خطوط Google. من السهل التمرير حتى إذا كنت لا تبحث عن خطوط جديدة.
دليل Google Web Fonts: إلى جانب عامل تصفية وأمثلة لطيفة ، يقدم دليل Google اقتراحات الاقتران الشائعة لكل خط في عمود على الجانب الأيسر.
Fontpair: يحتوي هذا الموقع الإلكتروني المريح على قائمة جيدة من التوصيات الخاصة بنوع الخط ، مصنفة حسب النوع (مثل Serif / sans-serif ، Cursive-serif). أفضل من ذلك ، يمكنك كتابة النص الخاص بك مباشرة في موقعه على الانترنت لمعرفة كيف يبدو مع كل التحرير والسرد.
TypeConnection: هل تريد الحصول على المزيد من المتعة مع هذا؟ تقوم Type Connection بإعداد البحث عن الخط الخاص بك على هيئة لعبة مواعدة ، حتى يمكنك ممارسة انتقاء المباريات الجيدة.
إذا كنت ترغب في معرفة المزيد حول إقران الخطوط ، فقم بالاطلاع على Typeconnection ، فقد حولتها إلى لعبة مواعدة.
البحث عن الخطوط من المواقع الأخرى
ماذا لو صادف أنك صادفت موقعًا إلكترونيًا باستخدام الخطوط التي تحبها فقط؟ حسنا ، أنت محظوظ ، لأنه من السهل أن ننظر تحت غطاء محرك السيارة ونرى أي الخطوط التي يستخدمونها.
يقدم كل من Chrome و Firefox المكونات الإضافية التي ستخبرك بالخطوط الدقيقة التي تشاهدها. WhatFont و Fontface Ninja كلاهما خيارات رائعة. شغِّل المكوِّن الإضافي ، ثم انقر على النص الذي تريد معرفة المزيد عنه. سوف ينبثق اسم الخط وحجمه وتباعده!
أحب نظرة من خط معين على موقع الويب المفضل لديك؟ سيخبرك Font Face Ninja بما هو عليه وما حجمه والمسافات التي يستخدمونها.
نصيحة أخيرة: تقرأ القراءة دائمًا التصميم
تقدم Google المئات من خطوط الويب ، ولكن هذا لا يعني أنها كلها جيدة لمواقع الويب. إذا كنت تشك في أن الخط قد يكون من الصعب جدًا قراءته ، فمن المحتمل أن يكون ، حتى لو كان خطًا تحبه حقًا.
تذكر أيضا أنه مع الخطوط ، حسنا … حجم الأمور. بالنسبة إلى نص أساسي ، يجب أن يكون حجم الخط عادةً 16 بكسل على الأقل. ولكن هذه القاعدة تعتمد بالفعل على الخط الذي تختاره ، حيث أن بعض الخطوط تظهر أصغر بكثير من غيرها ، حتى إذا كانت بنفس الحجم.
انظر إلى موقع الويب الخاص بك على شاشات مختلفة الحجم للتأكد من أن الأشخاص سيكونون قادرين على قراءة ما كتبته بسهولة. يجب أن تكون خطوط الزخرفة عادة أكبر من أن تكون مقروءة ، على سبيل المثال.
تظهر الخطوط BenchNine ، على اليسار ، وأوبونتو ، على اليمين ، هنا في 16 نقطة ، ولكن مع نتائج مختلفة بشكل كبير.

كما هو الحال في الحياة الحقيقية ، لا يوجد خط “مثالي” أو إقران الخط المثالي. إذا وجدت مجموعة الخطوط التي تعجبك ، وقراءتها ، انتقل معها ، واستمتع!

Leave a Reply

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *