‫أهمية التنضيد‬

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

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

‫تباعد األسطر‬
‫تباعد األسطر‪ ،‬وتنطق على وزن «عنوان» في اللغة االنجليزية‪ ،‬ويمثل مقدار المسافة الموجودة‬
‫بين سطور النص‪ ،‬ويتم تعريفه باستخدام نفس الوحدات المستخدمة في النص‪( .‬في لغة التصميم‬
‫يطلق عليها ارتفاع خط‪ ).‬على الرغم من أنه من الناحية البديهية‪ ،‬فإن التباعد الفردي يعني أن‬
‫النص المحدد ب ‪ 12‬بيكسل سيتطلب تباعد بين األسطر يقدر ب ‪ 12‬بيكسل‪ .‬أما في الممارسة‬
‫العلمية‪ ،‬فإن التحديد المؤدي إلى اثنين أو ثالثة بكسل أعلى من حجم النص يمنع الصعود والهبوط‬
‫‪.‬من االصطدام ببعضهما البعض‪ ،‬ويوفر مساحة تنفس كافية لتحسين سهولة القراءة‬
‫‪، Arial 12 px/15 px.‬قد يحدد المصممون أحياًنا النوع على أنه رقم‪/‬رقم‪ ،‬على سبيل المثال‬
‫يشير هذا التدوين إلى حجم النص مع الرقم األول‪ ،‬ويقود مع الثاني‪ .‬القيادة المريحة ضرورية‬
‫لجعل واجهة بها الكثير من اإلحساس بالنوع‬
‫قد يحدد المصممون أحياًنا النوع على أنه رقم‪/‬رقم‪ ،‬على سبيل المثال ‪ Ariel‬يقدر ب ‪ 12‬بيكسل‪/‬‬
‫‪ 15‬بيكسل‪ .‬وتدل هذه الرموز إذن على حجم النص المستخدم في كتابة الرقم األول ويتباعد مع‬
‫الرقم الثاني‪ .‬يعتبر التباعد اآلمن بين األسطر عنصرا أساسيا بغرض إنشاء واجهة مستخدم تتالءم‬
‫مع الخط‪.‬‬
 ‫عرض العمود وتبريره‬
‫وبوجه عام‪ ،‬ينبغي تعيين نص الجسم بعروض أعمدة ضيقة من أجل القراءة المثلى‪ .‬عند حجم‬
‫نص الجسم القياسي البالغ ‪ 12‬نقطة أو ‪ ،pixels‬قد يتراوح عرض العمود المثالي بين ‪90-40‬‬
‫حرًفا لكل سطر‪.‬‬
‫لماذا التباين الواسع؟ إلى حد ما‪ ،‬يتم تحديد عرض العمود «الجيد» من خالل ما يبدو أفضل من‬
‫الناحية المطبعية‪ ،‬والذي يمكن أن يكون حكًم ا ذاتًيا‪ .‬يقترح ‪ Bringhurst‬استخدام خط بطول ‪30‬‬
‫ضعف حجم النقطة‪ ،‬لكنه يقر بأن الخطوط التي تتراوح بين ‪ 20‬و‪ 4‬ضعف حجم النقطة يمكن أن‬
‫تعمل أيًض ا‪ .‬وتوصلت دراسة أجرتها جامعة والية ويتشيتا إلى أن أي شيء بين قيمها المختبرة‬
‫التي تتراوح بين ‪ 35‬و‪95‬حرفا لكل سطر يمكن قراءته‪ ،‬ولكن بعض الناس يفضلون بشدة أقصر‬
‫طول‪ ،‬ألنه يتطلب حركة عين أقل للقراءة‪ ،‬بينما فضل آخرون أطول طول‪ ،‬ألنه وضع المزيد من‬
‫المعلومات عن المسابقة (‪.)11‬‬
‫تعني عروض األعمدة الضيقة أيًض ا انعكاًسا أقل عند عرض النص على األجهزة ذات‬
‫المشاهدات األصغر من أجهزة سطح المكتب‪ ،‬ويسمح لك انعكاس النص األقل بالحفاظ على‬
‫تخطيطات مماثلة عبر األجهزة‪.‬‬
‫عند ضبط نص الجسم‪ ،‬نوصي بمحاذاة خشن يساًرا افتراضًيا أي مع نقاط نهاية خط متنوعة‬
‫ضمن عرض عمود معين‪ .‬عادة‪ ،‬هذا هو العرض االفتراضي للمتصفح على أي حال‪ ،‬والسبب‬
‫هو أنه يسمح بمساحة متسقة بين الكلمات‪ ،‬مما يجعل قراءة النص أسهل‪ .‬النص المبرر‪ ،‬الذي‬
‫يفصل النص لفرض هوامش األعمدة المستقيمة في اليمين واليسار‪ ،‬يخلق هوامش أكثر اتساًقا‬
‫(وبالتالي فهو شائع على التخطيطات ذات الشبكات المرئية للغاية‪ ،‬مثل الصحف)‪ ،‬ولكن الكمية‬
‫المتنوعة للمباعدة بين الكلمات الناتجة عن إجبار النص على هذه الهوامش يمكن أن تجعل من‬
‫الصعب قراءتها‪ .‬نادًر ا ما يستخدم النص األيمن الخشن‪ ،‬أو النص مع بدايات سطر متنوعة بدًال‬
‫من النهايات‪ ،‬لنص الجسم في التطبيقات الوظيفية‪ ،‬على الرغم من أن هامشه األيمن المتسق‬
‫يجعله خياًرا جيًدا للتنضيد‪.‬‬

‫الحروف الكبيرة‬
‫يلفت إعداد الكتابة باألحرف الكبيرة االنتباه إليها‪ ،‬وليس فقط ألن عقوًدا من استخدام اإلنترنت‬
‫علمتنا أنها تعادل الصراخ‪ُ .‬يشعرك نوع األحرف الكبيرة بأهميته نظًر ا لكونه مختلًفا عن المعتاد‪،‬‬
‫ولكن نظًرا ألن عدم التمييز بين أشكال األحرف بالنسبة إلى نوع الحالة المختلطة يجعل من‬
‫الصعب قراءتها‪ ،‬فإن نوع األحرف الكبيرة هو األنسب للعناوين والنصوص األخرى األقصر‪.‬‬
‫تقدم بعض المحارف حروًفا كبيرة صغيرة‪ ،‬وحروًفا كبيرة مصممة خصيًصا للعمل جنًبا إلى‬
‫جنب مع األحرف الصغيرة بنفس حجم النقطة‪ .‬من الناحية النموذجية‪ُ ،‬يقصد بها استخدامها‬
‫كلكنات‪ ،‬على سبيل المثال‪ ،‬لتنضيد "صباًحا" أو "مساًء " التي تتبع الوقت ولكن مثل األحرف‬
‫االستهاللية العادية‪ ،‬يمكن أن تكون أيًض ا بمثابة نوع خط رئيسي‪.‬‬
 ‫تباعد الحروف‬
‫لم يتم تصميم جميع الخطوط بنفس االهتمام بالتفاصيل‪ .‬فقد تم تصميم ‪ 12‬خط تصميما جيدا بحيث‬
‫تأخذ بعين االعتبار االختالفات في المسافة بين أزواج أشكال الحروف لتحسين الجماليات‬
‫وإمكانية القراءة (الشكل ‪ُ .)5،13‬يطلق على التباعد بين األحرف تقنين األحرف‪ ،‬ويمكن أن يكون‬
‫النوع الذي تم تقنينه بشكل سيئ غير جذاب ومشتت وغير احترافي‪ .‬في حين أن هناك الكثير من‬
‫الخطوط المجانية المناسبة والجيدة‪ ،‬راقب تباعد األحرف بها‪.‬‬
‫لن يكون تقنين األحرف االفتراضي لكل خط مثالًيا‪ .‬تتيح لك خاصية تباعد األحرف في لغة‬
‫التصميم ‪ CSS‬تقنين أزواج األحرف الفردية‪ ،‬ولكن من األفضل ترك هذا المستوى من الضجة‬
‫للمصممين‪.‬‬
‫يمكن أن تظل المسافات بين الحروف أداة قيمة عند تطبيقها على الكلمات والعناوين بأكملها‪ .‬نظًرا‬
‫ألن األحرف الكبيرة العادية غير مصممة عادًة لتظهر مًعا في كتل كبيرة من النسخ‪ ،‬وال حتى في‬
‫الرؤوس‪ .‬فإن إضافة مقدار صغير من المسافة بين كل حرف يمكن أن يساعد على التأكيد على‬
‫الفرق بين كل حرف‪ ،‬وبالتالي تحسين إمكانية القراءة (الشكل ‪.)5،14‬‬

‫‪L A VA‬‬ ‫‪LAVA‬‬

‫)‪(a‬‬ ‫)‪(b‬‬

‫الشكل ‪ 5.13‬قد يكون من الصعب تقنين األحرف الكبيرة ‪ A‬و‪ V‬بشكل صحيح عندما‬
‫تظهران معا‪( .‬أ) نوع ذو تقنين ضعيف‪ ،‬و (ب) تقنين األحرف االفتراضي للخط‪.‬‬

‫‪Pay your bill step 1 of 2‬‬

‫)‪(a‬‬
‫‪Pay your bill step 1 of 2‬‬
‫)‪(b‬‬
‫الشكل ‪( 5.14‬أ) ال يستخدم العنوان "الخطوة ‪ 1‬من ‪ "2‬مسافات بين األحرف‪ ،‬وعلى الرغم من‬
‫أنه يمكن قراءته‪ ،‬فإنه يشعر بالضيق مقارنة بأشكال األحرف الكبيرة والمفتوحة في العنوان‬
‫الرئيسي‪( .‬ب) يستخدم هذا اإلصدار مقداًرا صغيًر ا من المسافات بين األحرف لمنح نص مؤشر‬
‫الخطوة مساحة أكبر للتنفس وتحسين قابلية قراءة العنوان الكلي والتوازن البصري‪.‬‬

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

‫المؤثرات‬
‫مع تحسن لغة التصميم ‪ ،CSS‬هناك حاجة أقل الستخدام أدوات تحرير الرسومات لتحقيق‬
‫تأثيرات مثل الظالل المسقطة على الكتابة‪ ،‬أو الكتابة المليئة بألوان متدرجة‪ .‬ومع ذلك‪ ،‬يجب‬
‫استخدام هذه التأثيرات باعتدال على أي حال فهي تقلل بشكل كبير من إمكانية القراءة‪ ،‬خاصة في‬
‫األحجام الصغيرة‪ ،‬ويمكن أن تخلق فوضى بصرية‪ .‬قصر استخدام التأثيرات على نوع الرأس‬
‫الذي يحتاجه للتعبير عن شخصية أو جمالية معينة (الشكالن ‪ 5.16‬و‪.)5.17‬‬

‫الشكل (‪ )5،15‬هو ‪ WSAG contrast Checker‬وهو إضافة لمتصفح فايرفوكس للتحقيق من‬
‫األلوان المتناقضة مع إرشادات إمكانية الوصول‪.‬‬
‫يشتمل شعار ‪ SuperTracker‬في الشكل ‪ 5.16‬على تدرج أزرق ومخططات ملونة وتأثيرات‬
‫توهج داخلية وخارجية‪ .‬على الرغم من أن التدرج يعكس الشكل المستخدم في التنقل‪ ،‬فإن الجمع‬
‫بين العديد من التأثيرات القريبة جًدا من بعضها البعض يبدو وكأنه مبالغة في مقابل الخلفية‬
‫المسطحة‪.‬‬

‫الشكل ‪ 5.17‬شعار ‪ Twitterrific‬يستخدم لمسة نهائية معدنية تساعده على الظهور على خلفية‬
‫التدرج األزرق الباهت‪ .‬باالقتران مع أشكال الحروف ذات الحواف الدائرية‪ ،‬يشير التأثير العام‬
‫إلى تطبيق غير رسمي وممتع وصديق للمهوسين‪.‬‬
 ‫كيف يؤثر النوع على تناسق المبادئ الوصفية‬
‫لتسهيل التعرف على ميزات التطبيق والتعلم منه‪ ،‬احتفظ بمواصفات الطباعة لمحتوى الجسم‬
‫والعناوين والنصوص األخرى متسقة في جميع أنحاء التطبيق‪ .‬يمكن تفسير نوع اإلشارات‬
‫المقدمة عن طريق الوعي أو الالوعي‪ ،‬ويساعد توحيد النوع األشخاص على التعرف على‬
‫األنماط‪ .‬يوضح مثال دراسة الحالة ‪ Super Tracker‬الذي تمت مراجعته الحًقا في هذا الفصل‬
‫التطبيق المتسق ألنماط الكتابة عبر األنظمة األساسية‪ ،‬والتي يمكن أن تساعد في تسهيل التبديل‬
‫بين اإلصدارات المختلفة من التطبيقات‪.‬‬
‫في حالة تصميم تطبيق جديد ليتم دمجه في مجموعة موجودة‪ ،‬فقم بتطبيق المواصفات المطبعية‬
‫الخاصة بالمناسبين على التطبيق الجديد للتأكد من أن المستخدمين ينظرون إليه على أنه جزء من‬
‫عائلة‪ .‬اعتمد على األدوات األخرى‪ ،‬مثل اللون والصور‪ ،‬لتمييز التطبيقات عن بعضها إال إذا‬
‫كان استخدام نوع العرض جزًء ا من شخصية التطبيق الفردي‪ .‬على سبيل المثال ‪ ،‬قد تستخدم‬
‫مجموعة من التطبيقات التي تستخدم ‪ Arial‬للنص األساسي ومعظم الرؤوس خط عرض مختلًفا‬
‫في بعض أنماط الرأس لمساعدة التطبيقات الفردية على نقل الشخصية‪ .‬قد تحتاج أيًضا إلى تحديد‬
‫مواصفات جديدة للمتطلبات الفريدة للتطبيق الخاص بك‪ ،‬ولكن يجب أن تعمل هذه المواصفات‬
‫بانسجام مع القواعد الموجودة مسبًقا المنصوص عليها في إرشادات تصميم التطبيق الخاص بك‪،‬‬
‫والمعروفة أيًض ا باسم دليل النمط‪ .‬اعتمد على مواصفات دليل النمط األولية لحجم النوع‬
‫والمعالجة واللون وما إلى ذلك كأساس لمواصفات جديدة‪.‬‬

‫الَتَس لُس ل‬
‫لن يكون التطبيق ببساطة ناجًح ا أو على األقل‪ ،‬لن تساعد الطباعة الناس على تمييز األنماط بدون‬
‫تسلسل هرمي‪ .‬يجب أن يكون التطبيق الوظيفي قادًر ا على تقديم مجموعة ميزاته وتوصيل كيفية‬
‫استخدامه‪ ،‬والطباعة الجيدة جزء من هذا النجاح‪.‬‬
‫التباين هو مفتاح إنشاء التسلسل الهرمي مع الكتابة‪ ،‬ومع العديد من األدوات األخرى أيًضا‪ .‬يمكن‬
‫إنشاؤه بنجاح بالحجم والوزن فقط‪ .‬يمكنك أيًض ا التمسك بخط واحد‪ ،‬بشرط أن يحتوي على ثالثة‬
‫أوزان أو أنماط على األقل‪ ،‬مثل الروماني ‪ ،‬والجريء ‪ ،‬والمائل‪( .‬في السؤال‪ ،‬سيكون هناك‬
‫وزنان كافيان أيًض ا ‪ ،‬طالما تم تعيين بعض الرؤوس في جميع األحرف الكبيرة‪ ).‬توضح األمثلة‬
‫التالية في األشكال ‪ 5.20-5.18‬ثالثة تدرجات هرمية محتملة لألنواع باستخدام التباين‪ .‬الحظ‬
‫كيف تساعد التغييرات في الحجم والوزن والنمط والتباين على اإلشارة إلى األهمية النسبية لكل‬
‫رأس‪.‬‬
 ‫الرئيسي األقوى‬
‫كل الحروف كبيرة و جريئة ‪ ،‬بمسافة تباعد ‪ 50‬بكسل بصرًيا‬
‫الى رأس الشريط الجانبي أو رأس الفئة (جميع األحرف الكبيرة ‪ 11‬نقطة مع كل الحروف‬
‫كبيرة‪ ،‬عريض‪ ،‬تباعد ‪ 50‬بكسل‬
‫ثالث أقوى رأس (عقد‬
‫رأس قوي قليًال (‪ 13‬نقطة ‪ ،‬غامق) نص (‪1‬‬
‫نص ضعيف للتألق ‪ ،‬المساعدة (‪)1‬‬
‫الشكل ‪ 5.18‬محرف‪ :‬جورجيا‪.‬‬
‫أقوى رأس (‪ 18‬نقطة سوداء)‬
‫رأس الشريط الجانبي أو رأس الفئة (جميع األحرف الكبيرة ‪ 11‬نقطة مع كل الحروف كبيرة‪،‬‬
‫عريض‪ ،‬تباعد ‪ 100‬بكسل‬
‫(‪ 14‬نقطة ‪ ،‬أسود)‬
‫رأس قوي قليًال (‪ 13‬نقطة لكل األحرف الكبيرة ‪ ،‬نصف غامق ‪ ،‬مسافة أحرف ‪ 50‬بكسل‬
‫أو رأس قوي قليًال (‪ 13‬نقطة مائلة شبه سوداء)‬
‫نص (‪ 13‬نقطة رومانية)‬
‫نص ضعيف للسطور التوضيحية ‪ ،‬المساعدة ‪ ،‬إلخ‪ 12( .‬نقطة ‪ ،‬مائل)‬
‫الشكل ‪ 5.19‬محرف ال تعد وال تحصى‬
‫أقوى رأس ‪ pt‬جميع األحرف الكبيرة ‪ ،‬بخط عريض‬
‫الحروف إلى لينة بصريا‬
‫رأس الشريط الجانبي أو رأس الفئة (‪)11pt all cap ، beld ، 50px lacing‬‬
‫ثالث أقوى رأس (‪ 12‬نقطة جريئة‬
‫رأس قوي قليًال (‪ 12‬نقطة لكل الحروف ‪ 50‬حرًفا‬
‫نص (‪ 13‬نقطة عادي‬
‫نص ضعيف للسطور ‪ ،‬المساعدة ‪ ،‬إلخ (‪ 12‬فارغ)‬
‫الشكل ‪ 5.20‬محرف‪ :‬تهانا‬

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

‫الشخصية‬
‫يعتبر نوع الخط عنصر رئيسي في شخصية التطبيق‪ .‬وعادة ما ُينظر إلى خطوط ‪ Serif‬على‬
‫أنها خطيرة وشبيهة باألعمال؛ وفي العادة ما يتم تفسير عبارات ‪ sans serif‬على أنها أكثر حداثة‬
‫وغير رسمية‪ .‬يعتبر تصور نوع الخط‪ ،‬مثل األدوات األخرى‪ ،‬سياقًيا ويتأثر بالتخطيط واللون‬
‫باإلضافة إلى األطر المرجعية للمستخدمين‪ .‬يجب أن تعكس طباعة التطبيق الخاص بك الغرض‬
‫من التطبيق‪ ،‬والخصائص التي تريد أن يعرضها هذا التطبيق‪ ،‬وإذا لزم األمر‪ ،‬جوانب العالمة‬
‫التجارية لمؤسستك األم‪ .‬وتنتج الكتابة التي تتعارض مع غرض التطبيق والشخصية إحساًسا مقلًقا‬
‫باالنفصال؛ هل ستشعر بالراحة عند استخدام تطبيق الخدمات المصرفية عبر الهاتف المحمول‬
‫الموجود في ‪( Comic Sans‬الشكل ‪)5.21‬؟ تعد تجربة عالقات مختلفة ومراجعتها مع اآلخرين‬
‫أمًرا ضرورًيا لتحديد الشخصية التي تتواصل على النحو المنشود‪.‬‬