İçeriğe geç
uxTools
Tasarım & CSS

Tipografi Ölçeği Üretici

Bir base boyut seç, ölçek oranı seç (Major Third, Perfect Fifth, Golden Ratio…) ve modüler tip ölçeği üret. Opsiyonel fluid mod, min/max viewport'a göre CSS clamp() üretir.

Ölçek

Bir taban boyut ve modüler oran seç; adımlar anında güncellenir.

px

Akıcı mod

CSS clamp() üret; her adım küçük ve büyük ekran boyutları arasında yumuşak geçiş yapsın.

Akıcı mod kapalı — her adım tek bir rem değeri kullanır. clamp() üretmek için aç.

Önizleme

Bu ayarlar sadece canlı önizlemeyi etkiler — üretilen CSS'i değiştirmez.

em

Canlı önizleme

Her adım hesaplanan boyutuyla görünür. Akıcı modda, ara değeri görmek için bir görüntü genişliği seç.

  1. 5xl61.04px
    The quick brown fox jumps over the lazy dog
  2. 4xl48.83px
    The quick brown fox jumps over the lazy dog
  3. 3xl39.06px
    The quick brown fox jumps over the lazy dog
  4. 2xl31.25px
    The quick brown fox jumps over the lazy dog
  5. xl25px
    The quick brown fox jumps over the lazy dog
  6. lg20px
    The quick brown fox jumps over the lazy dog
  7. base16px
    The quick brown fox jumps over the lazy dog
  8. sm12.8px
    The quick brown fox jumps over the lazy dog
  9. xs10.24px
    The quick brown fox jumps over the lazy dog
  10. 2xs8.19px
    The quick brown fox jumps over the lazy dog

Kod çıktısı

CSS custom property, utility sınıflar, Tailwind tema uzantısı, SCSS map, JSON veya W3C design tokens.

:root {
  --text-5xl: 3.8147rem;
  --text-5xl--line-height: 1.5;
  --text-4xl: 3.0518rem;
  --text-4xl--line-height: 1.5;
  --text-3xl: 2.4414rem;
  --text-3xl--line-height: 1.5;
  --text-2xl: 1.9531rem;
  --text-2xl--line-height: 1.5;
  --text-xl: 1.5625rem;
  --text-xl--line-height: 1.5;
  --text-lg: 1.25rem;
  --text-lg--line-height: 1.5;
  --text-base: 1rem;
  --text-base--line-height: 1.5;
  --text-sm: 0.8rem;
  --text-sm--line-height: 1.5;
  --text-xs: 0.64rem;
  --text-xs--line-height: 1.5;
  --text-2xs: 0.512rem;
  --text-2xs--line-height: 1.5;
}