Tipografi ölçek hesaplayıcı
Tutarlı bir başlık hiyerarşisi oluşturun.
Bir temel yazı boyutu girin ve H1'den küçük metne kadar tam bir modüler ölçek üreten bir ölçek oranı seçin; eşleşen CSS parçacığıyla birlikte.
1.250
h1The quick brown fox39.06pxh2The quick brown fox31.25pxh3The quick brown fox25.00pxh4The quick brown fox20.00pxh5The quick brown fox16.00pxpThe quick brown fox16.00pxsmallThe quick brown fox12.80px:root {
--font-base: 16px;
--type-scale: 1.25;
}
h1 {
font-size: 39.06px;
}
h2 {
font-size: 31.25px;
}
h3 {
font-size: 25.00px;
}
h4 {
font-size: 20.00px;
}
h5 {
font-size: 16.00px;
}
p {
font-size: 16.00px;
}
small {
font-size: 12.80px;
}Tipografi ölçeği nasıl oluşturulur
- Temel yazı boyutunuzu piksel cinsinden girin.
- Bir ölçek oranı seçin veya kendinizinkini belirlemek için Özel'ü seçin.
- Her başlık düzeyi için üretilen boyutları inceleyin.
- CSS değişkenlerini ve kurallarını stil dosyanıza kopyalayın.
Sıkça sorulan sorular
Hangi oranı seçmeliyim?
1,125 ve 1,2 ince ölçekler verir; 1,333 ve 1,618 daha fazla kontrast yaratır. Çoğu site için 1,2 ile 1,25 arasında kullanın.
H1 önizlemesi neden sınırlandırılmış?
Çok büyük boyutlar yalnızca önizlemede sınırlandırılır; CSS çıktısı tam hesaplanan değeri korur.
Bunu rem birimleriyle kullanabilir miyim?
Evet. Piksel değerlerini kök yazı boyutunuza bölün veya üretilen CSS'te px yerine rem yazın.