تعرف على التيبوغرافي

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

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

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

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

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

2

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

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

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

Typography-Example-11

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

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

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

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

Typography-Example-21

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

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

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

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

1- Size “الحجم” 

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

2- Leading  

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

Leading

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

مثال آخر للـleading

leading

3- Tracking

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

Tracking

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

4- Kerning

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

Kerning

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

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

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

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

Hierarchy-2

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

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

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

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

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

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

رسولٌ كريم

b8973c158d6407204bac44881b69e06b

 

box center

5020025b87944e9c1a246adc2c7c3cbb

 

الأندلس

cbe6df4340655f3ce025a72eeaec3209

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

المراجع :

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

 

مقالات ذات صلة

6 تعليقات

  1. saad Mohamed
    23 أغسطس,2015 في 9:17 م - Reply

    مقال مميز ومهم لأساسيات التيبوغرافي
    جزاكم الله خيرا ونفع بكم

    • أحمد السالوس
      23 أغسطس,2015 في 9:20 م - Reply

      ربنا يعزك يا سعد … جزانا وجزاك يارب 🙂

  2. Muath Ahmed Nasr
    30 سبتمبر,2015 في 2:20 ص - Reply

    شكرا على Basics مقال متميز … ياريت لو حضرتك تجيب Links كورسات كويسة للتعمق شوية

  3. ابراهيم أحمد
    15 أكتوبر,2015 في 8:51 م - Reply

    مقال مهم جدا شكرا لكم

    • أحمد السالوس
      5 ديسمبر,2015 في 4:04 م - Reply

      ربنا يكرمك يا ابراهيم 🙂