Tipografi Temalandırma

Coddy'nin HTML Journey'sinin Pratik Ön Yüz bölümünün bir parçası. Ders 15 / 35.

Tipografi, tema oluşturma ve tasarımın önemli bir parçasıdır. Yazı tipi stillerini her yerde yazmak yerine, bunları CSS değişkenleri olarak tanımlayabilir ve site genelinde yeniden kullanabiliriz. Bu, stilin tutarlı kalmasını sağlar ve daha sonra değiştirmeyi kolaylaştırır.

Şunlar için değişkenler tanımlayabilirsiniz:

Yazı tipi ailesi (örneğin, --font-family-base, --font-family-heading)

Yazı tipi boyutları (ör. --font-size-base, --font-size-h1)
Satır yüksekliği
Harf aralığı

Öncelikle, tipografi değişkenlerimizi :root öğesinde tanımlayalım:

: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;
}

Şimdi bu değişkenleri metin öğelerinize uygulayın:

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);
}

Bu kurulum, değişken değerlerini tek bir yerden değiştirerek kolayca düzenleyebileceğiniz birleşik bir tipografi sistemi oluşturur.

Görev

Kolay

Başlıklar ve paragraf metni için ayrı değişkenlere sahip bir blog web sitesi için tipografi teması oluştur. Görevin:

Şunlar için CSS değişkenleri tanımla:
- Başlıklar için yazı tipi boyutları (--h1-size ve --h2-size)
- Paragraflar için metin rengi (--text-color): daha iyi okunabilirlik için saf siyah dışında bir renk seç
- Başlıklar için metin rengi ( --heading-color ): gövde metninden belirgin şekilde ayrılan bir renk seç
Bu değişkenleri şunları biçimlendirmek için uygula:
- Gövde metni
- h1 ve h2 başlıkları

CSS'in, başlıklar ve paragraf metni arasında net bir görsel hiyerarşi oluşturmalı.

Kendin dene

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