كيف تُظهر كتابتك حتى تتألق: 3 حيل تصفيف CSS
نشرت: 2022-03-22كتابتك هي محور مدونتك.
المحتوى هو الملك أليس كذلك؟
إنه ما يجذب الناس ويجعلهم يقرؤون مدونتك.
ولكن ما لا يقل أهمية أيضًا هو كيفية عرض كتاباتك بالفعل. بصريا ، هذا هو.
قد يكون المحتوى الخاص بك رائعًا ، ولكن إذا كان من الصعب على شخص ما قراءته ، فقد تفقد عددًا من القراء أكثر مما تعتقد.
اسمع ، أنا لست كاتبًا مدربًا ، لكنني مصمم ويب وأعرف ما يبدو جيدًا. وما يبدو جيدًا في العادة لا يتعلق بالديكور والذوق ، بل يتعلق بالمزيد حول ما يصلح وما يجعل الأشياء سهلة القراءة والفهم.
لقد درست لسنوات الطرق المختلفة لعرض المحتوى في شكل رقمي ، لذا أود أن أوضح لك بعض الطرق السريعة والسهلة التي يمكنك من خلالها التأكد من عرض المحتوى الخاص بك بشكل جيد في منشورات مدونتك من وجهة نظر مصمم الويب.
هناك عدة طرق يمكنك من خلالها إجراء تعديلات سريعة على مدونتك باستخدام القليل من CSS (أوراق الأنماط المتتالية) بحيث يمكنك ، أنت الكاتب ، عرض المحتوى الخاص بك وتسهيل الاستمتاع به على القراء قدر الإمكان.
سأعطيك بعض أكواد CSS التي يمكنك إضافتها إلى ورقة الأنماط المخصصة الخاصة بك وتعديلها حسب رغبتك. اتبع الإرشادات الخاصة بكيفية تحرير CSS في مدونتك إذا لم تكن متأكدًا من كيفية الوصول إلى ورقة الأنماط المخصصة لمدونتك ..
ثلاث حيل لتصميم المحتوى الخاص بك لعرض كتاباتك
حتى فقراتك جميلة
للتأكد من سهولة قراءة فقراتك ، إليك بعض النصائح التي يجب وضعها في الاعتبار. سنقوم بتصميم علامة p (الفقرة) هنا معًا.
- حدد خطًا مريحًا للعينين. اهدف إلى استخدام خط Serif أو sans serif ، وليس خطًا مكتوبًا بخط اليد.
اختر وزنًا ليس رقيقًا جدًا. لا تبدو بعض الخطوط الرفيعة جدًا جيدة جدًا في بعض المتصفحات وأنظمة التشغيل (مثل mac أو PC) ، لذا اطلب من الأشخاص التحقق منها نيابةً عنك وإعطائك إبهامًا.
في نفس الوقت ، اختر خطًا ليس سميكًا جدًا. تريد أن تحتوي على تباين كافٍ مع أي نص غامق.
عند اختيار خط ، تأكد من أنك تستخدم خط نظام أو خط قمت بتحميله إلى ملفات مدونتك أو خط Google. أقترح استخدام أحد خطوط Google لأنها مجانية وتتميز بتنوعها الأكبر وأسهلها في الاستخدام. لمزيد من التفاصيل ، تحقق من كيفية استخدام الخطوط الرائعة في مدونتك.
عندما تحدد الخط الخاص بك ، ستنتقل إلى ورقة الأنماط المخصصة وتضيف هذا الرمز:
<قبل>
ص {
عائلة الخطوط: INSERT FONT NAME ؛
}
</pre>
- استخدم حجم خط يسهل قراءته على أي شاشة بأي حجم. تحقق من مدونتك على الهاتف وتأكد من أن النص ليس صغيرًا جدًا للعيون المتعبة أو المسنة.
عادة ما يكون الحجم الجيد للفقرات من 14 إلى 16 بكسل. لا تعرض كل الخطوط نفس الأحجام ، لذا العب بها لترى أيها يبدو أفضل.
<قبل>
ص {
عائلة الخطوط: INSERT FONT NAME ؛
حجم الخط: 16 بكسل ؛
}
</pre>
- استخدم ارتفاعات الخط المناسبة (المسافة بين السطور). تساعد ارتفاعات الأسطر المناسبة أيضًا في سهولة القراءة لأنها توفر مساحة للتنفس للفقرات الخاصة بك. ارتفاع السطر الجيد هو 1.5 ، بمعنى آخر 1.5 ضعف حجم النص (ارتفاع السطر 2 سيكون متباعدًا بشكل مزدوج).
<قبل>
ص {
عائلة الخطوط: INSERT FONT NAME ؛
حجم الخط: 16 بكسل ؛
ارتفاع الخط: 1.5 ؛
}
</pre>
- تجنب النص الأسود الخالص على الأبيض. إنه صعب على العيون. بدلاً من ذلك ، اختر اللون الرمادي الداكن (أحب # 333333) لنسختك لتقليل التباين قليلاً.
<قبل>
ص {
عائلة الخطوط: INSERT FONT NAME ؛
حجم الخط: 16 بكسل ؛
ارتفاع الخط: 1.5 ؛
اللون: # 333333 ؛
}
</pre>
- تجنب توسيط محاذاة الفقرات. يبدو توسيط نسخة جسمك أمرًا هواةًا ويزيد من صعوبة قراءتها. لماذا ا؟ في كل مرة تنتقل فيها عينك إلى سطر جديد ، يتعين عليها أن تكافح للعثور على بداية السطر التالي لأنها لا تتواجد في نفس المكان أبدًا. محاذاة أو تبرير فقراتك العادية. يتم تباعد النص المضبوط بحيث يكون للجانب الأيمن والأيسر من الفقرة حافة مستقيمة.
<قبل>
ص {
عائلة الخطوط: INSERT FONT NAME ؛
حجم الخط: 16 بكسل ؛
ارتفاع الخط: 1.5 ؛
اللون: # 333333 ؛
محاذاة النص: ضبط ؛
}
</pre>
<pre> محاذاة النص: يسار ؛ </pre> هو السلوك الافتراضي ولا يلزم تحديده إلا إذا كنت بحاجة إلى تجاوز نمط سابق.
- أخيرًا ، أضف مسافة بيضاء. ستحتاج إلى مسافة بيضاء كافية بين فقراتك للحصول على أفضل قراءة. هناك قاعدة جيدة تتمثل في إضافة هامش أسفل كل فقرة يساوي ضعف حجم الخط.
<قبل>
ص {
عائلة الخطوط: INSERT FONT NAME ؛
حجم الخط: 16 بكسل ؛
ارتفاع الخط: 1.5 ؛
اللون: # 333333 ؛
محاذاة النص: ضبط ؛
الهامش السفلي: 32 بكسل ؛
}
</pre>
استخدم التسلسل الهرمي
أنت تستخدم التسلسل الهرمي عندما تحدد الخطوط العريضة لمشاركاتك باستخدام العناوين والعناوين الفرعية.
لإنشاء تسلسل هرمي مرئي في مشاركاتك ، قم بتصميم العناوين والعناوين الفرعية بحيث يسهل التمييز بينها. هنا بعض النصائح:
- استخدم نفس الخط لجميع العناوين بأحجام مختلفة.
- استخدم خطًا يسهل قراءته ، مثل خط serif أو sans serif. يمكنك اختيار استخدام نفس محرف لنسخة جسمك بوزن أكثر سمكًا أو يمكنك اختيار محرف مختلف يتناقض بشكل جيد مع نسخة جسمك.
- اضبط العناوين والعناوين الفرعية على وزن سميك أو أثقل.
- استخدم Typecast للعب بخطوط وأحجام وأوزان مختلفة لعناوينك ومقارنتها بنص فقرتك.
في ما يلي مثال لما قد تتوصل إليه بشأن الحجم إذا تم ضبط فقراتك على حجم الخط 16 بكسل. ثم تصعد من هناك:
- عناوين h6 = 16 بكسل (عادةً ما تكون بنفس حجم نص الفقرة ، ولكن بخط عريض وعلى السطر الخاص بها)
- عناوين h5 = 18 بكسل
- عناوين h4 = 22 بكسل
- عناوين h3 = 26 بكسل
- عناوين h2 = 30 بكسل
- عناوين h1 (عناوين منشورات مدونتك) = 36 بكسل
مرة أخرى ، العب مع Typecast لترى ما يبدو أفضل لعينيك. بمجرد تحديد الخطوط والأحجام التي تريد استخدامها لعناوينك ، سترغب في الانتقال إلى ورقة الأنماط المخصصة الخاصة بك وإضافة CSS هذا لجميع العناوين الخاصة بك:
<قبل>
h1 ، h2 ، h3 ، h4 ، h5 ، h6 {
عائلة الخطوط: INSERT FONT NAME ؛
حجم الخط: 36 بكسل ؛
وزن الخط: عريض ؛
}
</pre>
بعد ذلك ، ستضيف بعض تجاوزات CSS فقط لتغيير الأحجام لكل مستوى من مستويات العنوان:
<قبل>
h2 {
حجم الخط: 30 بكسل ؛
}
h3 {
حجم الخط: 26 بكسل ؛
}
h4 {
حجم الخط: 22 بكسل ؛
}
h5 {
حجم الخط: 18 بكسل ؛
}
h6 {
حجم الخط: 16 بكسل ؛
}
</pre>
استخدم الروابط
لا تجعل القراء يفكرون! يجب أن تبدو الروابط الخاصة بك مثل الروابط ، مما يعني أنه يجب أن تكون واضحة تمامًا على أنها شيء يمكن النقر فوقه. فيما يلي بعض الطرق للقيام بذلك:
- اختر لونًا للروابط الخاصة بك يتباين مع نصك العادي.
- حجز لون واحد فقط للروابط الخاصة بك. لا تستخدم نفس اللون للعناوين أو العناوين الفرعية أو عناوين عناصر واجهة استخدام الشريط الجانبي أو أي نص آخر.
- ومع ذلك ، يمكنك استخدام هذا اللون للأزرار إذا كنت ترغب في ذلك لأنها أيضًا عناصر قابلة للنقر.
- لا تضع خطًا تحت النص الذي لا يمثل رابطًا ، فهذا محير لأن الناس يفترضون عادةً أن النص الذي تحته خط هو ارتباط.
<قبل>
أ {
اللون الوردي؛
زخرفة النص: تسطير ؛
}
</pre>
صمم حالات الارتباط المختلفة لمساعدة القراء على تمييزها كروابط. إن جعلهم يغيرون المظهر عندما يحوم المستخدم فوقهم يعطي مؤشرًا إضافيًا على أنه رابط نشط.
<قبل>
أ: تحوم {
لون أزرق؛
زخرفة النص: لا شيء ؛
}
</pre>
يمكنك أيضًا اختيار تصميم الروابط التي قمت بزيارتها بشكل مختلف لتوضح للمستخدمين أنهم قد زاروا بالفعل رابطًا معينًا.
<قبل>
أ: زار {
لون أزرق؛
}
</pre>
لعرض كتابتك بحيث تتألق ، لا يتطلب الأمر سوى عدد قليل من التعديلات البسيطة
هذه مجرد بعض الحيل لعرض كتاباتك لتسهيل قراءتها وبالتالي مساعدة المحتوى الخاص بك في التميز!
ما هي الطرق الأخرى التي تخطط بها منشورات المدونة الخاصة بك لتسهيل قراءتها لمستخدميك؟
هل ترغب في معرفة المزيد حول كيفية الاستفادة من CSS لجعل مدونتك أكثر جاذبية لقرائك وعرض كتاباتك حقًا؟ مدهش! ثم أود أن تنضم إلي في تدريب فيديو مجاني على CSS. سيبدأ قريبًا ، قم بالتسجيل الآن.
الصورة مجاملة من Pixabay