التيبوغرافي يعتبر العنصر المركزي للتصميم، فهو يجعله رائع سواء في الرسالة التى يبعثها للمستخدم أو الشكل الذي يجعل التصميم رائع، وكذلك التيبوغرافي مهم لنا كمجتمع، تخيل إذا وُجدت المجلات والمواقع والتلفزيونات بدون نصوص !!

وإذا كان هذا الموضوع جديد عليك نسبياً أو ربما شئ تريد التعرف عليه، فهذا المقال سوف يمكنك من فهم التيبوغرافي 🙂

أولاً ماهو التيبوغرافي ؟

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

كما أن التيبوغرافي يعتبر 95% من التصميم، كما قولنا ماذا لو تصفحت المواقع ولعبت على التطبيقات وشاهدت التلفزيون بدون نصوص ؟

حان الآن معرفة لماذا التيبوغرافي مهم ؟

فهو يقوم بعمليتين :

1- التيبوغرافي الجيد ينقل الشعور “feelings” اُنظر في المثالين التاليين :

ماهو العنوان الملائم للنظر أو الإهتمام ؟

معظم الناس تختار من تلقاء نفسها عنوان اليسار، تعرف لماذا ؟… لأن حجم ونوع الخط يدل على الجدية والأهمية، بينما العنوان الأيمن يدل على المرح واللعب.

هذا معنى أنه ينقل “الشعور” 🙂

2-التيبوغرافي الجيد يُسهل القراءة  اُنظر في المثالين التاليين :

لكى تعرف كيف يُسَّهِل القراءة على الناس، أريدك أن تجاوب على السؤال التالى، أىُ مقال تستطيع قرائته ؟ (في الصورة)

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

قواعد التيبوغرافي

هناك بعض القواعد لابد أن تُأخذ في الإعتبار عند تصميم تيبوغرافي :

1- Size “الحجم” 

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

2- Leading  

يقصد به المسافة بين السطور في النص، شاهده في الصورة الآتية :

يمكنك زيادة أو نقصان المسافة بين السطور …كما تشاء، ولكن أُريدك فقط أن تضع نفسك مكان القارئ هل ستقرأ النص الأيسر أم الأيمن ؟ بالطبع سوف تقرأ النص الأيمن لأن زيادة المسافة بين السطور تُسهل قراءة النص وسَتُريح العين من التحديق، حيث يمكن تضليل عين القارئ في النص الأيسر.

مثال آخر للـleading

3- Tracking

ويقصد به المسافة بين كل حرف النص ويطبق بالتساوي، وهذا يسمى بالـletter-spacing في الـCSS شاهد المثال التالى :

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

4- Kerning

الـKerning يشبه الـTracking بعض الشئ، فهو المسافة بين حرفين فقط، كما هو مبين في الصورة :

بعض الأحرف قد تحتاج مسافة بين بعضها البعض لتجنب التعارض أو التضارب، وهذا معنى الـkerning حيث أنه يساعد على تباعد الحرفين عن بعضهما لتسهيل القراءة للقارئ.

5- Hierarchy “التسلسل الهرمي”

إذا كانت الخطوط بنفس الحجم، فلن يُفهم ماهو المهم في الصفحة !

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

لاحظ في المثال، أن “العنوان الأكثر أهمية” مكتوب بخط كبير وهذا لجذب إنتباه القارئ، والعناوين الفرعية الأقل في الأهمية تكتب بخط صغير نسيباً بينما فقرة كل قسم مكتوبة بخط أقل من ذلك.

ولاحظ أيضاً أن اللون ليس فقط الذي يحقق التسلسل الهرمي “Hierarchy”  بل ممكن أن يتحقق مع التباعد واللون وكذلك الوزن.

هذه القواعد يجب مراعاتها عند تصميم تيبوغرافي لتسهيل القراءة على القارئ.

يمكنك أيضاً الإستفادة من هنا

وأخيراً، أمثلة لبعض التيبوغرافي

هذه الأمثلة للمبدع / Kareem Mrghani

رسولٌ كريم

box center

الأندلس

والآن، دمتم بخير 🙂

المراجع :

Typography rules and terms that every designer must know -1
2- Typography 101: Everything a Beginner Should Know
3-  ? What Is Typography