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

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

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

كان توماس لورينافيسيوس مهتمًا بالخطوط التي يفضل مصممو الويب استخدامها في عملهم.

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

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

خلال الاستطلاع، قام مصممو الويب بتسمية 73 خط مختلف– 46 مجانية و27 مدفوعة.

تبين أن الخطوط المفضلة لدى مصممي الويب هي: Helvetica، وArial، وGeorgia، وGotham، وMyriad Pro، وDIN، وFutura، وLeague Gotic، وCabin، وCorbel.

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

أفضل 10 خطوط مجانية مفضلة لمصممي الويب

اختار المصممون الذين شملهم الاستطلاع أفضل 10 خطوط لرسومات الويب. ولم يأخذ هذا في الاعتبار الخطوط المثبتة افتراضيًا في نظام التشغيل، مثل Arial أو Verdana أو Times New Roman أو Georgia أو Tahoma. (هذا غريب بعض الشيء - في المقام الأول الخط الموجود في نظام التشغيل).

أفضل 10 خطوط مدفوعة مفضلة لمصممي الويب

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

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

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

1. مونتسيرات

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

2. أبريل فاتفيس

يعد Abril Fatface جزءًا من عائلة خطوط كبيرة تأتي في 18 نمطًا تم إنشاؤها لأغراض مختلفة. يتمتع هذا الخط بحضور قوي وأنيق، مما يجعله حلاً رائعًا لإنشاء عناوين جذابة. غالبًا ما يتم دمجه مع Lato وOpen Sans وDroid Sans.

3. عرض بلاي فير

نظرًا لارتفاع x الكبير والخطوط الصغيرة للأحرف، فإن Playfair Display مناسب أيضًا لكتابة العنوان، خاصة إذا كانت المساحة محدودة. إنه يتزاوج جيدًا مع جورجيا وغالبًا ما يستخدم مع أوزوالد ولاتو وأرفو.

4. جي تي والشيم

يُستخدم GT Walsheim في العديد من المدونات اليوم، وهو يمثل الشكل الهندسي sans serifs وهو جزء من عائلة Grilli Type. يتعين عليك الدفع مقابل مجموعة كاملة من الخطوط، لكن Grilli Type يقدمها مجانًا نسخه تجريبيهجي تي والشيم.

5. ميريويذر

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

6. جوزفين سانس

Josefin Sans مستوحى من التصميم السويدي العتيق ويتميز بجماليات هندسية أنيقة.

7. الجاذبية واحد

يعتمد Gravitas One على "الوجه السمين في المملكة المتحدة" الخط الإعلانيوالتي ظهرت خلال الثورة الصناعية في إنجلترا. يبدو هذا الخط رائعًا في الحجم المتوسط ​​و على نطاق واسعوهو مناسب للعناوين والعناوين وعلامات التبويب.

8. جورا

تكرر حروف هذا الخط أشكال حرف Kaya-li. كما أنه يحتوي على الحروف الرسومية السيريلية و الأبجدية اليونانية. ويتوفر بالأوزان الخفيفة والعادية والمتوسطة والجريئة.

9. الدوري القوطي

تم تصميم League Gothic في الأصل بواسطة Morris Fuller Benton لصالح شركة American Type Founders Company في عام 1903، وقد وجد استخدامًا جديدًا مع التحديث وإضافة حروف رسومية جديدة.

10. مضيق بحري

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

11. قطيفة

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

12. بولي

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

13. الجنتيوم الأساسي

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

14. فتح بلا

Open Sans هو ممثل للبشرية الإنسانية. هذا الخط مختلف درجة عاليةالوضوح ويتم تكييفه لكل من واجهات الويب والجوال. وهو خط غير مائل ذو نمط بسيط من الحروف، ويتميز بمظهر محايد ولكنه لطيف بدرجة كافية بحيث يمكن استخدامه لمجموعة متنوعة من الأغراض.

15. دفتر الأستاذ العادي

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

16. سيجنيكا

يمثل خط الويب المجاني هذا خط sans serif. يسمح التباين المنخفض والارتفاع x المرتفع لـ Signika بالعرض بشكل جيد على الشاشة. اختيار واسعتتضمن الرموز الرموز والصور التوضيحية والسهام.

17. جوزيفين سلاب

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

18. المنتدى

كما يوحي الاسم، هذا الخط روماني جيد للعناوين caps lockولكنه مناسب أيضًا لعرض النصوص. النسب الأنيقة لهذا الخط تذكرنا بـ العمارة الكلاسيكيةبأقواسها نصف الدائرية وأفاريزها الأفقية وأعمدتها الرأسية.

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

20. أرفو

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

21. بيفان

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

22. المعيار القديم TT

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

23. كريون

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

24. الروبوت بلا

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

25. الإيطالية

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

26. فولكورن

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

27. الممثل

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

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

31. أوبونتو

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

32. روزاريو

Rosario هي لعبة بلا رقيق إنسانية كلاسيكية مثالية لتصميم فقرات النص.

33. روبوتو بلاطة

يعد Roboto Slab أحد الخطوط من عائلة Roboto. إصدار الشريط ملفت للنظر بشكل خاص الأشكال الهندسيةوالمنحنيات المفتوحة. إنها مناسبة أيضًا لشاشات الأجهزة والإصدارات المطبوعة من النصوص.

34. أوزوالد

الخط عبارة عن نسخة معدلة من الخط الكلاسيكي Alternate Gothic sans serif. تم تحديث Oswald مؤخرًا ليأتي بمجموعة متنوعة من الأوزان ومجموعة أحرف موسعة وتقنين أفضل.

35. الجمود

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

36. نص قرمزي

يمكن استخدام هذا الخط النسبي الكلاسيكي المصمم بعناية لعرض كميات كبيرة من النصوص وعناوين الكتابة.

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

بواسطة Deni K لـ Civil Pour

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

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

أهمية الاتساق

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

قم بمطابقة خطوط علامتك التجارية الحالية

بواسطة FuturisticBug لـ Nordkern

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

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

لا توجد خطوط أو اتجاهات حتى الآن
—

لم تختر خطوط التوقيع الخاصة بك بعد؟ فيما يلي بعض الأشياء المهمة التي يجب التفكير فيها عند اختيار خط لتصميم الويب الخاص بك:

اكتشف شخصية علامتك التجارية

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

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

اختر الخطوط التي تتوافق مع علامتك التجارية

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

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

بواسطة غوتزا

بغض النظر عن الخط الذي تختاره في النهاية ليطابق خطك، تأكد من استخدام خط آمن للويب وسهل الاستخدام ومتوافق مع معظم المتصفحات. تسأل: "ماذا يعني أمان الويب؟" تابع القراءة لمعرفة ذلك.

ما هي خطوط الويب الآمنة؟
—

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

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

ما هي أنواع الخطوط المناسبة للويب ولماذا هي مهمة؟
—

عبر خطوط جوجل.

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

كيفية الجمع بين الخطوط المختلفة في تصميم الويب
—

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

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

بواسطة ماركو سيميتش.

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

كيف تؤثر أنواع الخطوط المختلفة على تصميم الويب الخاص بك
—

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

بواسطة LoudFrog للقهوة والاختناقات BJJ

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

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

قلها بالخط

—

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

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

الطباعة والرسائل

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

دعونا نكتشف ما الذي تؤثر عليه الطباعة حقًا في تصميم الويب.

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

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

أساسيات الطباعة في تصميم الويب

الخطوط في تصميم الويب

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

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

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

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

الطباعة الكلية والجزئية

كما ربما فهمت بالفعل من أسماء هذه المصطلحات:

المستوى الكلي - يبني الهيكل العامالنص، يحدد موضع المحتوى بالنسبة للتصميم؛

المستوى الجزئي - ينتبه إلى أصغر التفاصيل، المسافات، المسافات البادئة، الخ.

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

الاتجاهات الحديثةوالأساليب في تطوير الويب

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

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

يُنصح بتحديد الخطوط لتصميم الويب الوحدات النسبية(% أو "em")، وهذا يعزز القدرة على التكيف والمرونة في المحتوى. من المنطقي استخدام وحدات البكسل "px" الأكثر شيوعًا للحاويات غير المستجيبة، عندما تتحرك الكتل عندما يتغير حجم الشاشة، لكن الخط يظل ثابتًا.

زخرفة النص

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

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

الآن عن التخطيط. هناك قواعد هنا:

يجب أن يقتصر حجم كتلة النص على 40-50% من عرض الصفحة.

يجب أن يكون هناك مسافة 1.5 بين الفقرات.

يجب أن يكون التباين بين الخلفية والنص في حدود 75-90%.

الخط المريح للعين هو 12-16 بيكسل، ولكن حتى أصغر كتلة يجب ألا تقل عن 10 بيكسل.

يتم الحفاظ على تباعد الأسطر بالنسبة لحجم الخط ويتم قياسه كنسبة مئوية، ومن الناحية المثالية، ستكون نسبة 140-150% كافية.

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

أنماط CSS

يعد نمط CSS أداة للعمل مع الخطوط في تصميم الويب. من التطوير أنماط CSSتبدأ أي دورة تدريبية. ما هي الحاجة ل؟ لتلخيص كل الطباعة من الموارد! يجمع CSS الصفحات والكتل في وحدة واحدة ويتحكم في أي انحرافات عن المسار الرئيسي. كما تفهم، فكرة واحدة ليست كافية لتنفيذها؛ سوف تحتاج إلى المعرفة والمهارات.

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

الاتجاهات والأساليب الحديثة في تطوير الويب

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