بالنسبة للمصمم الجديد، قد يبدو موضوع خطوط الويب معقدًا وحتى مخيفًا، لكن لا ينبغي أن تيأس، لأنه مع مرور الوقت، و من خلال دراسة المعلومات الأساسية وممارستها، سوف تصبح محترفاً.
علاوةً على ذلك، أصبح تصميم الويب الآن أحد أكثر المجالات شعبية، من الشركات الناشئة إلى الشركات ذات التاريخ الطويل، تريد كل علامة تجارية أن يكون لها موقع ويب خاص بها وربما تطبيق أيضًا، بالتالي ستصبح الخطوط التي سيتم اختيارها للموقع الإلكتروني، أو التطبيق جزءًا من هوية الشركة.
نظرًا لأنه يتم اختيار فئة خطوط الويب تحديداً بشكل متزايد لتصميم مواقع الويب والتطبيقات، سوف نتحدث عنها.
خطوط الويب
تحتوي الأجهزة التي تستخدمها (الكمبيوتر المحمول، والهاتف الذكي، والكمبيوتر اللوحي) على خطوط نظام مثبتة مسبقًا تُسمى خطوط النظام. تستخدم معظم مواقع الويب والتطبيقات الخطوط التي تم تحميلها على خادم الويب، هذه هي خطوط الويب.
تم تصميم خطوط الويب لتظهر بشكل جيد على مجموعة متنوعة من الأجهزة، وأنظمة التشغيل، والمتصفحات. و في الظروف المثالية، فهي تظهر بشكل مطابق للطريقة التي قصدها المُصمِّم.
المشكلة هي أن نفس الموقع سيتم فتحه من قبل آلاف المستخدمين من أجهزة مختلفة تمامًا، من هاتف ذكي عصري مُزوَّد ببرامج جديدة، ومن شاشة كمبيوتر ذات بطن نظام تشغيله أقدم من معظم الشبكات الاجتماعية.
كما قد تتخيل،و نظرًا للميزات التقنية، لا يمكن أن يبدو الخط مماثلاً تمامًا لجميع المستخدمين. تتلخص مهمة المُصَمِّم في مراعاة أكبر عدد ممكن من الفروق الدقيقة حتى يظهر الخط لغالبية الأشخاص.
خطوط الويب الآمنة أو القياسية
خطوط الويب الآمنة هي تلك التي تدعم جميع أنواع أنظمة التشغيل والمتصفحات، لكن على الجهة الاخرى، اذا تمعَّنا بالنظر، فسنكتشف أنه لا وُجود لخطوط آمنة تماما.
يُشار غالبًا إلى الخطوط الآمنة على أنها خطوط قياسية، لأنها تأتي مُثبَّتة مسبقًا على العديد من الأجهزة. هذا هو السبب الذي يجعلها تظهر عند معظم المستخدمين.
يمكن العثور على قائمة بخطوط الويب الآمنة على الإنترنت، وهي خطوط معروفة للجميع، هذه هي مشكلة المصمم عند استخدام مثل هذه الخطوط. تكمن المشكلة بأنَّهُ قد تم بالفعل استخدام هذه الخطوط كثيرًا لدرجة أنها بدأت تبدو مبتذلة ومملة للمستخدم. باستخدام هذه الخطوط من الصعب التأكيد على طابع العلامة التجارية، لذلك نادرًا ما تصبح هذه الخطوط جزءًا من هوية شركة ما. ومع ذلك، يجب على المُصَمِّم الطَمُوح التعرف عليهم.
تثبيت الخطوط المخصصة على موقع الويب الخاص بك
لقد وصلنا إلى الجزء الأكثر إثارةً للاهتمام من المقال!
يُعد استخدام الخطوط القياسية أمرًا آمنًا نسبيًا، ولكنه مُمِل بالنسبة للمُصَمِّم. إذا كنت تريد اختيار خط مختلف، فإن الطباعة الحديثة تقدم مجموعة كبيرة من خطوط الويب في مجموعة متنوعة من الأنماط.
كل هذه الخطوط تسمى غير قياسية، و قد تُوجد فيها بعض الاختلافات:
- حسب نوع الخط: serif, sans serif, slab type؛
- حسب الغرض: للنصوص، أو العناوين، أو العرض؛
- حسب الشخصية: صارمة أو أنيقة، محايدة أو جريئة؛
- بالتشبع: قد تشمل العائلة عدة فصائل فرعية وأنماط.
- حسب تكوين الشخصية، وعدد الأنماط، واللغات المدعومة.
الأهم من ذلك بكثير هو أنها سوف تختلف فيما بينها في الجودة. كلما كان تصميم الخط أفضل من الناحية الرسومية والتقنية، زادت فرصة عرضه بشكل جميل وصحيح على أكبر عدد ممكن من الأجهزة.
ما الذي يجب الانتباه إليه؟
- على سمعة الاستوديو أو المصمم الذي أنشأ المحرف. اسأل المصممين الآخرين عن تجاربهم، واقرأ المراجعات، وانظر إلى مواقع الويب، تفحصها و تأكد أنها حقيقية، ألقي نظرة أيضا على تطبيقات الأجهزة المحمولة التي تستخدم الخطوط التي تهمك.
- على تقنين الأحرف، وسهولة القراءة، والملامح. من الافضل ان تنتبه وتتفحص الخط بأحجام مختلفة. تَعرِض العديد من الاستوديوهات تنزيل نسخة تجريبية من الخط لتجربته مجانًا، مثل استوديو TypeType، حيث تكون التجارب متطابقة تمامًا مع الخطوط التجارية من حيث التركيب والخصائص التقنية.
عند قيامك بالفعل بتحديد الخط المطلوب و شِراءِه، كل ما تبقى هو تثبيته.
إذا كنت تستخدم WordPress، فيمكنك تثبيت المكون الإضافي Use Any Font، والذي يسمح لك بتحميل الخطوط إلى موقعك.
وفي حالات أخرى، يمكنك استخدام استضافة موقع الويب الخاص بك لتنزيل الخط. أول شيء تحتاجه هو الترخيص المناسب الذي يسمح لك باستخدام الخط على موقع الويب الخاص بك. على سبيل المثال، بالنسبة لـ TypeType، فهو ترخيص ويب.
ستحتاج إلى ملفات الخطوط بالتنسيقات المطلوبة (سنتحدث عن هذا بعد قليل)، والتي يجب وضعها في CSS عبر قاعدة font-face@ و تعيين اسم الخط، وعنوان موقعه، ووزنه.
لاحقًا، باستخدام قاعدة font-face@، يمكنك تنسيق النص عن طريق اختيار نمط الخط، وحجمه، ولونه. يمكنك أيضًا تحديد خط احتياطي من بين الخطوط الآمنة، والتي سيتم عرضها في حالة عدم إمكانية تنزيل خط ويب غير قياسي على جهاز المستخدم.
تنسيقات الخطوط وأحجامها في تصميم الويب
يمكن أن تأتي خطوط الويب بتنسيقات مختلفة.
يتم استخدام تنسيقات الخطوط التالية في تصميم الويب:
- TTF (TrueType Font);
- OTF (OpenType Font);
- SVG (Scalable Vector Graphics);
- EOT (Embedded Open Type);
- WOFF и WOFF2 (The Web Open Font Format).
يمكنك استخدام تنسيقات متعددة في نفس الوقت لزيادة فرص عرض الخط على أجهزة مختلفة، التنسيقات الأكثر شيوعًا لتصميم الويب هي: WOFF، وWOFF2، ويتم عرضها بنجاح على معظم الأجهزة الحديثة.
يُعَد حجم خط الويب معيارًا مهمًا آخر. كلما كان ملف الخط أخف، كلما تم تحميل الخط على الموقع بشكل أسرع. على سبيل المثال، إذا قمت بشراء خط يحتوي على اللاتينية والسيريلية الموسعة، ولكنك تحتاج فقط إلى المجموعة القياسية، فيمكننا تقليل وزن الخط. إذا كنت تستخدم خط من TypeType، فيرجى طلب التخصيص. سنقوم بتخفيف وزن ملف الخط عن طريق إزالة اللغات أو الأحرف التي لا تحتاج إليها.
اللون والنمط وحجم الخط على الموقع
باستخدام قاعدة font-face@، يمكنك التحكم في كيفية عرض الخط على الموقع، بإمكانك ضبط لون الخلفية، أو لون الخط، أو الحجم، أو النمط.
- لتحديد لون الخط، استخدم خاصية “color”. لتغيير خلفية النص، استخدم “background-color”. يمكنك استخدام اسم اللون أو رمز RGB الخاص باللون.
- لتحديد حجم الخط، استخدم خاصية “font-size”، يمكن الإشارة إلى الحجم بالبكسل أو استخدام قيمة em.
- وبالطبع، يمكنك اختيار النمط المائل أو الغامق لأجزاء محددة من النص. استخدم “font-style” و”font-weight”.
الاختبار
أهم شيء عند العمل مع خطوط الويب هو الاختبار.
بعد الانتهاء من العمل، تحقق من النتيجة على جميع الأجهزة، والمتصفحات، وأنظمة التشغيل المتاحة.
من الأفضل إِشراك كل شخص تعرفه في اختبار التصميم، بدلاً من تلقي تعليقات غير سارة من العميل لاحقًا بعد اكتمال المشروع.
ما الخطوط التي تختارها لمواقع الويب؟
حتى بين الخطوط عالية الجودة والمناسبة تمامًا لتصميم الويب، قد يكون من الصعب اختيار الخط المناسب للمشروع.
لقد كتبنا بالفعل مقالًا عن الطباعة، تحدثنا فيه عن الأنواع الرئيسية للخطوط. ستجد فيه توصيات لاختيار الخط المناسب للمشاريع المختلفة.
وفي مقال : “الاختلاف بين Serif و Sans-Serif” تحدثنا عن فئتي الخطوط الأكثر شيوعًا. تحقق من ذلك إذا كنت تريد معرفة تأثير كل خط من هذه الخطوط على العلامة التجارية.
عادةً ما تستخدم تطبيقات الهاتف المحمول ومواقع الويب خطين، خط كبير وأكثر تعبيراً للعناوين، و خط أكثر حيادية للنصوص.
عند اختيار خطوط النص، يجب أن تكون الاولوية لسهولة القراءة، حيث يصل معظم المستخدمين إلى مواقع الويب عن طريق الأجهزة المحمولة، بالتالي يجب أن يشعروا بالراحة أثناء قراءة النص. من الأفضل اختيار خط محايد بطبيعته حتى لا يصرف الانتباه عن القراءة.
انتبه إلى عوامل التصميم الإضافية، من المستحيل قراءة النص الساطع والمُتباين على خلفية داكنة، هذا سيؤدي الى ارهاق العين بسرعة.
مزج الخطوط لموقع الويب الخاص بك
عند اختيار خطوط متعددة لتصميم موقع الويب الخاص بك، كن حذرًا. يجب ألا تستخدم أكثر من خطين، وأكثر من 3 أنماط في موقع ويب واحد. من الأفضل الالتزام بالبساطة، لأنها تقلل من سرعة تحميل الصفحة وتجعل التصميم أكثر دقة.
لقد كتبنا مقالاً عن أزواج الخطوط وكيفية استخدامها في التصميم. تعرف على كيفية تحديد الخطوط باستخدام الخطوط الأكثر مبيعًا في الاستوديو كمثال: sans serif TT Norms® Pro وserif TT Norms® Pro Serif.
أفضل 10 خطوط ويب لمواقع الويب من TypeType
سوف نشارِكُكَ مجموعة مختارة من 10 خطوط ويب من الاستوديو، تبدو أنيقة على مواقع الويب، وتطبيقات الهاتف المحمول.
لنبدأ بخطوط النص.
تُعبتر هذه الخطوط آمنة لتنسيق كميات كبيرة من النص، نظرًا لسهولة قراءتها، وطابعها المحايد.
TT Interphases Pro
هذا ليس مجرد خط ويب جيد، بل هو خط مثالي لواجهات تطبيقات الهاتف المحمول ومواقع الويب. تم إنشاؤه بناءً على بحث مكثف، خط Sans-Serif جديد بنسب عرض متساوية، و يتميز بكونه مقروء، ولا تشوبه شائبة.
TT Norms® Pro
من الصعب إحصاء عدد المواقع التي صُمِّمَت باستخدام خط TT Norms® Pro، فهناك أكثر من 1000 موقع، منها العلامات التجارية Cartoon Network، وCSN، وPinarello، وغيرها.
خط Sans-Serif هندسي ، طابعه المحايد وتعدد استخداماته معروف لدى العديد من المُصمِّمين.
TT Hoves Pro
تم استخدام هذا الخط على مواقع الويب الخاصة بشركة Telefonica وTrue Digital وStudio Lenzing وشركات أخرى. يعتبر هذا الخط بشكل عام خط Sans-Serif عالمي، ذو طابع مميز، ولكنه مُقَيِّد.
TT Livret Text
خط Serif نصي حديث وجمالي متعدد الاستخدامات، وهو يعتبر النص الاكثر شعبية في الاستديو من نصوص Serif. غالبًا ما يتم تصميم العناوين الموجودة على مواقع الويب بخطوط مُعَبِّرَة بطبيعتها. نحن نشارك أفضل خطوط الويب المستخدمة للعرض.
TT Lakes Neue
عائلة كبيرة من خطوط Sans-Serif الهندسية، يُمكنك العثور على مجموعات تكنولوجية أنيقة من بينها. يمكن التحكم في نمط الخط باستخدام أنماط مختلفة وبدائل أسلوبية. يمكن استخدامها سواء للعناوين أو النصوص.
TT Espina
خط Sans-Serif أنيق ذو أبعاد ضيقة و مُذَنَّبات حادة، تعتبر مثالية للقطاع الفاخر.
TT Autonomous
خط ذو أبعاد واسعة مناسب للمشاريع التكنولوجية، و يعتبر بشكل عام من خطوط Sans-Serif الجميلة، والمناسبة لمجموعة متنوعة من المهام.
TT Trailers
تم تصميم TT Trailers كخط لصناعة الأفلام، وقد تجاوز استخدامه ذلك، وأصبح المُفَضَّل لدى العديد من العلامات التجارية الكبرى.
TT Tsars
خط Sans-Serif ذا طابع راقي، شكلُه الرقيق الأنيق سيجعل عناوينك بارزة ولا تُنسى.
TT Travels Next
خط Sans-Serif فائق الحداثة مناسب للعناوين.
شارك خطوط الويب المفضلة لديك معنا، واطرح الأسئلة حول تصميم الويب على شبكات التواصل الاجتماعي.
