لا يمكن المبالغة في التأكيد على معالجة الخطوط في تصميم الويب، فبعد كل شيء، يتم استخدام صفحات الويب لنقل المعلومات، والطريقة الأكثر كلاسيكية ومباشرة لنقل المعلومات هي النص، لذلك فإن فهم بعض المعرفة الأساسية بالخطوط لا يزال مهمًا جدًا للتصميم. ل.
أكبر فرق بين الصينية والإنجليزية هو أن اللغة الصينية تحتوي على أحرف مربعة بينما تحتوي اللغة الإنجليزية على أحرف بينيين، وهذا له تأثير كبير على معالجة الخطوط. إذا نظرت إلى الرسم البياني أدناه، ستجد أن التغييرات في الخط الإنجليزي ضعيفة في الخط الصيني.
كقارئ صيني، عادةً ما أقبل الشكل المربع كوحدة للقراءة. في الواقع، هذه طريقة سهلة لتعب العين عند القراءة، حيث تتبع عيناك فعليًا شكل سطر النص بأكمله. نلقي نظرة على هذا المثال.
الآن حاولت التحدث معك وأجعلك تفهم
الآن حاولت التحدث معك وأجعلك تفهم
أي سطر أسهل في القراءة؟
السطر الأول يشبه إلى حد ما الوضع باللغة الصينية، والفرق هو أن كل حرف صيني يشبه اللوحة، وتغييراته أكثر ثراءً من الحروف الإنجليزية الـ 26، بالنسبة لنا، قبلنا هذه الميزة، ولكن عند التصميم لا تزال هناك بعض القضايا التي تحتاج إلى النظر فيها أنا لست مصممًا إذا كان ما قلته خاطئًا، فيرجى ترك رسالة أدناه للمناقشة. يتم تقديم هذه المحتويات كمبادئ عامة عندما أقوم بتدريس الطباعة. وأقول للطلاب أيضًا: "الغرض من القاعدة هو كسر القاعدة". مبدأ التصميم نفسه هو كسر المبدأ، وهو أيضًا مظهر من مظاهر ما يسمى بالإبداع. المشكلة هي أنك تحتاج إلى معرفة المبادئ أولاً والتدرب على الالتزام بها، فقط بعد أن تتعرف على المبادئ يمكنك كسر المبادئ وإظهار إبداعك لا يعني أن المبادئ معيبة أو خاطئة. لكن فقط استخدامك البارع لهذه المبادئ، أنت كسرت بعضًا منها، وفي الوقت نفسه قدمت بعض التعويضات عن الأجزاء التي كسرتها، وهو ما يبدو فلسفيًا تمامًا.
أنا شخصياً أعتقد أن المبادئ الأكثر أهمية هي (التي تنطبق على اللغة الإنجليزية):
عند اختيار الخط، يجب أن تأخذ بعين الاعتبار الغرض من النص، هل هو عنوان أم فقرة؟
بشكل عام، خطوط san serif مناسبة للاستخدام كعناوين، مثل Arial؛ وخطوط serif مناسبة للاستخدام كنص فقرة، مثل Time New Roman. بالنسبة لتصميم الويب، هناك العديد من الخطوط التي أوصي بها بشدة، مثل verdana وtahoma وgeorgia. في الواقع، تم تصميم خط مثل Verdana بواسطة أفضل مصممي الخطوط في العالم لمدة عامين تقريبًا. وتتولى Microsoft مسؤولية دفع الفاتورة ومن ثم توفره للمستخدمين مجانًا. ويعتبر هذا الخط جزءًا من تثبيت IE 4 بالنسبة للإصدار أعلاه، يجب أن يحتوي جهاز الكمبيوتر الخاص بك على هذا الخط، لذلك لا داعي للقلق بشأن ما إذا كان المستخدم لديه هذا الخط أم لا. لقد تم تصميمه ليأخذ في الاعتبار المشكلات التي قد تواجهها الخطوط عند عرضها على الشاشة، ويوفر إجابات مثالية تقريبًا. المشكلة الوحيدة هي أن شبه الكمال يتركنا بلا شخصية عند استخدامه، لأن الجميع يستخدمه.
حجم الخط؟
هناك العديد من المناقشات في المنتدى حول أيهما أفضل، البيكسل أم النقطة؟ لن أكرر ذلك، ما أريد الإشارة إليه هنا هو أن هناك العديد من الوحدات المختلفة لحجم الخط في CSS، وهناك ثلاث فئات تقريبًا:
الحجم المطلق: مم، سم، بوصة، نقطة، جهاز كمبيوتر
الحجم النسبي: م، على سبيل المثال
نسبة إلى الجهاز: بكسل
قد أرغب في قول بضع كلمات أخرى عن em، وex يمثل حجم الخط في CSS، على سبيل المثال، بالنسبة لخط بحجم 12 نقطة، فإن 1 em يساوي 12 نقطة.
ص {
حجم الخط: 10 نقطة؛
المسافة البادئة للنص: 1em
}
ربما ستقول أنه يمكنني استخدام text-indent: 10pt لتحقيق نفس التأثير، ولكن هذا لا يتم إلا في ظل الظروف المثالية. إذا شعر المستخدم أنه من الأفضل ضبط حجم الخط في متصفحه على 14pt، فإن النسبة التي تصممها لقد تم فقده، لذا فإن الحجم النسبي مفيد جدًا لتصميم قابلية التوسع لصفحات الويب.
ex مشابه لـ em، لكنه ليس هو نفسه وبالرجوع إلى الرسم البياني أعلاه، يختلف ارتفاع x لكل خط. ex يحدد حجم الخط بناءً على ارتفاع x للخط.
تنسيق؟
من الأفضل استخدام المحاذاة إلى اليسار، وخاصة تجنب استخدام المحاذاة إلى اليسار واليمين، إلا إذا كان لديك غرض تصميمي خاص. إن المحاذاة الخاطئة للجانب الأيمن عند المحاذاة لليسار هي فقط لتسهيل القراءة لبصرك استخدم التغييرات لتخبر عينيك أن الوقت قد حان لتغيير الخطوط.
تباعد الأسطر؟
يعتمد تباعد الأسطر على حجم الخط بشكل عام، تتطلب أحجام الخطوط الصغيرة تباعدًا أكبر بين الأسطر لتسهيل القراءة. إذا لم يكن هناك إعداد لتباعد الأسطر للخطوط الصينية على صفحة الويب، فسيكون من الصعب على القراء قراءة الفقرات الكبيرة. لذلك، من الضروري جدًا ضبط ارتفاع السطر بشكل مناسب. بشكل عام، يجب أن يكون ارتفاع الخط في تصميم الويب 1.5 مرة إلى ضعفي حجم الخط. في برنامج Word وبرامج تحرير النصوص الأخرى، يتم تعيين 120% من الخط بشكل عام ليكون تباعد الأسطر الافتراضي. يتم تقسيم إعداد ارتفاع الخط في CSS بالتساوي وإضافته إلى أعلى وأسفل كل سطر، وهذا يعني أنه إذا تم ضبط ارتفاع السطر على 20 بكسل، فسيكون لكل سطر من النص مسافة 10 بكسل في الأعلى. قاع.
تباعد الكلمات وتباعد الأحرف؟
ولأغراض خاصة جدًا، يجب أن يكون الاثنان متماثلين بالنسبة للصينيين. يهدف هذا الإعداد في حد ذاته إلى حل عيوب معينة في تصميم الخطوط وزيادة إمكانية قراءة النص.