Tip Ölçeği

Tasarımınız için modüler bir tip ölçeği oluşturun. Mükemmel orantılı başlık boyutları için temel boyut ve oran seçin.

px
Scale PreviewPreview capped at 72px - CSS below ↓
h1
-
The quick brown fox
h2
-
The quick brown fox
h3
-
The quick brown fox
h4
-
The quick brown fox
h5
-
The quick brown fox
h6
-
The quick brown fox
body
-
The quick brown fox
small
-
The quick brown fox
Generated CSS

Modüler tip ölçeği nedir?

Modüler tip ölçeği, Major Third (1,25x) veya Perfect Fourth (1,333x) gibi tutarlı bir matematiksel oranı izleyen yazı tipi boyutları kümesidir. h1'den h6'ya kadar her başlık orantılı olarak bir üsttekinden büyüktür, uyumlu ve görsel açıdan dengeli tipografi oluşturur.

Doğru oranı nasıl seçersiniz

Minor Second (1,067) gibi küçük oranlar yoğun arayüzler için kompakt ölçekler oluşturur. Perfect Fourth (1,333) veya Altın Oran (1,618) gibi büyük oranlar dramatik kontrastlar yaratır. Major Third (1,25) çoğu ekran boyutu için güvenli bir varsayılandır.

Oluşturulan CSS'i kullanmak

CSS paneli, :root'ta CSS özel özellikler (örn. --text-h1) ve her başlık düzeyi için doğrudan seçiciler çıkarır. Stil sayfanıza yapıştırın. Erişilebilir, ölçeklenebilir boyutlandırma için rem veya sabit boyutlar için px kullanın.

Tip ölçeği ve erişilebilirlik

px yerine rem kullanmak, tipografiyi kullanıcının sistem yazı tipi boyutu tercihiyle ölçeklendirir; bu önemli bir erişilebilirlik faktörüdür. WCAG, metnin %200'e kadar yeniden boyutlandırılabilmesini önerir. rem ile modüler ölçek bu gereksinimi otomatik olarak karşılar.