دليل كامل لخطوط تصميم الويب في تخطيط الصفحة

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

نوع الخط

تنقسم الخطوط الإنجليزية (المحرف) إلى عدة فئات رئيسية.

1. سيريف

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

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

Serifs شائعة الاستخدام في تصميم الويب هي أوقات رومانية وجورجيا جديدة. الجانب الأيسر من الصورة أدناه هو Times New Roman Font مع 12 بكسل والجانب الأيمن هو جورجيا مع 12 بكسل.

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

2. Sans-serif/sans-serif

إذا لم يكن الخط رقيقًا ، يطلق عليه SSERIF أو Sans Serif. الرقم التالي هو sanserif.

هناك Sans Sans أكثر شيوعا نسبيا المستخدمة في تصميم الويب. هناك Arial ، Verdana ، Tahoma ، Helivetica ، Calibri ، إلخ. الشكل التالي هو Arial و Verdana و Tahoma من اليسار إلى اليمين:

تجدر الإشارة إلى أنه على الرغم من أن خطوط Serif تستخدم على نطاق واسع في الكتب ، نادراً ما تستخدم خطوط Serif على الإنترنت. نظرًا لأن دقة شاشة الكمبيوتر لا يمكن مقارنتها بقدر الكتب ، فمن الصعب التعرف على خطوط Serif من 10 إلى 12 بكسل على شاشة الكمبيوتر. الصورة أدناه هي مقارنة بين Verdana من 10px و Times New Roman من 10 بكسل دون ClearType. يمكنك أن تجد أنه يمكن تحديد Verdana على اليسار بشكل جيد. من الصعب للغاية تحديد رومانية جديدة على اليمين.

3. Monospace

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

خطوط Monospace المطلوبة للبرمجة لها المتطلبات التالية:

1. جميع الشخصيات متساوية في العرض.

2. أشكال شخصية موجزة وواضحة وموحدة ؛

3. يدعم مجموعات الأحرف الممتدة مع رمز ASCII 128 أو أعلى ؛

4. أحرف المسافة البيضاء (ASCII: 0 × 20) تساوي الشخصيات الأخرى ؛

5. من السهل التمييز بين الأحرف الثلاثة مثل "1" و "L" و "I" ؛

6. الأحرف الثلاثة مثل "0" و "O" و "O" من السهل التمييز ؛

7. من السهل التمييز بين الأجزاء الأمامية والخلفية من الاقتباسات المزدوجة والاقتباسات الفردية ، ومن الأفضل أن يكون لديك مرآة متماثلة ؛

8. أشكال علامات الترقيم الواضحة ، وخاصة الأقواس المجعد ، والأقواس المستديرة والأقواس المربعة.

تشمل خطوط Monospace المشتركة البريد السريع ، البريد الإلكتروني الجديد

4. الخط

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

5. الرمز

الجسم الرمزي الأكثر شهرة في Windows هو WebDings (أتذكر أنني أحببت استخدامه عندما كنت في Windows 95 ...). فيما يلي بعض خطوط الويب:

نمط الخط

تنقسم أنماط الخطوط الشائعة إلى: عادية وجريئة جريئة ومائلة.

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

عندما نتحدث عن Bold ، يمكننا بسهولة ربط سمة الوزن في CSS. نحن نعلم أنه بالإضافة إلى العادي والجريء الذي نستخدمه عادةً ، فإن قيمة سمة الوزن للخط على خصائص مثل أكثر جرأة ، أخف ، 100 ~ 900. إذن ما هي قيمة 100 ~ 900؟ ستوفر الخطوط الممتازة تصميمات مختلفة لأوزان الخطوط المختلفة. إذا كان الخط يحتوي على تصميم مدمج لسمك المستويات المختلفة مقدمًا ، فستتوافق هذه القيم مع كل مستوى على التوالي. على سبيل المثال ، تشمل خطوط Zurich ستة خطوط: زيوريخ لايت ، زيوريخ عادي ، وزيوريخ متوسط ​​، وزيوريخ بولد ، وزيوريخ بلاك ، وزيوريخ UltraBlack. وبهذه الطريقة ، يتوافق Light Zurich Light مع ثلاث قيم: 100 و 200 و 300 ، ويتوافق Zurich العادية مع 400 ، وهو "طبيعي" ، ووسط Zurich يتوافق مع 500 ، و Zurich Bold ، وهو "Bold Bold" يتوافق مع 600 ، 700 ، Zurich Black يتوافق مع 800 ، وأخيراً ، يتوافق Zurich UltraBlack مع 900.

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

وحدة

سيتم استخدام بعض الوحدات في تصميم الويب لدينا:

1. النقطة (PT ، نقطة)

72 نقطة = 1 بوصة ، 1 بوصة 72 نقطة. بالإضافة إلى ذلك ، 1 بيك آب (PICA) = 12 نقطة

2. بكسل (بكسل ، PX)

بكسل هو أصغر وحدة صور على شاشة الكمبيوتر ، وشروط Layman's هو أصغر نقطة على الشاشة.

3. DPI ، PPI

الاسم الكامل لـ DPI هو نقاط لكل بوصة ، والاسم الكامل لـ PPI هو بكسل لكل بوصة. هم وحدات القرار. وهذا يعني ، كم عدد النقاط (وحدات البكسل) التي يمكن ترتيبها بطول 1 بوصة. على سبيل المثال ، عمومًا ، يبلغ شاشة الشاشة حوالي 72ppi ، مما يعني طوله 1 بوصة ، مع 72 نقطة (بكسل). كلما ارتفعت DPI/PPI ، كلما ارتفعت الدقة ، أي كلما كانت الجزيئات أصغر ، زادت الصورة. بشكل عام ، يتراوح حل الصورة بين 240 نقطة في البوصة و 300 نقطة في البوصة ، فلماذا تبدو الصورة أكثر تفصيلاً من الشاشة؟ تستخدم المجلات طباعة 133 أو 150dpi ، وتستخدم الكتب عالية الجودة من 350-400 د باي ، لأن الكتب المطبوعة الأكثر جمالا تستخدم من 175 إلى 200 دبوة البريطانية عند طباعتها. فلماذا يكون أكثر وضوحًا قراءة النص لنفس الحجم الفعلي في الكتب بدلاً من القراءة على الشاشة؟ هذا هو ، ذكرنا سابقًا ، لماذا يمكننا استخدام خطوط Sans-Serif بجرأة لطباعة الكتب الإنجليزية؟

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

4.ex ، X-Height

غالبًا ما تستخدم في CSS. 1ex = ارتفاع الحرف الصغير x.

5.em

غالبًا ما تستخدم في CSS. بالطبع ، لا يمثل EM ارتفاع الحرف الصغير M (في الواقع ، ارتفاع الحرف الصغير M هو نفس ارتفاع الحرف الصغير X). 1em = 100 ٪ من حجم الخط. هي وحدة متعددة.

التباعد

1. ارتفاع خط ، قيادة

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

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

2. تباعد الحروف ، تتبع

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

3. Kerning

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

فقرة

1. الرئيس (التدبير)

يشير طول الخط إلى عرض فقرة النص. كما هو موضح أدناه:

هناك مسألتان في الوضوح المتعلقة بالرئيس:

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

في النص ، يُنصح أن يكون لديك 40 إلى 70 حرفًا لكل سطر.

2. المحاذاة

هناك في الأساس أربعة أنواع من محاذاة الفقرات: اليسار (اليسار اليسار) ، اليمين (تدفق اليمين) ، المتمركز (المتمركز) ومبرر.

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

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

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

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

3. سهولة القراءة

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

يستخدم التصميم ما يصل إلى ثلاثة أحجام للخطوط.

يتم استخدام ثلاثة خطوط كحد أقصى في تصميم واحد.

يجب ضمان تباين معين ، ولكن يجب ألا يكون هناك تباين مفرط. نص يانغ (الأحرف السوداء على الخلفية البيضاء) أسهل في القراءة من نص الين (الأحرف السوداء على الخلفية السوداء). على خلفية #FFFF ، يبدو استخدام النص #333 أكثر راحة من نص #000.

انتبه إلى خلفية النص. يجب أن تكون الخلفية عازبة. تجنب ضوضاء الخلفية.

يستخدم "أقل هو أكثر" أقل العناصر لنقل معظم المعلومات.

اجعل الرابط الخاص بك يبدو وكأنه رابط.

استفد جيد من مساحتك.