دليلك في كتابة تيبوغرافي جيد

دائما ما نشغل بالنا ماذا  نكتب وكيف نكتب و غالبا ما نشغل تفكيرنا بكيف سيقرأه الآخرون ….!

التيبوغرافي هو تنسيق الكلمات بشكل مناسب مع المقاس  والهوامش التى بين السطور حتى يكون واضح ومقروء.سواء كنا نستخدم المحتوى فى تصميم السلايدر او فى مقالات.. وان نجاح اى موقع يعتمد اعتماد كبير على المحتوى وتنسيقه ومراعاة مفهوم الانقرائية

1-التيبوغرافي الجيد يجعلنا نقرأ  …

تعريف التيبوغرافي الجيد ليس مرتبطا بتنسيقه او بشكل الخط وحجمه في الدرجة الاولي رغم اهمية نوع الحجم وحجمه لإنقرائية سليمة للنص على قدر اهمية كون المحتوى هادف ومفيد للزائر ام لا ….!

 

2-التيبوغرافي الجيد يجعلنا نشعر  …

والاحاسيس يمكن ان تنتقل الى القاريء اذا ما كتبت بلغة بسيطة ومفهومة. كما يمكن اختيار التنسيقات التي تؤثر في عين الزائر وتحرك مشاعره.

ويجب أن تثق في قراراتك .وقم بعمل تسلسل هرمي للمحتوي والتصميم فهذا سيسهل القراءة للمستخدمين .

 

 

تتعدد اللغات لكن الفكرة واحدة قابلة للتصوير في كلمات.

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

 

لكنا سنستعرض اولا بعض التلميحات حول :

* كيف نختار الخط المناسب

* وما هي العلاقة بين نوع الخط وحجمه وتأثير هذا على انقرائية النصوص

* كيف ولماذا نمزج بين اكثر من نوع خط …؟!

 

الخطوط وطريقة كتابتها

1- الخطوط وطريقة كتابتها …

يوجد اعتقاد خاطئ أن الخط ونوعه شيئ واحد ,وهذا خاطئ ولنعرف الفرق اليكم الاقتباسيين التاليين لتقريب المعني  :

 

اذا اردت ان اوضح الاختلاف بين الخطوط وطريقة كتابتها لتلاميذي اصورها لهم كمقارنة بين الاغاني ونغمات MP3 او الاغاني والاسطوانات المدمجة CD. “نيك شيرمان  Nick Shermantypographica.org

التوظيف المادي لمجموعة من الخطوط ، الارقام والرموز وغيرها هي ما يسمى بالخط ، اما اذا ما تحدثنا عن التصميم الخاص بهذه التركيبة وكيف تظهر للقاريء فنحن نتحدث عن Typeface . مارك سيمسون – Mark Simonsontypophile.com

بكلمات ابسط …

نحن نختار ونبحث عن نوع الخط , كما نسمع الأغاني.

الخطوط هي عملية التمثيل الرقمي لنوع الخط الذي يستخدمه الكمبيوتر لاظهار النص , تماما مثل “ملفات mp3″ والتي نستمع الى الاغاني بواسطتها.

المظاهر المختلطة Mixing Typefaces

2- الدمج بين أنواع الخطوط Mixing Typefaces

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

1- لا داعي لمزج أنواع الخطوط!

عندما تختار نوع خط لموقعك , احرص علي أن يحتوي علي العديد من الأنماط المختلفة كثقل الخط “weights” . وان بعض التغيرات البسيطة كتغيير حجم الخط وزيادة ثقله كفيلة بجعل المحتوي يبدو جيدا ولا تحتاج لان تمزج العديد من أنواع الخطوط.

2-نوع خط (“Sans-serif” , “serif”) من نفس العائلة في الخطوط

اذا مازلت في حاجة لمزج ودمج أنواع الخطوط , فأنصحك بان تختار أنواع الخطوط من نفس العائلة مثل نوع خط ” serif and sans-serif ” فهم كالتوام في الخطوط . وبالدمج بينهم فانك تقلل خطر أن تظهر الكلمات بشكل غريب . وهذا مثال علي نوع خط توام اخر   FF Meta & FF Meta Serif by Erik Spiekermann.

 

3- مزج أنواع خطوط مختلفة

هناك عدة طرق تستطيع من خلالها مزج أنواع خطوط مختلفة وهذا يكون علي أساس التباين , التشابه والألفه ,التنوع .
وأسهل طريقة للبدأ يكون بمزج نوعين خطوط متشابهين في الحروف .ويجب أن تكون أنواع الخطوط في نفس الطول( x-height) والحروف يجب أن تكون متشابهة في الشكل والخصائص .

وكمثال تستطيع تجربة  Chaparral Pro and Source Sans Pro

العلاقة بين حجم الخط وارتفاعه - line height

3- العلاقة بين حجم الخط وارتفاعه – line height :

يجب ان يساعد التيبوغرافي على قراءة المحتوى بطريقة سهلة. فأنت تريد ان يتمكن القاريء من التنقل بحرية بين الاسطر وينتقل من سطر لآخر بشكل سهل. ولتحقيق هذا عليك تطبيق معايير الانقرائية السليمة للنصوص من خلال الحفاظ على العلاقة بين حجم الخط وارتفاع السطر.

واليكم بعض المبادئ لتوجيهكم في اختيار القرار الصحيح

1- اجعل ارتفاع الخط نسبي (relative ) لحجمه

لاختيارالارتفاع الأمثل للنص يمكنك الاختيار فيما بين 120% و 145% . وهناك بعض التطبيقات التي تساعدك في تحديد القيم المناسبة لذلك ، بالاضافة الى CSS التي تساهم ايضا في معرفة ذلك وتوفر عليك الوقت والجهد في حساب ذلك بشكل يدوي.

2- إبدا بالنصوص (العناوين) الأساسية .

يوجد العديد من النصوص الأساسية في الملف . احرص علي أن تكون قرائتها سهلة وجيدة . للطباعة , حجم الخط المناسب يكون ما بين 9-12 نقطة . في حين أن الحجم المناسب للشاشة يكون ما بين 14-24 بكسل , ويعتمد علي نوع الخط الذي اخترته . وطول السطر الجيد للقراءة يكون مابين 45 – 90 حرف .
3- كل أنواع الخطوط مختلفة

أنواع الخطوط المختلفة يمكن أن تبدو مختلفة , حتي لو كانو بنفس حجم الخط ,خاصة نوع خط (serif ) سيظهر مختلف عن (sans-serif) . وعندما تريد أن تجعل قرائتهم سهلة علي القارئ وتجعلهم يتبعو نفس الخط , فعليك أن تجرب قيم مختلفة لحجم الخط و وتباعد الأسطر لتجد أفضل خيار مناسب .

استخدام الفواصل - Apostrophes

4- استخدام الفواصل – Apostrophes :

الفواصل لا تستخدم كثيرا في لغتنا العربية وانما هي لها استخدامات محددة في اللغة الانجليزية. بمعنى انه اذا كنت تكتب محتوى موقعك باللغة الانجليزية يجب عليك ان تنتبه الى مواطن استخدامك لها.

في الانجليزية تستخدم الفواصل في حالتين :

1- اما في التعبير عن حرف مختزل كما الحال في : Don’t او can’t

2- او في التعبير عن الملكية كما تظهر في : I went to my friend’s home yesterday

الاقتباس - Quotes

5- الاقتباس – Quotes  :

يستخدم الاقتباس في عرض مقولة او جزء من خطاب ما. كما يمكن استخدامها في بعض الاوقات لعرض عبارة هامة يود الكاتب ابرازها امام القاريء.

وهذه اختصارات لوحة المفاتيح :

Untitled-2

الخطوط الفاصلة - Dashes

6- الخطوط الفاصلة – Dashes :

تلك الخطوط الصغيرة ( –  علامة الطرح  ، _  الفاصلة السفلية ) تستخدم في حالات محددة . مثلا في اللغة العربية نستخدم تلك الخطوط الفاصلة في الجمل الاعتراضية . لكن يختلف استخدامها في اللغة الانجليزية.

 

في اللغة الانجليزية تستخدم كل منها في :

( –  علامة الطرح) تستخدم في الفصل بين كلمات مفردة الى عدة اجزاء get-in-my-belly.

او في وضع مسافة بين تاريخين مثل  (1990-1998)

وهذه اختصارات لوحة المفاتيح :

الخطوط الفاصلة - Dashes

 

 

الاقواس - Parentheses, Brackets & Braces

7- الاقواس – Parentheses, Brackets & Braces :

نستخدم الاقواس في تمييز كلمة ما عن بقية الجملة. وغالبا ما تأخذ تنسيقا خاصا بها مثل (الميلان – italic) حتى يكون من السهل تميزها عن باقي العبارة.

ويعتبر اكثر الاشخاص استخداما لهذه الاقواس هم المطورين خاصة اثناء كتابتهم للأوامر في لغات البرمجة. 

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

5 تعليقات

  1. تدوين باحتراف
    7 فبراير,2014 في 4:01 م - Reply

    مشكوور اخي على الموضوع

    • شيرين السعيد
      7 فبراير,2014 في 5:21 م - Reply

      شكرا على مرورك الكريم

  2. Mohamed Mahmoud
    7 فبراير,2014 في 9:39 م - Reply

    مقال ممتاز جداً , يوضح مدي اهمية التايبوجرافي بالنسبة للمستخدم 🙂
    نتمني المزيد من المقالات في الفتره القادمه

    • شيرين السعيد
      8 فبراير,2014 في 12:28 م - Reply

      شكرا استاذ محمد

  3. AKDesigner
    26 مايو,2014 في 12:51 م - Reply

    شكرا لكم على الموضوع 🙂