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

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

Typography جزء مهم من theming وdesign. بدلًا من كتابة font styles في كل مكان، يمكننا تعريفها على أنها CSS variables وإعادة استخدامها في جميع أنحاء الموقع. يحافظ هذا على اتساق style ويجعل تغييره لاحقًا أسهل.

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

عائلة الخط (مثل --font-family-base و--font-family-heading)

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

First، لنعرّف typography variables الخاصة بنا في عنصر :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 يمكنك تعديله بسهولة من خلال تغيير قيم المتغيرات في مكان واحد.

التحدي

سهل

أنشئ سمة Typography لموقع blog مع variables منفصلة لـ headings وparagraph text. مهمتك:

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

ينبغي أن تنشئ CSS لديك hierarchy بصرية واضحة بين headings وparagraph text.

REQUIRED OUTPUT FORMAT: [Your translated content here]

جرّب بنفسك

<!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>