עיצוב טיפוגרפיה

חלק מהיחידה פיתוח Frontend מעשי במסלול ה-HTML של Coddy. שיעור 15 מתוך 35.

טיפוגרפיה היא חלק חשוב בעיצוב ובערכת הנושא. במקום לכתוב סגנונות גופנים בכל מקום, אפשר להגדיר אותם בתור משתני CSS ולהשתמש בהם מחדש ברחבי האתר. כך הסגנון נשאר עקבי וקל יותר לשנות אותו בהמשך.

אפשר להגדיר משתנים עבור:

משפחת גופנים (למשל, --font-family-base, --font-family-heading)

גדלי גופן (לדוגמה, --font-size-base, --font-size-h1)
גובה שורה
ריווח בין אותיות

ראשית, נגדיר את משתני הטיפוגרפיה שלנו באלמנט :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);
}

ההגדרה הזו יוצרת מערכת טיפוגרפיה אחידה שאפשר לשנות בקלות על ידי שינוי ערכי המשתנים במקום אחד.

אתגר

קל

צרו ערכת עיצוב לטיפוגרפיה עבור אתר בלוג, עם משתנים נפרדים לכותרות ולטקסט של הפסקאות. המשימה שלכם:

הגדירו משתני CSS עבור:
- גדלי גופנים לכותרות (--h1-size ו---h2-size)
- צבע הטקסט של הפסקאות (--text-color): בחרו צבע שאינו שחור טהור לשיפור הקריאות
- צבע הטקסט של הכותרות ( --heading-color ): בחרו צבע שבולט ביחס לטקסט גוף הדף
החילו את המשתנים האלה כדי לעצב את:
- טקסט גוף הדף
- כותרות h1 ו-h2

ה-CSS שלכם צריך ליצור היררכיה חזותית ברורה בין הכותרות לטקסט של הפסקאות.

נסו בעצמכם

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