Tasarım / Tipografi

Yazı Boyutu Ölçeği Oluşturucu (CSS ve Tailwind için Modüler Ölçek)

1,25 veya altın oran gibi bir oran ve temel yazı boyutundan modüler yazı ölçeği oluşturun, her adımı kendi metninizle önizleyin ve boyutları rem veya px cinsinden CSS özel özellikleri ya da Tailwind fontSize yapılandırması olarak kopyalayın.

Yazı Boyutu Ölçeği Oluşturucu (CSS ve Tailwind için Modüler Ölçek): Her boyut, her adım için temel boyutun oranla bir kez çarpılmasıyla hesaplanır: 16 px ve büyük üçlü (1,25) kullanıldığında üstteki adımlar 20, 25, 31,25, 39,06 ve 48,83 px; alttaki adımlar ise 12,8 ve 10,24 px olur. Boyutlar px ve rem cinsinden listelenir ve xs'den 4xl'e kadar Tailwind'in metin boyutlarına benzer şekilde adlandırılır. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.

Kategori
Geliştirici araçları
Çalıştırma sayısı
Tarayıcınızda
Maliyet
Ücretsiz · kayıt gerekmez
Kullanılabilirlik
Kullanıma hazır
Yazı ölçeği oluşturucuYerel işleme

Tamamen tarayıcınızda çalışır

4xl48,83 px · 3.0518 remThe quick brown fox
3xl39,06 px · 2.4414 remThe quick brown fox
2xl31,25 px · 1.9531 remThe quick brown fox
xl25 px · 1.5625 remThe quick brown fox
lg20 px · 1.25 remThe quick brown fox
base16 px · 1 remThe quick brown fox
sm12,8 px · 0.8 remThe quick brown fox
xs10,24 px · 0.64 remThe quick brown fox
:root {
  --step-5: 3.0518rem;
  --step-4: 2.4414rem;
  --step-3: 1.9531rem;
  --step-2: 1.5625rem;
  --step-1: 1.25rem;
  --step-0: 1rem;
  --step--1: 0.8rem;
  --step--2: 0.64rem;
}

Her adım, kendisinden bir önceki boyutun oranla çarpılmasıyla elde edilir: 16 px temel boyut ve 1,25 oranla üstteki boyutlar 20, 25 ve 31,25 px, alttakiler ise 12,8 ve 10,24 px olur. 1,125 gibi küçük oranlar yoğun arayüzlere, 1,5 gibi daha büyük oranlar ise başlıklara daha fazla kontrast kazandırır. rem değerleri, tarayıcının varsayılan kök boyutunun 16 px olduğunu varsayar.

Oran adlarının kaynağı

Adlar müzik aralıklarından gelir: tam beşli, 3 : 2 frekans oranıdır. Bu nedenle 1,5 üzerine kurulu bir yazı ölçeği, beşli aralıkla ayrılan notalarla aynı oranda büyür. Tim Brown'ın modüler ölçeği bu fikri web için yaygınlaştırdı.

Altın oran olan 1,618, çok büyük sıçramalar oluşturur; bu oran altın oran hesaplayıcısında açıklanır.

Yuvarlama

Tarayıcılar kesirli piksel boyutlarını işler; bu nedenle 31,25 px olduğu gibi kullanılabilir. Bir tasarım sisteminde tam piksel değerleri gerekiyorsa her adımı yuvarlayın ve araçta olduğu gibi rem değerlerini dört ondalık basamakla tutun; diğer değerleri px to rem dönüştürücüyle dönüştürün.

Nasıl kullanılır?

  1. Temel boyutu girin ve bir oran seçin.
  2. Yukarı ve aşağı kaç adım gösterileceğini belirleyin, ardından bu adımları metninizle önizleyin.
  3. CSS değişkenlerini veya Tailwind yapılandırmasını kopyalayın.

Gizlilik ve sınırlamalar

Her şey tarayıcıda çalışır.

İlgili araçlar

CSS clamp()CSS Birim DönüştürücüAltın Oran

Sık sorulan sorular

Hangi oranı kullanmalıyım?

Çok metin içeren arayüzler ve küçük ekranlar için 1,125 veya 1,2 gibi daha yumuşak oranlar uygundur; editoryal sayfalarda ve açılış sayfalarında daha belirgin başlıklar için 1,333 ile 1,618 arasındaki oranlar kullanılabilir.

Neden rem kullanmalıyım?

rem boyutları, okuyucunun tarayıcı yazı boyutu ayarını izler; böylece daha büyük metne ihtiyaç duyan kişiler için metin büyür. Dönüştürme, varsayılan 16 px kök boyutunu temel alır.

Boyutları akışkan hâle getirebilir miyim?

Evet: Bir adım için istediğiniz en küçük ve en büyük boyutu alın ve bunları CSS clamp oluşturucuyla bir clamp() ifadesine dönüştürün.

Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez