اذهب إلى المحتوى

بإمكانك إضافة ثلاث تغييرات بسيطة لمحتواك لإضفاء بعض المتعة عند قراءته، وهذه النصائح لا تنطبق فقط على التصميم، بل بإمكانك تطبيقها على المحتوى النصي أيضًا.

الأسماء الخاصة بكل مبدأ قد تكون صعبة بعض الشيء، أما فهمها واستخدامها فهو سهل جدًا.

Capture.JPG

جزء من ملخص رواية البؤساء لتوضيح النص الغير منسق.

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

استخدم التسلسل الهرمي للطباعة لإعطاء فهم أوضح لتركيب الصفحة

والتسلسل الهرمي هو تسلسل النص على شكل هرم في داخل الصفحة.

1-WcAzURD51Ihq8O-TC8kuw.jpg

لك أن تتخيل كتابًا، فيه العنوان الرئيسي أو عنوان الفصل يكون بارزًا أكثر من العنوان الفرعي والذي بدوره أكثر بروزاً من المحتوى الرئيسي أو الحشوة. يجب استخدام هذا المبدأ في التصميم أو المحتوى النصي.

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

  1. النص الرئيسي: بإمكانك تكبير أو تصغير الخط حتى تراه مريحًا للقراءة (نستخدم الحجم 22 نقطة في هذا المقال).
  2. العنوان الرئيسي: يجب أن يكون أكبر بنسبة 180% حتى 200% من النص الرئيسي، (بين 40-44 نقطة في حالتنا).
  3. العنوان الثانوي: يكون %130 حتى 150% من الحاشية، (بين 29-33 نقطة).

وهذا هو شكل الصفحة بعد إتباع الخطوات السابقة:

Capture2.JPG

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

  • العنوان الثالث بإمكانه أن يكون من 100% حتى 125% أكبر من الحاشية, (بين 22-28 نقطة)
  • وصف الصورة يتراوح بين 70% حتى 75% من الحاشية, (بين 15-17 نقطة)

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

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

1-m_oQMHv2KaXlzJ51fknb-Q.jpg

التباعد بين الفقرات

جعل تباعد بين الفقرات سهلُ ولكنه مختلف جدًا عن ما نقوم به في مستندات وورد بالضغط مرتين على زر "سطر جديد"، حيث انه الضغط مرتين على الزر سوف يجعل التباعد بين الفقرات كبيرًا جدًا بحيث لا نستطيع تحديد إذا ما كانت الفقرة التالية تتبع السابقة أم أنها قسم جديد من المحتوى.

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

  • في تطبيقات التصميم وتنسيقات CSS فإن هذا يشبه وضع الهامش السفلي للفقرات على حجم 16 بكسل أو 1 em.

  • في المستندات مثل وورد، حدد قيمة ما بعد الفقرة على نفس حجم النص.

Capture3.JPG

التباعد بين الأسطر

التباعد بين الأسطر يجب أن يكون تقريباً 120% حتى 160% من حجم النص، وكلما كان النص أصغر، كان التباعد بين الأسطر أكبر، لإعطاء كل كلمة مساحة كافية.

إذا كان حجم النص 22 نقطة فإن ارتفاع السطر لهذا النص يجب أن يكون بين 26-35 نقطة.

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

Capture4.JPG

عدل عرض السطر لجعله مريحًا في القراءة

الأسطر العريضة من النصوص صعبة في القراءة بينما الأسطر الأقل عرضًا أسهل. ويعَد الحد المثالي من الأحرف لكل سطر هو 65-75 كلمة، ويجب أن يتم تحديد العرض بالرجوع للنص الرئيسي وليس للعنوان الرئيسي أو الفرعي.

1-PT_xas3H51pYB4WAepEUWA.jpg

نصيحة: سطر من الأحرف والأرقام يتكون من 62 حرفاً ورقماً، وهذا مقياس بسيط لصنع عرض مريح.

وعندما تكون قد وضعت 65-75 حرفاً في السطر, قلل عرض النص حتى يكون على وشك الالتفاف، وعندها ستجد العرض مريحًا.

Capture5.JPG

النتيجة النهائية

بمجرد اتباعك لهذه الخطوات، فإن إمكانية قراءة محتواك سوف تتطور بشكل كبير كما هو موضح أسفل.

ezgif-5-c3f8e4628c05.gif

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

ترجمة -بتصرف- للمقال Typography tips for a more comfortable read لصاحبه Luke Jones

 


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...