Tipografi Temalandırma

Coddy'nin HTML Journey'sinin Practical Frontend bölümünün bir parçası — ders 15 / 35.

Tipografi, temalandırma ve tasarımın önemli bir parçasıdır. Yazı tipi stillerini her yere yazmak yerine, onları CSS değişkenleri olarak tanımlayabilir ve site genelinde yeniden kullanabiliriz. Bu, stilin tutarlı kalmasını sağlar ve daha sonra değiştirilmesini 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ı (örneğin, --font-size-base, --font-size-h1)
Satır yüksekliği
Harf aralığı

İlk olarak, 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 modifiye edebileceğiniz birleşik bir tipografi sistemi oluşturur.

Görev

Kolay

Bir blog web sitesi için başlıklar ve paragraf metni için ayrı değişkenlere sahip bir tipografi teması oluşturun. Göreviniz:

Şunlar için CSS değişkenleri tanımlayın:
- 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çin
- Başlıklar için metin rengi ( --heading-color ) — gövde metninden öne çıkan bir renk seçin
Bu değişkenleri şunları stillendirmek için uygulayın:
- Gövde metni
- h1 ve h2 başlıkları

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

Kopya kağıdı

Yazı tipi stillerini bir kez tanımlayıp site genelinde yeniden kullanarak tutarlı tipografi sistemleri oluşturmak için CSS değişkenlerini kullanın.

Tipografi değişkenlerini :root öğesinde tanımlayın:

: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() kullanarak değişkenleri metin öğelerine 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);
}

Yaygın tipografi değişkenleri şunları içerir:

Yazı tipi ailesi (temel ve başlık yazı tipleri)
Yazı tipi boyutları (temel boyut ve başlık boyutları)
Satır yüksekliği
Harf aralığı
Renkler (metin ve başlık renkleri)

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>