Tipografi ölçeği deneme alanı
Bir modüler tipografi ölçeği ayarlanabilir temel boyut, oran, font ve çizgi yüksekliği ile. İhracat İhracatı CSS Vücut metinleri ve altı başlık seviyesi için boyutlarda.
Typography CSS
:root {
--type-font: "Inter", sans-serif;
--type-line-height: 1.5;
--type-small: 12.8px;
--type-body: 16px;
--type-h6: 20px;
--type-h5: 25px;
--type-h4: 31.25px;
--type-h3: 39.06px;
--type-h2: 48.83px;
--type-h1: 61.04px;
}
body { font-family: var(--type-font); font-size: var(--type-body); line-height: var(--type-line-height); }
h1 { font-size: var(--type-h1); line-height: 1.15; }
h2 { font-size: var(--type-h2); line-height: 1.15; }
h3 { font-size: var(--type-h3); line-height: 1.15; }
h4 { font-size: var(--type-h4); line-height: 1.15; }
h5 { font-size: var(--type-h5); line-height: 1.15; }
h6 { font-size: var(--type-h6); line-height: 1.15; }Dışa aktarılan metin İngilizce kalır; girdileriniz olduğu gibi korunur.
No signup. Hiçbir AI kredisi yok. Bu araç tarayıcınızda çıktınızı birleştirir.
Bir fikirden faydalı bir şey için.
- 01
Bir font, temel boyut ve modüler oran seçin.
- 02
Inspect başlıkları ve paragraf spacing.
- 03
Download Download Download Download CSS Mevcut ölçek için değişkenler.
Küçük bir bağlam.
Bir modüler ölçek, tekrarlanan bir oran tarafından bir temel font büyüklüğüne sahiptir. Bu oyun alanı altı seviyeli bir başlık hiyerarşisi artı vücut ve küçük bir metin hesaplar. Boyutlar bir başlangıç noktası için açık piksel değerleridir; Onlara üretimde kullanmadan önce cevap veren davranışları ve zoom.
İyi sorular.
«Muhteme, CSS Seçilmiş fontu yükler mi?
Hayır. Bu, font ve malzemeleri geri döndürür. Uygulamanızda seçilmiş font veya kendi kendini canlı.
Bu boyutlarda duyarlı mı?
İhracat sabit boyutlar içeriyor. Gerçek içeriği test ettikten sonra mola noktalarınıza veya sıvı tipi sisteminize uyum sağlayın.