تنسيق الخطوط (Typography)

جزء من قسم Practical Frontend في رحلة HTML على Coddy — الدرس 15 من 35.

تعد الطباعة (Typography) جزءاً مهماً من التصميم وتحديد السمات (theming). بدلاً من كتابة أنماط الخطوط في كل مكان، يمكننا تعريفها كـ CSS variables وإعادة استخدامها في جميع أنحاء الموقع. هذا يحافظ على اتساق النمط ويجعل تغييره لاحقاً أسهل.

يمكنك تعريف متغيرات لـ:

عائلة الخط (على سبيل المثال، --font-family-base، --font-family-heading)

أحجام الخطوط (على سبيل المثال، --font-size-base، --font-size-h1)
ارتفاع السطر
تباعد الأحرف

أولاً، دعنا نحدد متغيرات الطباعة (typography) الخاصة بنا في العنصر :root:

:root {
  --font-primary: 'Open Sans', sans-serif;
  --font-secondary: 'Roboto', sans-serif;
  --font-size-base: 16px;
  --line-height: 1.5;
  --heading-color: #333;
  --text-color: #555;
}

الآن، قم بتطبيق هذه المتغيرات على عناصر النص الخاصة بك:

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  color: var(--heading-color);
}

ينشئ هذا الإعداد نظاماً موحداً لتنسيق الخطوط يمكنك تعديله بسهولة عن طريق تغيير قيم المتغيرات في مكان واحد.

التحدي

سهل

أنشئ سمة طباعة (typography theme) لموقع مدونة مع متغيرات منفصلة للعناوين ونص الفقرة. مهمتك:

حدد متغيرات CSS لـ:
- أحجام الخطوط للعناوين (--h1-size و --h2-size)
- لون النص للفقرات (--text-color) — اختر لونًا غير الأسود الخالص لتحسين القابلية للقراءة
- لون النص للعناوين ( --heading-color ) — اختر لونًا يبرز عن نص المحتوى
قم بتطبيق هذه المتغيرات لتنسيق:
- نص المحتوى (body text)
- عناوين h1 و h2

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

ورقة مرجعية

استخدم متغيرات CSS لإنشاء أنظمة طباعة متسقة من خلال تحديد أنماط الخطوط مرة واحدة وإعادة استخدامها في جميع أنحاء الموقع.

حدد متغيرات الطباعة في عنصر :root:

:root {
  --font-primary: 'Open Sans', sans-serif;
  --font-secondary: 'Roboto', sans-serif;
  --font-size-base: 16px;
  --line-height: 1.5;
  --heading-color: #333;
  --text-color: #555;
}

قم بتطبيق المتغيرات على العناصر النصية باستخدام var():

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  color: var(--heading-color);
}

تشمل متغيرات الطباعة الشائعة ما يلي:

عائلة الخطوط (الخطوط الأساسية وخطوط العناوين)
أحجام الخطوط (الحجم الأساسي وأحجام العناوين)
ارتفاع السطر
تباعد الأحرف
الألوان (ألوان النص والعناوين)

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>Typography Theming</title>
  <style>
    :root {
      /* Typography variables */
      --primary-font: "Georgia", serif;       /* for paragraphs */
      --secondary-font: "Arial", sans-serif; /* for headings */

    }

    body {
      font-family: var(--primary-font);
      color: #000000;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
      background-color: #f9f9f9;
    }

    h1, h2 {
      font-family: var(--secondary-font);
      color: #000000;
      margin-bottom: 0.5em;
    }

    h1 {
      font-size: 16px;
    }

    h2 {
      font-size: 16px;
    }

    p {
      margin-bottom: 1.2em;
    }

    .blog-post {
      max-width: 700px;
      margin: 0 auto;
      background: #fff;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="blog-post">
    <h1>The Beauty of Typography in Web Design</h1>
    <p>Typography plays a crucial role in how users read and experience content online. A good choice of fonts and sizes can make a website more readable and enjoyable.</p>

    <h2>Why Typography Matters</h2>
    <p>Clear and consistent typography improves accessibility, creates a visual hierarchy, and gives your website a professional feel. Without it, even the best design can look unpolished.</p>

    <h2>Mobile-First Typography</h2>
    <p>Starting with smaller, readable text for mobile and scaling up for desktops ensures your content looks great on any device. This approach is part of mobile-first design and theming.</p>
  </div>
</body>
</html>