5 خطوط آمنة للويب يمكنك استخدامها في موقع الويب الخاص بك

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

ما هو Web Safe Font؟

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

موصى به لك: 20 خطًا مذهلاً لتصميم الشعارات يحتاجها كل مصمم رائع.

لماذا تعتبر الخطوط الآمنة للويب مهمة؟

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

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

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

ما هي مجموعات الخطوط الخمس؟

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

1. مخطوطة (على سبيل المثال ، Zapf-Chancery)

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

2. Fantasy (مثل Star Wars)

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

3. Serif (على سبيل المثال ، Times New Roman)

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

4. Sans-serif (على سبيل المثال ، Helvetica)

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

5. Monospace (مثل Courier)

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

قد يعجبك: 11 خطًا رائعًا من خطوط Photoshop تحتاج إلى تجربتها (مجانًا!).

خطوط الويب الشائعة:

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

1. اريال

أحد أكثر خطوط sans-serif استخدامًا في كل من الوسائط المطبوعة والإلكترونية. إنه المعيار الواقعي. يصفه الإصدار 3.0 من OpenType بأنه:

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

وهو أيضًا الخط الافتراضي في مستندات Google.

2. تايمز رومان جديد

Times New Roman هو نوع مختلف من خط Times القديم من عائلة خطوط Serif. بتكليف من صحيفة The Times البريطانية في عام 1931 وصممها ستانلي موريسون ، المستشار الفني لشركة Monotype وهي شركة معدات الطباعة بالتعاون مع Victor Lardent ، من قسم الكتابة في ذراع Time's Advertising. لقد ظهر كواحد من أكثر الخطوط شيوعًا على الإطلاق وهو مثبت مسبقًا على معظم الأجهزة.

يُعد اسم Roman in Times New Roman إشارة إلى النمط الروماني ، وهو الجزء الأول من عائلة خطوط Times New Roman التي سيتم تصميمها. تعود أصولها إلى الطباعة الإيطالية في أواخر القرن الخامس عشر وأوائل القرن السادس عشر ، ولا علاقة للتصميم بروما أو بالرومان.

3. Helvetica

Helvetica أو Neue Haas Grotesk هو خط مستخدم على نطاق واسع من عائلة Sans-serif Font. تم تطويره في عام 1957 بواسطة مصمم الخطوط السويسرية Max Miedinger بمساهمة من Eduard Hoffmann. إنه مصمم بتصميم بشع جديد يتميز بارتفاع x عالٍ ، وإنهاء السكتات الدماغية على خطوط أفقية أو عمودية ، ومسافات ضيقة غير عادية للغاية بين الحروف ، وهذا يجتمع ليمنحه مظهرًا قويًا وكثيفًا. تم تصميمه في الأصل لاستخدامه كخط محايد يتمتع بوضوح كبير ، وبدون أي معنى جوهري في الشكل ، ويمكن استخدامه في مجموعة متنوعة من اللافتات واسمه Neue Haas Grotesk (New Haas Grotesque) ، وسرعان ما تم ترخيصه من قبل Linotype وأعيدت تسميته Helvetica في عام 1960 ، اللاتينية للسويسري. الخط محبوب من قبل المصممين بسبب حياده ويفضل من قبل العديد من العلامات التجارية الشهيرة مثل Jeep و Kawasaki و Motorola و BMW.

4. ساعي

خط Courier هو خط ينتمي إلى عائلة خطوط Serif. صممه Howard “Bud” Kettler في الأصل للآلات الكاتبة لشركة IBM ، وقد تم تكييفه للاستخدام كخط كمبيوتر ويتم تثبيت جميع أجهزة الكمبيوتر تقريبًا معه. نظرًا لطباعة Monospace ، وجدت في التسعينيات استخدامًا متجددًا في صناعة الإلكترونيات والكمبيوتر حيث يجب محاذاة أعمدة الأحرف باستمرار ، على سبيل المثال ، في الترميز حيث يكون الخط الافتراضي لكتابة أو تصوير أي نوع من التعليمات البرمجية.

وفقًا لمعايير الصناعة ، يجب كتابة جميع السيناريوهات في 12 نقطة Courier. استخدمته وزارة الخارجية الأمريكية كخط قياسي لجميع المستندات حتى يناير 2004. مع الاستخدام المتزايد في الصناعات الرقمية ، طور Courier متغيرات مع ميزات مثل علامات الترقيم الأكبر ، والتمييز الأقوى بين الأحرف المتشابهة (مثل الرقم 0 / الأحرف الكبيرة O والرقم 1 / الحرف الصغير L) ، إلخ لمزيد من وضوح الشاشة.

5. كاليبري

يعد خط Calibri أحد أعضاء عائلة خطوط Sans-serif التي صممها Lucas de Groot في 2002-2004. تم إصداره بشكل عام في عام 2007 ، مرفقًا مع Microsoft Office 2007 و Windows Vista. بدءًا من Office 2007 ، استبدل الخط Times New Roman باعتباره الخط الافتراضي في MS Word و Arial باعتباره الخط الافتراضي لـ MS Powerpoint و MS Excel و Microsoft Outlook و WordPad. إنه جزء من مجموعة خطوط ClearType المصممة للعمل مع نظام عرض نص ClearType بواسطة Microsoft لجعل النص أكثر وضوحًا للقراءة على شاشات الكريستال السائل (LCD).

أدوات الخط لسحبها

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

زوج الخط

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

Wordmark.it

يمنحك Wordmark.it معاينة سريعة للشكل الذي سيبدو عليه نصك بخط معين أو حتى خطوط متعددة معًا. ما عليك سوى إدخال النص في الشريط وفويلا سيُظهر لك كيف يبدو بخطوط مختلفة.

WhatTheFont

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

قد يعجبك أيضًا: 3 طرق مختلفة لإضافة خطوط مخصصة إلى سمة موقع WordPress الخاص بك.

كيفية إضافة خطوط الويب الآمنة إلى موقع الويب الخاص بي؟

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

1. افتح ملف header.php الخاص بك.

2. انسخ مصدر الخط / الكود القياسي. يمكنك عادة العثور على هذا عبر جوجل.

3. الصق الكود أعلى ملف الرأس.

4. قم بتحميل style.css الخاص بك ، ضع رمز الخط لتغيير نص الخط الذي تختاره.

في نهايتها ، يجب أن تبدو ورقة الأنماط الخاصة بك كما يلي:

 هذا المقال بقلم Abhyank Srinet. Abhyank حاصل على درجة الماجستير في الإدارة من ESCP Europe ولديه شهادة في الهندسة مع تخصص في الأجهزة والتحكم. دفعه اهتمامه بالمشهد الرقمي إلى إنشاء شركة ناشئة عبر الإنترنت للاستشارات التطبيقية (MiM-Essay) ، تركز على نشر معلومات عالية الجودة حول درجة الماجستير المهنية المبكرة.