نحن نصمم الخطوط ونعمل عليها كل يوم. لكننا لم نولي اهتماما جديا لوجودهم. نحن لم نستخدمها بشكل جيد، أو حتى أساءنا استخدامها. كل هذا لأننا لا نفهمهم. يعد الخط أحد العناصر المهمة في الطباعة، كما أنه أحد أكثر الموضوعات عمقًا في التصميم. في هذه المقالة، دعونا نناقش هذه المعرفة العميقة معك.
أنواع الخطوط
تنقسم الخطوط الإنجليزية (Typeface) إلى عدة فئات رئيسية. هذه هي المعرفة الأساسية التي يجب أن تعرفها عند استخدام الخطوط الإنجليزية:
1. Serif
Serif هو الجزء الزخرفي لحافة الخط. المنطقة المميزة باللون الأحمر في الصورة أدناه هي الرقيق.
الهدف الأصلي من تصميم serif هو تحديد نهايات الخطوط بشكل أكثر وضوحًا وتحسين معدل التعرف وزيادة سرعة القراءة. بالإضافة إلى ذلك، فإن استخدام الخطوط الرقيقة سيجعل الناس يشعرون بأنهم أكثر تقليدية. ولذلك، فإن العديد من كتبنا الإنجليزية الشائعة، وخاصة المقالات والروايات، تستخدم الخطوط الرقيقة لإكمال النص.
تشمل الرقيقات شائعة الاستخدام في تصميم الويب Times New Roman وGeorgia. الجانب الأيسر من الصورة أدناه هو خط Times New Roman بحجم 12 بكسل، والجانب الأيمن هو خط Georgia بحجم 12 بكسل.
في اللغة الصينية، خط الأغنية الذي نستخدمه هو الخط الرقيق المقابل.
2. Sans-serif
إذا كان الخط لا يحتوي على serifs، فإنه يُسمى Non-serif أو sans-serif. الصورة أدناه هي بلا الرقيق.
هناك عدد كبير نسبيًا من أنواع sans-serif المستخدمة بشكل شائع في تصميم الويب. هناك Arial، Verdana، Tahoma، Helivetica، Calibri، إلخ. الصورة أدناه توضح أريال وفيردانا وتاهوما من اليسار إلى اليمين:
تجدر الإشارة إلى أنه على الرغم من استخدام الخطوط serif على نطاق واسع في الكتب، إلا أن الخطوط serif نادرًا ما تستخدم على الإنترنت. نظرًا لأن دقة شاشة الكمبيوتر لا يمكن مقارنتها بدقة الكتب، فمن الصعب قراءة الخطوط الرقيقة التي تتراوح من 10 إلى 12 بكسل في النص الرئيسي على شاشة الكمبيوتر. الصورة أدناه عبارة عن مقارنة بين 10 بكسل Verdana و10 بكسل Times New Roman بدون Cleartype. كما ترون، يمكن التعرف بسهولة على Verdana على اليسار. من الصعب جدًا قراءة صحيفة Times New Roman الموجودة على اليمين.
3. خطوط Monospace
خطوط Monospace هي في الواقع مخصصة للخطوط الغربية فقط. لأن الحروف الإنجليزية تختلف في العرض. على سبيل المثال، أنا أضيق بكثير من م. عرض التعليمات البرمجية عند البرمجة إذا لم تكن الحروف متساوية العرض، فسيكون التخطيط قبيحًا. في سطر أوامر DOS، يمكننا أن نرى أنه يتم استخدام خط ذو عرض ثابت.
الخطوط ذات العرض الثابت المطلوبة للبرمجة لها المتطلبات التالية:
1. يجب أن تكون جميع الأحرف متساوية العرض؛
2. أشكال أحرف بسيطة وواضحة وموحدة؛
3. دعم مجموعات الأحرف الموسعة مع رموز ASCII التي تزيد عن 128
؛ (ASCII: 0×20) نفس عرض الأحرف الأخرى؛
5. من السهل التمييز بين ثلاثة أحرف مثل "1" و"l" و"i"
6. ثلاثة أحرف مثل "0" و"o" و""
؛"O" من السهل تمييزها؛
7. من السهل تمييز الأجزاء الأمامية والخلفية من علامات الاقتباس المزدوجة والاقتباسات المفردة، ومن الأفضل أن تكون مرآة متناظرة؛
8. علامات ترقيم واضحة، خاصة الأقواس والأقواس المستديرة والأقواس المربعة.
تتضمن الخطوط أحادية المسافة الشائعة Courier وCourier New.
4. الخط
كما يوحي الاسم، الخط هو خط نمط الكتابة اليدوية. في بعض الأحيان نسميها أيضًا خط الخط. معظم خطوط الخط الصيني قاسية. أنا شخصياً أوصي باستخدام خطوط الخط الياباني. خطوط الخط الياباني أكثر ليونة وأكثر إنسانية. ومع ذلك، فإن عيب استخدام خطوط الخط الياباني هو أن معظمها صيني تقليدي، والعديد من الأحرف الصينية مفقودة.
5. الرمز
أشهر مجموعة رموز في Windows هي Webdings (أتذكر أنني كنت أستخدمها كثيرًا عندما كنت لا أزال في نظام التشغيل Windows 95...). فيما يلي بعض خطوط Webdings:
أنماط الخطوط:
أنماط الخطوط الشائعة هي: عادي، وغامق، ومائل.
ببساطة، الخط الغامق يعني أن الخط سيكون أغمق وأكثر "سميكة". الخط المائل يعني إمالة محور النص قليلاً. يتم استخدامها للتأكيد على فقرة معينة من النص داخل المساحة.
عند الحديث عن الخط الغامق، يمكننا بسهولة التفكير في خاصية وزن الخط في CSS. نحن نعلم أنه بالإضافة إلى العادي والغامق الذي نستخدمه عادةً، فإن قيمة سمة وزن الخط لها أيضًا سمات مثل أكثر قتامة وأخف وزنًا و100~900 وما إلى ذلك. إذن ما هي قيمة 100 إلى 900؟ في الواقع، 100 إلى 900 ليس لها وحدة. سيوفر الخط الجيد تصميمات مختلفة لأوزان مختلفة. إذا كان الخط يحتوي على تصميمات مدمجة مسبقًا لمستويات مختلفة من السُمك، فستتوافق هذه القيم مع كل مستوى على التوالي. على سبيل المثال، يتضمن خط Zurich ستة خطوط: Zurich Light، وZurich Regular، وZurich Medium، وZurich Bold، وZurich Black، وZurich UltraBlack. وبهذه الطريقة، يتوافق Zurich Light مع القيم الثلاث 100 و200 و300، وZurich Regular يتوافق مع 400، وهو "عادي"، وZurich Medium يتوافق مع 500، وZurich Bold، وهو "غامق". يتوافق مع 600، و700، وZurich Black يتوافق مع 800، وأخيرًا، Zurich UltraBlack يتوافق مع 900.
لا يتم استخدام الحروف المائلة الصينية عمومًا على الإنترنت. نظرًا لأن اللغة الصينية بها الكثير من السكتات الدماغية، فإن استخدام الخط المائل سيجعل من الصعب قراءتها.
الوحدات
سوف نستخدم بعض الوحدات في تصميم الويب الخاص بنا:
1. النقطة (نقطة، نقطة)
72 نقطة = 1 بوصة، 1 بوصة تساوي 72 نقطة. بالإضافة إلى ذلك، 1 بيكا = 12 نقطة
2. البكسل (pixel, px)
البكسل هو أصغر وحدة صورة على شاشة الكمبيوتر، من حيث الشخص العادي، فهو أصغر نقطة على الشاشة.
3. DPI، PPI
الاسم الكامل لـ DPI هو Dots Per Inch، والاسم الكامل لـ PPI هو Pixel Per Inch. وهي وحدات القرار. بمعنى آخر، كم عدد النقاط (البكسلات) التي يمكن ترتيبها في طول 1 بوصة. على سبيل المثال، بشكل عام، يبلغ حجم شاشتنا حوالي 72 بكسل في البوصة، مما يعني أن هناك 72 نقطة (بكسل) بطول 1 بوصة. كلما زادت النقطة في البوصة/نقطة في البوصة، زادت الدقة، أي كلما كانت الجزيئات أصغر، أصبحت الصورة أكثر دقة. بشكل عام، تتراوح دقة الصور بين 240 نقطة في البوصة و300 نقطة في البوصة، فلماذا تبدو الصور أكثر تفصيلاً مما تبدو على الشاشة. تتم طباعة المجلات بدقة 133 أو 150 نقطة لكل بوصة، وتتم طباعة الكتب عالية الجودة بدقة 350-400 نقطة لكل بوصة، لأن أجمل الكتب المطبوعة تتم طباعتها بدقة 175 إلى 200 نقطة لكل بوصة. ولهذا السبب يكون النص ذو الحجم الفعلي نفسه أكثر وضوحًا عند عرضه على كتاب منه على الشاشة. ولهذا السبب ذكرنا من قبل أنه يمكن استخدام خطوط Sans-serif بجرأة في طباعة الكتب الإنجليزية.
لا يوجد فرق أساسي بين نقطة في البوصة ونقطة في البوصة. إذا كنت تريد حقًا العثور على الفرق، فقد يكون الاختلاف الوحيد هو أن النقطة في البوصة تُستخدم غالبًا لوصف الماسحات الضوئية والطابعات، بينما تُستخدم النقطة في البوصة غالبًا لوصف دقة الشاشة.
4.غالبًا ما يتم استخدام
ex وx-height
في CSS.1ex = ارتفاع الحرف الصغير x.
5.em
غالبا ما يستخدم في CSS. بالطبع، لا يمثل em ارتفاع الحرف الصغير m (في الواقع، ارتفاع الحرف الصغير m هو بشكل عام نفس ارتفاع الحرف الصغير x). 1em = 100% من حجم الخط. هي وحدة متعددة.
تباعد الأسطر
1. تباعد الأسطر (ارتفاع الخط، المسافة البادئة)
عندما يتعلق الأمر بتباعد الأسطر (ارتفاع الخط، المسافة البادئة)، يجب علينا أولاً أن نتعلم مصطلحًا يسمى خط الأساس. هل تتذكر كتاب الشبكة الذي استخدمناه لكتابة الحروف عندما تعلمنا اللغة الإنجليزية لأول مرة؟ الخط الأفقي الأكثر سمكًا هو ما نسميه خط الأساس. الخط الأساسي هو السطر الموجود أعلى الجزء السفلي من الخط حيث "تجلس" معظم الأحرف. في معظم الخطوط، يتم دائمًا وضع الأحرف الكبيرة بالقرب من الخط الأساسي وفوقه. الخطوط الصينية هي نفس الحروف الإنجليزية الكبيرة. الخط الأحمر في الصورة أدناه هو خط الأساس.
ثم يشير تباعد الأسطر إلى المسافة بين الخطوط الأساسية بين خطين متجاورين. غالبًا ما تكون وحدة تباعد الأسطر هي em، والتي يتم تحديدها وفقًا لحجم الخط. في المتصفحات، لا توجد إرشادات حول تباعد الأسطر الافتراضي. وفقًا للتوصيات المقدمة من W3C، يجب أن يكون تباعد الأسطر الافتراضي بين 1.0em و1.2em. في الواقع، عند تحديد تباعد الأسطر، هناك مبدأ في التنضيد وهو أن الفجوة بين الأسطر يجب أن تكون أكبر من الفجوة بين الكلمات، وإلا فإن القراء سوف "يتسلسلون" بسهولة عند التسبب في صعوبات في القراءة. يمكن لتباعد الأسطر الكافي أن يفصل كل سطر من النص، مما يسهل على العين تمييز السطر السابق أو التالي. في السنوات الأخيرة، يفضل معظم الأشخاص تباعد الأسطر بمقدار 1.5 م لتخطيط النص على الويب، وخاصة مواقع الويب الصينية. أي أنه إذا تم استخدام حجم خط يبلغ 12 بكسل، فغالبًا ما يفضل المصممون تباعد الأسطر بمقدار 18 بكسل. 1.5em هي بالفعل قيمة خبرة جيدة. في الواقع، المعيار بالنسبة للأوراق الصينية هو استخدام مسافة 1.5 م بين الأسطر.
2. تباعد الحروف (تباعد الحروف، التتبع)
يشير تباعد الحروف إلى المسافة بين مجموعة من الحروف. يؤثر تباعد الكلمات على كثافة النص في السطر أو الفقرة.
3.
تقنين المسافات بين الحروف هو عملية فنية يتم إجراؤها لتلبية الاحتياجات البصرية. ببساطة، عندما تتم محاذاة حرفين محددين، يمكنك تحديد تباعد فريد بين الكلمات لكل منهما بشكل فردي. على سبيل المثال، عندما يتبع الحرف الكبير A حرف صغير v، سيكون هناك تباعد أكبر بصريًا بين الحرفين (في الواقع تباعد الكلمات هو نفسه)، وهو ما لا يمكن حله عن طريق تباعد الأحرف العادي. إذا قمت بتقليل التباعد بينهما، فسوف تتدفق الحروف الأخرى معًا. في هذا الوقت، هناك حاجة إلى تعديل تقنين الأحرف للتعامل معها. الصورة أدناه هي مثال لتطبيق تقنين الأحرف:
الفقرة
1. طول السطر (القياس)
يشير طول السطر إلى عرض فقرة من النص. كما هو موضح أدناه:
هناك مشكلتان تتعلقان بطول السطر:
كلما زاد طول السطر، زادت المسافة المطلوبة بين الأسطر. إذا كان تباعد الأسطر صغيرًا جدًا، فسوف ينقطع القراء بسهولة عند القراءة. إذا كان تباعد الأسطر كبيرًا جدًا، فسيشعر القراء بأن النص متقطع عند قراءة السطور.
في النص الرئيسي، من 40 إلى 70 حرفًا في كل سطر مناسب.
2. المحاذاة
هناك أربعة أنواع أساسية من محاذاة الفقرة: التدفق لليسار، والتدفق لليمين، والتوسيط، والمبرر.
تشير المحاذاة إلى اليسار إلى طريقة محاذاة تقوم بتعيين محتوى النص، وضبط التباعد الأفقي للنص، ومحاذاة النص في الفقرة أو المقالة إلى اليسار على طول الاتجاه الأفقي. المحاذاة إلى اليسار تعطي النص الموجود على الجانب الأيسر من المقالة حافة أنيقة. وفي الوقت نفسه، سيكون الجانب الأيمن من النص غير متساوٍ. لذلك، تُسمى المحاذاة اليسرى في اللغة الإنجليزية أيضًا باليمين الخشن، مما يعني أن الجانب الأيمن له مظهر خشن. الشيء نفسه ينطبق على المحاذاة الصحيحة.
تشير المحاذاة المركزية إلى طريقة محاذاة تقوم بتعيين محتوى النص وضبط التباعد الأفقي للنص بحيث تتم محاذاة النص الموجود في الفقرة أو المقالة أفقيًا باتجاه المنتصف. تعمل المحاذاة المركزية على جعل النص الموجود على جانبي المقالة مركَّزًا بشكل أنيق في المنتصف، بحيث تكون الفقرة أو المقالة بأكملها مرتبة.
وتعني المحاذاة تعيين طرفي محتوى النص وضبط التباعد الأفقي للنص/الكلمات بحيث تكون كذلك موزعة بالتساوي على الحواف اليسرى واليمنى للصفحة بين المسافات. يوفر Justify حوافًا أنيقة للنص على كلا الجانبين.
بعد استخدام المحاذاة في كلا الطرفين، ستكون خطوط المحاذاة على كلا الجانبين واضحة جدًا، وسيكون الشعور "السريع" لكتلة النص واضحًا أيضًا. ومع ذلك، في التنضيد باللغة الإنجليزية، عندما يكون طول السطر قصيرًا جدًا، قد يؤدي استخدام المحاذاة إلى أن تكون المسافة بين بعض الأسطر طويلة جدًا وأن تكون المسافة بين بعض الأسطر قصيرة جدًا، مما سيبدو فوضويًا للغاية مع بقع في كل مكان.
3. الوضوح
تصف الوضوح سهولة وراحة قراءة النص المطبوع. في الواقع، هذا هو الغرض الأساسي للتصميم العادي. بالإضافة إلى المبادئ الموضحة أعلاه، قمت أيضًا بجمع بعض المبادئ الصغيرة المتعلقة بوضوح الوضوح لمشاركتها معك:
استخدم ثلاثة أحجام خطوط على الأكثر في التصميم.
استخدم ما يصل إلى ثلاثة خطوط في تصميم واحد.
فمن الضروري ضمان تباين معين، ولكن ليس التباين المفرط. يعد نص يانغ (أحرف سوداء على خلفية بيضاء) أسهل في القراءة من نص يين (أحرف بيضاء على خلفية سوداء). على خلفية #fff، يبدو النص الذي يستخدم #333 أكثر راحة من النص #000.
انتبه إلى خلفية النص. يجب أن تكون الخلفية بسيطة. تجنب الضوضاء الخلفية.
"الأقل هو الأكثر" استخدم أقل عدد من العناصر لتوصيل أكبر قدر من المعلومات.
اجعل الرابط الخاص بك يبدو وكأنه رابط.
استفد من المساحة الخاصة بك بشكل جيد.