React İle Web Uygulamaları İçin Dinamik Bir Yazı Yazı Tipi Ölçeklendirici Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Dinamik yazı tipi ölçeklendiriciyi geliştirmeye başlamadan önce sisteminizde Node.js (v18+) ve React 19 veya üzeri bir sürümün yüklü olduğundan emin olmalıyız. Projenizi başlatmak için Vite gibi modern bir derleyici kullanmanız önerilir.

• Node.js (LTS sürümü)
• React 19 ve TypeScript (opsiyonel ancak önerilir)
• CSS Modülleri veya Tailwind CSS (bu rehberde saf CSS değişkenleri ile ilerleyeceğiz)

Öncelikle projenizin kök dizininde bir styles/globals.css dosyası oluşturun. Burada ölçeklendirme için temel değişkenlerimizi tanımlayacağız.

:root {
  --base-font-size: 16px;
  --scale-factor: 1.25; /* Major Third ölçeklendirme */
}

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

Yukarıdaki kod, tüm uygulamanın temel yazı tipi boyutunu merkezi bir noktadan yönetmemizi sağlar. --scale-factor değişkeni, h1, h2 gibi başlıkların temel boyuta göre nasıl oranlanacağını belirler.

Adım Adım Dinamik Ölçeklendirici Mantığı

Dinamik ölçeklendirici, ekran genişliğini (viewport width) takip eden ve bu genişliğe göre CSS kök değişkenlerini güncelleyen bir React bileşenine dayanır. Kullanıcı tarayıcıyı yeniden boyutlandırdığında veya tercih değiştirdiğinde, metinler otomatik olarak tepki verir.

Öncelikle, pencere boyutunu dinleyen ve buna göre bir "ölçek katsayısı" hesaplayan özel bir kanca (custom hook) oluşturalım.

import { useState, useEffect } from 'react';

export const useFontSizeScale = () => {
  const [scale, setScale] = useState(1);

  useEffect(() => {
    const handleResize = () => {
      const width = window.innerWidth;
      // 1200px üzerinde ölçek büyür, altında küçülür
      const newScale = width > 1200 ? 1.2 : 1;
      setScale(newScale);
    };

    window.addEventListener('resize', handleResize);
    handleResize();
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return scale;
};

Bu kanca, tarayıcı penceresinin genişliğini sürekli izler. 1200 piksel genişliğin üzerindeki ekranlarda newScale değerini artırarak metinlerin daha büyük görünmesini sağlar.

React Bileşeninde Dinamik Ölçek Uygulama

Şimdi bu kancayı ana bileşenimizde kullanarak CSS değişkenlerini güncelleyelim. React'te DOM üzerindeki stil özelliklerini doğrudan değiştirmek için document.documentElement.style.setProperty yöntemini kullanırız.

import { useEffect } from 'react';
import { useFontSizeScale } from './hooks/useFontSizeScale';

export const FontScalerProvider = ({ children }) => {
  const scale = useFontSizeScale();

  useEffect(() => {
    document.documentElement.style.setProperty('--scale-factor', scale.toString());
  }, [scale]);

  return 
{children}
;
};

Bu bileşen, ölçek değeri her değiştiğinde CSS kök değişkenini günceller. Böylece tüm uygulama, CSS'te tanımladığımız var(--scale-factor) değerini anlık olarak kullanır.

Dinamik Yazı Tipi Ölçeklendirme Yöntemleri Karşılaştırması

Aşağıdaki tablo, dinamik ölçeklendirme için kullanılan farklı yaklaşımların avantajlarını ve dezavantajlarını özetlemektedir.

Kullanıcı Tercihli Ölçeklendirme (Erişilebilirlik)

Sadece ekran boyutuna göre değil, kullanıcının uygulama içindeki "Yazı boyutunu artır" düğmesine basmasına göre de ölçeklendirme yapabiliriz. Bu, görme güçlüğü çeken kullanıcılar için kritik bir özelliktir.

const [userScale, setUserScale] = useState(1);

const increaseFont = () => setUserScale(prev => prev + 0.1);

return (
  Yazıyı Büyüt
);

Bu yaklaşım, React'in durum (state) yönetimini kullanarak kullanıcıya özelleştirilebilir bir deneyim sunar. userScale değerini yerel depolama (localStorage) ile kaydederek, kullanıcı sayfayı yenilediğinde de tercihini korumasını sağlayabilirsiniz.

Güvenlik Uyarısı: Kullanıcıdan alınan ölçek değerlerini doğrudan DOM'a enjekte ederken, değerin sayısal (numeric) olduğundan emin olun. Aksi takdirde, kötü niyetli kullanıcılar stil özelliklerine CSS enjeksiyonu yapmaya çalışabilir.

Yaygın Hatalar ve Debug İpuçları

Dinamik ölçeklendirici geliştirirken en sık karşılaşılan sorun, "layout shift" yani düzen kaymasıdır. Ölçek değiştiğinde metinlerin aniden büyümesi, sayfa düzenini bozabilir. Bunu önlemek için CSS'te transition özelliğini kullanın.

body {
  transition: font-size 0.3s ease-in-out;
}

Eğer ölçeklendirme çalışmıyorsa, tarayıcı konsolunda document.documentElement.style.getPropertyValue('--scale-factor') komutunu çalıştırarak değişkenin güncellenip güncellenmediğini kontrol edin.

Sıkça Sorulan Sorular

Dinamik ölçeklendirme SEO'yu etkiler mi?

Doğru uygulandığında SEO'yu olumlu etkiler. Google, mobil uyumlu ve erişilebilir siteleri daha üst sıralara taşır. Ancak aşırı büyük yazı tipleri kullanıcı deneyimini bozarsa "Core Web Vitals" puanınız düşebilir.

Neden CSS clamp() yerine React kullanmalıyım?

CSS clamp() statik kurallar için harikadır. Ancak kullanıcıya özel yazı boyutu seçeneği sunmak veya uygulama içi dinamik tema değişikliği yapmak istiyorsanız React state yönetimi daha esnektir.

Performans kaybı yaşar mıyım?

resize olayını (event) dinlerken debounce veya throttle tekniklerini kullanırsanız performans kaybı yaşamazsınız. Bu, fonksiyonun her milisaniyede değil, belirli aralıklarla çalışmasını sağlar.

Mobil cihazlarda yazı tipi nasıl olmalı?

Mobil cihazlarda temel yazı boyutu genellikle 16px olarak korunmalı, ancak satır yüksekliği (line-height) ve harf aralığı (letter-spacing) ekran genişliğine göre hafifçe artırılmalıdır.

Bu yöntem TypeScript ile nasıl kullanılır?

State tanımlarken useState(1) şeklinde tip belirterek hata payını sıfıra indirebilirsiniz.

İleri Seviye Optimizasyon: Ölçeklendirme Değerlerini Kalıcı Hale Getirme

Dinamik yazı tipi ölçeklendiricinizin kullanıcı deneyimini bir üst seviyeye taşıması için, kullanıcının yaptığı seçimleri tarayıcı kapansa dahi hatırlaması gerekir. Bu durum, localStorage API'si ile React useEffect kancasının uyumlu çalışmasıyla sağlanır. Aşağıdaki örnek, kullanıcının tercih ettiği ölçek katsayısını kalıcı olarak nasıl saklayabileceğinizi gösterir.

import { useState, useEffect } from 'react';

const usePersistentScale = (initialValue) => {
  const [scale, setScale] = useState(() => {
    const saved = localStorage.getItem('fontSizeScale');
    return saved ? parseFloat(saved) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem('fontSizeScale', scale.toString());
    document.documentElement.style.setProperty('--font-scale', scale);
  }, [scale]);

  return [scale, setScale];
};

Dinamik Ölçeklendirme İçin Birim Testi Stratejileri

Yazı tipi ölçeklendirme mantığınızın farklı ekran boyutlarında veya kullanıcı etkileşimlerinde beklendiği gibi çalışıp çalışmadığını doğrulamak için Jest ve React Testing Library kullanabilirsiniz. Özellikle document.documentElement üzerindeki CSS değişkenlerinin güncellenip güncellenmediğini kontrol etmek, uygulamanızın tutarlılığı için kritiktir.

Test Senaryosu: Ölçek Değişimi Kontrolü

Aşağıdaki test örneği, ölçeklendirici bileşenindeki bir butonun tetiklendiğinde CSS değişkeninin doğru güncellenip güncellenmediğini doğrular:

import { render, fireEvent } from '@testing-library/react';
import FontScaler from './FontScaler';

test('ölçek butonu tıklandığında CSS değişkeni güncellenir', () => {
  render();
  const button = screen.getByText(/Büyüt/i);
  
  fireEvent.click(button);
  
  const rootStyle = getComputedStyle(document.documentElement);
  expect(rootStyle.getPropertyValue('--font-scale')).toBe('1.2');
});

Performans ve Layout Shift (CLS) Önlemleri

Dinamik ölçeklendirme sırasında en büyük risk, yazı tipi boyutları değişirken sayfa düzeninin aniden kaymasıdır (Cumulative Layout Shift). Bu durumu engellemek için CSS tarafında will-change ve transition özelliklerini stratejik kullanmalısınız.

• CSS Geçişleri: body { transition: font-size 0.2s ease-in-out; } kullanarak boyut değişimlerini yumuşatın.
• Font-Display: Google Fonts veya yerel fontlar kullanırken font-display: swap; kullanarak yazı tipi yüklenirken metnin görünür kalmasını sağlayın.
• Minimum/Maksimum Sınırlar: Ölçeklendiriciyi asla sınırsız bırakmayın. Math.min(Math.max(val, 0.8), 2.0) gibi bir mantıkla kullanıcıyı tasarımın dışına çıkmaktan koruyun.

Profesyonel İpucu: Eğer uygulamanızda çok sayıda karmaşık bileşen varsa, ölçeklendirme değerini bir React Context içerisine alarak, prop drilling (prop geçirme) zahmetinden kurtulabilir ve tüm uygulama ağacının aynı ölçek değerini dinlemesini sağlayabilirsiniz.

Sonuç

React ile dinamik bir yazı tipi ölçeklendirici oluşturmak, uygulamanızın erişilebilirliğini ve profesyonelliğini bir üst seviyeye taşır. CSS değişkenlerinin gücü ile React'in durum yönetimini birleştirerek, kullanıcıya özel ve ekran boyutuna duyarlı bir tipografi yapısı kurmuş oldunuz. Bir sonraki adım olarak, bu ölçeklendirme mantığını bir "Tema Sağlayıcı" (Theme Provider) içerisine entegre ederek, yazı tipi boyutunun yanı sıra renk paletlerini de dinamik olarak değiştirebilirsiniz.

Not: Bu kodlar eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce, ölçekleme değerlerinin uç değerlerini (min/max) sınırlandırarak tasarımın bozulmasını engelleyen koruyucu mantıklar eklemeyi unutmayın.