حاسبة سلّم الخطوط
ابنِ تسلسلًا متسقًا للعناوين.
أدخل حجم خط أساسي واختر نسبة سلّم لتحصل على سلّم تنافقي كامل من H1 إلى النص الصغير، مع مقتطف CSS مطابق.
1.250
h1الثعلب البني السريع39.06pxh2الثعلب البني السريع31.25pxh3الثعلب البني السريع25.00pxh4الثعلب البني السريع20.00pxh5الثعلب البني السريع16.00pxpالثعلب البني السريع16.00pxsmallالثعلب البني السريع12.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;
}كيفية بناء سلّم الخطوط
- أدخل حجم خطك الأساسي بالبكسل.
- اختر نسبة سلّم أو اختر "مخصص" لضبط قيمتك.
- راجع الأحجام المولّدة لكل مستوى عنوان.
- انسخ متغيرات CSS والقواعد إلى ملف أنماطك.
الأسئلة الشائعة
أي نسبة يجب أن أختار؟
1.125 و1.2 تعطي سلّمات دقيقة متقاربة؛ أما 1.333 و1.618 فتنشآن تباينًا أوضح. استخدم 1.2 إلى 1.25 لمعظم المواقع.
لماذا تم حجم H1 في المعاينة؟
الأحجام الكبيرة جدًا تُحدَّ في المعاينة لعرض الصورة فقط؛ أما مخرجات CSS فتحافظ على القيمة المحسوبة بدقة.
هل يمكن استخدامها مع وحدات rem؟
نعم. اقسم القيم البكسل على حجم خط الجذر، أو استبدل px بـ rem في CSS الناتج.