Tipografi Ölçeği Oluşturucu

Tipografi Ölçeği Oluşturucu nedir?

Tipografi Ölçeği Oluşturucu, bir taban boyutu ve bir modüler oranı, ihtiyacınız olduğu kadar daha büyük başlık adımı ve daha küçük açıklama adımı içeren eksiksiz, matematiksel olarak tutarlı bir tip ölçeğine dönüştürür. Ham yazı tipi boyutlarının ötesinde, her adım için uyumlu bir satır yüksekliği ve harf aralığı türetir; ayrıca ayrı bir mobil oran kullanarak bir mobil ile bir masaüstü görünüm alanı arasında ara değer bulan isteğe bağlı bir akışkan clamp() ifadesi de üretir. Tasarımcılar ve front-end geliştiricileri bunu bir tasarım sisteminin tip token'larını kurmak, boyutları tutarlı tutmak ve kullanıma hazır CSS, Sass, Tailwind veya JSON yapıştırmak için kullanır. Herhangi bir özel oran girin ya da klasik birini seçin, taban boyutu ve birimi (px veya rem) belirleyin, kendi font-family'nizle önizleyin, ardından ihtiyacınız olan biçimi kopyalayın.

Tipografi Ölçeği Oluşturucu nasıl kullanılır

1. Oran alanına herhangi bir özel oran girin ya da ayarlardaki ön ayar açılır menüsünden Tam Dörtlü (1.333) gibi klasik birini seçin.
2. Taban boyutu belirleyin; bu, gövde metni boyutu ve ölçeğin çapası olur.
3. Ayarlarda kaç tane daha büyük ve daha küçük adım üretileceğini seçin; daha küçük adımlar açıklamalar ve küçük yazılar için tabanın altında yer alır.
4. Taban ve sıkı satır yüksekliğini ve büyük boyutlardaki harf aralığını ayarlayın ve ölçeği kendi yazınızla önizlemek için bir font-family girin.
5. Duyarlı tipografi için minimum ve maksimum görünüm alanı genişliklerini ve bir mobil oranı belirleyerek akışkan bir clamp() ölçeği kurun.
6. Çıktı biçimini CSS değişkenleri, akışkan clamp(), Sass, Tailwind yapılandırması ve JSON arasında değiştirin, ardından kodu veya tek bir adımın boyutunu kopyalayın.

Örnekler

oran 1.333, taban 16px, 5 yukarı / 1 aşağı

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

taban 16px, oran 1.333, mobil oran 1.2, 320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

herhangi bir ölçek, Tailwind dışa aktarımı

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

Sıkça sorulan sorular

Yalnızca ön ayarları değil, özel bir oran kullanabilir miyim?

Evet. Oran alanına 1.2, 1.5, 1.618 gibi ya da 1.45 gibi standart olmayan bir değer gibi herhangi bir sayı girin. Ayarlardaki ön ayar açılır menüsü yalnızca aynı alanı dolduran bir kısayoldur ve bir ön ayarla eşleşmeyen bir değer seçmek yalnızca Özel gösterir.

Daha küçük (negatif) adımlar nasıl çalışır?

Ölçek taban boyuta (adım 0) çapalanır. Daha büyük adımlar tabanı oranla çarpar, daha küçükler ise böler; böylece tabanın altında sm ve xs gibi açıklama ve küçük yazı boyutları üretilir. Kaç tane daha büyük ve daha küçük adım istediğinizi ayarlardan belirleyin.

Satır yüksekliği ve harf aralığı nasıl hesaplanır?

Satır yüksekliği, gövde boyutundaki taban değerinizden metin büyüdükçe daha sıkı bir değere doğru geçer; harf aralığı ise tabandaki sıfırdan büyük boyut değerinize doğru geçer, böylece büyük gösterim metni biraz daha sıkı, küçük metin biraz daha geniş olur. Her iki eğri de ayarlardan ayarlanabilir.

Akışkan clamp() ölçeği nedir?

Her adım için, maksimum genişlikte ana oranınızı ve minimum genişlikte ayrı bir mobil oranı kullanarak minimum ve maksimum görünüm alanı genişliği arasında yumuşakça büyüyen bir font-size: clamp() oluşturur. Dışa aktarmak için çıktı biçimi olarak CSS clamp() seçin.

Verilerimden herhangi biri bir sunucuya gönderiliyor mu?

Hayır. Boyutlar, satır yüksekliği, harf aralığı ve akışkan clamp() değerleri dahil tüm ölçek, basit aritmetikle tarayıcınızda yerel olarak hesaplanır. Hiçbir şey yüklenmez, böylece araç çevrimdışı çalışır ve ayarlarınızı gizli tutar.