Jump to content
  • entries
    21
  • comments
    0
  • views
    418
Doğuhan ELMA

Entry posted by Doğuhan ELMA in Typography

33 views

 Share

font-size, CSS’te bir metnin yazı tipi boyutunu belirleyen özelliktir. Yani sayfadaki bir yazının ne kadar büyük veya küçük görüneceğini kontrol edersin.

Modern web geliştirmede font-size konusu ciddi bir evrim geçirdi. Detaylı açıklayayım.

1. Birimler ve Temel Kavramlar

Absolute (Mutlak) Birimler 

/* PX - Pixel */
p { font-size: 16px; }
  • ❌ Tarayıcı ayarlarına duyarlı değil
  • ❌ Kullanıcı font tercihlerini görmezden gelir
  • ✅ Kesin kontrol sağlar
  • ⚠️ Erişilebilirlik sorunu 
/* PT, CM, MM - Baskı birimleri */
p { font-size: 12pt; } /* Sadece print için uygun */

Relative (Göreceli) Birimler 

/* EM - Parent'a göre */
.parent { font-size: 16px; }
.child { font-size: 1.5em; } /* 16px × 1.5 = 24px */
.grandchild { font-size: 1.5em; } /* 24px × 1.5 = 36px - COMPOUND EFFECT! */

EM'in Tehlikesi - Cascading Problem: 

.article { font-size: 1.2em; }
.article p { font-size: 1.1em; }
.article p strong { font-size: 1.2em; }

/* İç içe geçince: 1.2 × 1.1 × 1.2 = 1.584em - Kontrol kaybı! */
/* REM - Root'a göre (html elementi) */
html { font-size: 16px; } /* Base size */
h1 { font-size: 2rem; }    /* Her zaman 32px */
p { font-size: 1rem; }     /* Her zaman 16px */

✅ **REM avantajları:**
- Compound effect yok
- Öngörülebilir
- Kullanıcı font tercihleri çalışır
- Tek bir yerden (root) tüm siteyi ölçeklendirebilirsin

 

2. Tarayıcının Varsayılan Yaklaşımı

Tarayıcı Font-Size Hiyerarşisi 

1. User Agent Stylesheet (Tarayıcı varsayılanı)
   └─ html { font-size: 16px; }

2. User Settings (Kullanıcı ayarları)
   └─ Tarayıcı ayarlarından font boyutu değiştirme

3. Author Stylesheet (Senin CSS'in)
   └─ Senin yazdığın kurallar

 

Tarayıcı Varsayılan Font Boyutları 

/* Çoğu tarayıcının varsayılanı */
html { font-size: 16px; }

h1 { font-size: 2em; }      /* 32px */
h2 { font-size: 1.5em; }    /* 24px */
h3 { font-size: 1.17em; }   /* ~18.72px */
h4 { font-size: 1em; }      /* 16px */
h5 { font-size: 0.83em; }   /* ~13.28px */
h6 { font-size: 0.67em; }   /* ~10.72px */

p { font-size: 1em; }       /* 16px */
small { font-size: 0.875em; } /* 14px */

 

3. Eski (Geleneksel) Yaklaşım

2000'ler - Pixel Tabanlı 

/* Eskiden herkes bunu yapardı */
body { font-size: 14px; }
h1 { font-size: 28px; }
p { font-size: 14px; }
small { font-size: 12px; }

❌ Sorunlar:

  • Sabit boyutlar
  • Responsive değil
  • Erişilebilirlik kötü
  • Kullanıcı tercihleri çalışmaz

2010'lar - Em Tabanlı (İlk Responsive Dönem) 

body { font-size: 100%; } /* 16px */
h1 { font-size: 2em; }
p { font-size: 1em; }

@media (max-width: 768px) {
  body { font-size: 87.5%; } /* 14px */
}

⚠️ Sorun: Compound effect ve karmaşık hesaplamalar

4. Modern Yaklaşım (2020+)

A) REM Tabanlı Sistem (En Yaygın) 

/* 1. Root'u % olarak ayarla (kullanıcı tercihlerine saygı) */
html {
  font-size: 100%; /* 16px, ama kullanıcı değiştirirse ona uyar */
}

/* 2. Her şeyi REM ile tanımla */
:root {
  --font-xs: 0.75rem;   /* 12px */
  --font-sm: 0.875rem;  /* 14px */
  --font-base: 1rem;    /* 16px */
  --font-lg: 1.125rem;  /* 18px */
  --font-xl: 1.25rem;   /* 20px */
  --font-2xl: 1.5rem;   /* 24px */
  --font-3xl: 1.875rem; /* 30px */
  --font-4xl: 2.25rem;  /* 36px */
}

body {
  font-size: var(--font-base);
}

h1 { font-size: var(--font-4xl); }
h2 { font-size: var(--font-3xl); }
p { font-size: var(--font-base); }
small { font-size: var(--font-sm); }

B) Fluid Typography (Akışkan Tipografi)

Eski yöntem - Media Query'ler: 

h1 {
  font-size: 1.5rem; /* Mobile */
}

@media (min-width: 768px) {
  h1 { font-size: 2rem; } /* Tablet */
}

@media (min-width: 1024px) {
  h1 { font-size: 2.5rem; } /* Desktop */
}

Modern yöntem - Clamp(): 

h1 {
  /* min: 1.5rem, ideal: viewport'a göre ölçeklen, max: 3rem */
  font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}

/* Viewport genişliği arttıkça smooth geçiş */

C) Viewport Birimleri + Clamp (En Modern) 

:root {
  /* Fluid type scale */
  --font-base: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --font-h1: clamp(2rem, 4vw + 1rem, 4rem);
  --font-h2: clamp(1.5rem, 3vw + 0.75rem, 3rem);
  --font-h3: clamp(1.25rem, 2vw + 0.5rem, 2rem);
}

body {
  font-size: var(--font-base);
}

h1 { font-size: var(--font-h1); }
h2 { font-size: var(--font-h2); }
h3 { font-size: var(--font-h3); }

Clamp Formülü Açıklaması: 

font-size: clamp(
  1rem,                    /* Minimum: Mobile'da bu */
  0.5vw + 0.875rem,        /* İdeal: Viewport'a göre büyü */
  1.125rem                 /* Maximum: Çok büyük ekranlarda bu */
);

 

D) Container Query ile Font-Size (2024+) 

.card-container {
  container-type: inline-size;
  container-name: card;
}

.card h2 {
  font-size: 1rem;
}

/* Container 400px'den büyükse */
@container card (min-width: 400px) {
  .card h2 {
    font-size: 1.5rem;
  }
}

/* Container 600px'den büyükse */
@container card (min-width: 600px) {
  .card h2 {
    font-size: 2rem;
  }
}

 

5. Responsive Font-Size Stratejileri

Strateji 1: Type Scale (Modular Scale) 

:root {
  /* 1.25 ratio (Major Third) */
  --ratio: 1.25;
  
  --font-xs: calc(1rem / var(--ratio) / var(--ratio));  /* 0.64rem */
  --font-sm: calc(1rem / var(--ratio));                 /* 0.8rem */
  --font-base: 1rem;                                    /* 1rem */
  --font-lg: calc(1rem * var(--ratio));                 /* 1.25rem */
  --font-xl: calc(1rem * var(--ratio) * var(--ratio)); /* 1.563rem */
  --font-2xl: calc(1rem * var(--ratio) * var(--ratio) * var(--ratio)); /* 1.953rem */
}

/* Responsive ratio */
@media (min-width: 768px) {
  :root {
    --ratio: 1.333; /* Perfect Fourth - Tablet'te daha aggressive */
  }
}

@media (min-width: 1024px) {
  :root {
    --ratio: 1.5; /* Perfect Fifth - Desktop'ta daha da aggressive */
  }
}

Strateji 2: Utopia Fluid Type (Matematiksel Yaklaşım) 

:root {
  /* Minimum viewport: 320px */
  /* Maximum viewport: 1240px */
  
  --font-base: clamp(
    1rem,                                    /* 16px at 320px */
    0.913rem + 0.43vw,                       /* Fluid between */
    1.125rem                                 /* 18px at 1240px */
  );
  
  --font-h1: clamp(
    2rem,                                    /* 32px at 320px */
    1.217rem + 3.91vw,                       /* Fluid between */
    4rem                                     /* 64px at 1240px */
  );
}

 

Strateji 3: Step-Based System (Tailwind Tarzı) 

:root {
  /* Base boyut responsive */
  --font-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  
  /* Her step base'e göre */
  --step--2: calc(var(--font-base) * 0.64);  /* ~10-11px */
  --step--1: calc(var(--font-base) * 0.8);   /* ~13-14px */
  --step-0: var(--font-base);                /* 16-18px */
  --step-1: calc(var(--font-base) * 1.25);   /* 20-22px */
  --step-2: calc(var(--font-base) * 1.563);  /* 25-28px */
  --step-3: calc(var(--font-base) * 1.953);  /* 31-35px */
  --step-4: calc(var(--font-base) * 2.441);  /* 39-44px */
  --step-5: calc(var(--font-base) * 3.052);  /* 49-55px */
}

/* Kullanım */
body { font-size: var(--step-0); }
small { font-size: var(--step--1); }
h4 { font-size: var(--step-2); }
h3 { font-size: var(--step-3); }
h2 { font-size: var(--step-4); }
h1 { font-size: var(--step-5); }

 

6. Best Practices (2024)

✅ YAPILMASI GEREKENLER 

/* 1. Root'u asla px ile set etme */
html {
  font-size: 100%; /* DOĞRU */
  /* font-size: 16px; - YANLIŞ */
}

/* 2. REM kullan, px kullanma */
p {
  font-size: 1rem; /* DOĞRU */
  /* font-size: 16px; - YANLIŞ */
}

/* 3. Clamp ile smooth scaling */
h1 {
  font-size: clamp(1.5rem, 2vw + 1rem, 3rem); /* DOĞRU */
}

/* 4. CSS Variables ile yönet */
:root {
  --font-body: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
}

body {
  font-size: var(--font-body); /* DOĞRU */
}

/* 5. Line-height'ı da responsive yap */
p {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  line-height: 1.6; /* Unitless - font-size'a göre ölçeklenir */
}

❌ YAPILMAMASI GEREKENLER 

/* 1. Root'u px ile ayarlama */
html {
  font-size: 16px; /* YANLIŞ - Kullanıcı tercihlerini ezer */
}

/* 2. Her yerde px kullanma */
p {
  font-size: 14px; /* YANLIŞ */
  padding: 10px;   /* YANLIŞ */
  margin: 20px;    /* YANLIŞ */
}

/* 3. Em'i font-size için kullanma (compound effect) */
.nested {
  font-size: 1.2em; /* RİSKLİ - İç içe geçince sorun */
}

/* 4. Çok fazla breakpoint */
h1 { font-size: 1.5rem; }
@media (min-width: 480px) { h1 { font-size: 1.75rem; } }
@media (min-width: 768px) { h1 { font-size: 2rem; } }
@media (min-width: 1024px) { h1 { font-size: 2.5rem; } }
@media (min-width: 1280px) { h1 { font-size: 3rem; } }
/* Bunun yerine clamp() kullan! */

7. Gerçek Dünya Örneği

Production-Ready Font System 

/* ============================================
   MODERN FLUID TYPE SYSTEM
   ============================================ */

/* 1. Root ayarları */
html {
  font-size: 100%; /* 16px, ama kullanıcıya saygılı */
  
  /* Smooth scroll için bonus */
  scroll-behavior: smooth;
}

/* 2. CSS Custom Properties */
:root {
  /* Base fluid size */
  --fluid-base: clamp(1rem, 0.913rem + 0.43vw, 1.125rem);
  
  /* Type scale - fluid */
  --fluid-xs: clamp(0.75rem, 0.69rem + 0.29vw, 0.875rem);
  --fluid-sm: clamp(0.875rem, 0.826rem + 0.25vw, 1rem);
  --fluid-lg: clamp(1.125rem, 1.038rem + 0.43vw, 1.313rem);
  --fluid-xl: clamp(1.25rem, 1.109rem + 0.7vw, 1.563rem);
  --fluid-2xl: clamp(1.5rem, 1.283rem + 1.09vw, 1.953rem);
  --fluid-3xl: clamp(1.875rem, 1.543rem + 1.66vw, 2.441rem);
  --fluid-4xl: clamp(2.25rem, 1.826rem + 2.12vw, 3.052rem);
  --fluid-5xl: clamp(2.75rem, 2.174rem + 2.88vw, 3.815rem);
}

/* 3. Global typography */
body {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: var(--fluid-base);
  line-height: 1.6;
  color: #1a1a1a;
}

/* 4. Headings */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.5em;
}

h1 { font-size: var(--fluid-5xl); }
h2 { font-size: var(--fluid-4xl); }
h3 { font-size: var(--fluid-3xl); }
h4 { font-size: var(--fluid-2xl); }
h5 { font-size: var(--fluid-xl); }
h6 { font-size: var(--fluid-lg); }

/* 5. Body text elements */
p {
  font-size: var(--fluid-base);
  margin-bottom: 1em;
}

small {
  font-size: var(--fluid-sm);
}

/* 6. Utility classes */
.text-xs { font-size: var(--fluid-xs); }
.text-sm { font-size: var(--fluid-sm); }
.text-base { font-size: var(--fluid-base); }
.text-lg { font-size: var(--fluid-lg); }
.text-xl { font-size: var(--fluid-xl); }
.text-2xl { font-size: var(--fluid-2xl); }
.text-3xl { font-size: var(--fluid-3xl); }
.text-4xl { font-size: var(--fluid-4xl); }
.text-5xl { font-size: var(--fluid-5xl); }

/* 7. Print styles */
@media print {
  html {
    font-size: 12pt;
  }
  
  h1 { font-size: 24pt; }
  h2 { font-size: 20pt; }
  h3 { font-size: 18pt; }
  p { font-size: 12pt; }
}

/* 8. Reduced motion için */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

 

8. Özet - Modern Yaklaşım Checklist

✅ Root'u % olarak ayarla → Kullanıcı tercihlerine saygı
✅ REM kullan → Öngörülebilir, compound effect yok
✅ Clamp() ile fluid typography → Smooth responsive geçişler
✅ CSS Variables ile merkezi yönetim → Kolay bakım
✅ Type scale sistemi → Tutarlı hiyerarşi
✅ Line-height unitless → Font-size ile ölçeklensin
✅ Container queries → Component-bazlı responsive

❌ PX kullanma (root ve font-size için)
❌ EM ile font-size (spacing için kullanabilirsin)
❌ Çok fazla breakpoint (clamp kullan)
❌ Sabit değerler (fluid olsun)

Modern web'de font-size artık sadece "boyut" değil, erişilebilirlik, responsive tasarım ve kullanıcı deneyiminin kesişim noktası!

 Share

0 Comments

Recommended Comments

There are no comments to display.

×
×
  • Create New...

Important Information

  I accept