مولد السلم الطباعي (Type Scale)
أنشئ سلمًا طباعيًا معياريًا من حجم أساسي ونسبة — معاينة حية، جدول px/rem، ومتغيرات CSS جاهزة للنسخ.
599 مشاهدة
لماذا السلم المعياري؟
بدلاً من اختيار أحجام العناوين بالعين، يضرب السلم المعياري الحجم الأساسي في نسبة ثابتة عند كل خطوة: حجم أساسي 16 بكسل بنسبة 1.25 (الثالثة الكبرى) يعطي 20، 25، 31.3، 39.1، 48.8... ترتبط الأحجام ببعضها بعلاقات موسيقية، ويبقى التسلسل الهرمي بأكمله متسقًا — غيّر الأساس أو النسبة فتُعاد ضبط كل شيء معًا.
النسب الشائعة: 1.125 (الثانية الكبرى — واجهات كثيفة)، 1.25 (الثالثة الكبرى — الخيار الآمن الافتراضي)، 1.333 (الرابعة التامة — تحريري)، 1.618 (النسبة الذهبية — درامية، تحتاج مستويات قليلة). متغيرات CSS المخصصة الناتجة تُلصق مباشرة في ورقة الأنماط؛ قيم rem تفترض جذرًا بحجم 16 بكسل.
الأسئلة الشائعة
أي نسبة يجب أن أختار؟
عادةً ما تقع أعمال المنتج/الواجهة بين 1.125 و1.25 (العناوين ليست أكبر بكثير من النص الأساسي)؛ بينما تتحمل صفحات التسويق والتحرير 1.333-1.618 جيدًا. إذا بدا العنوان h1 صاخبًا، اخفض النسبة درجة واحدة بدلاً من ضبط حجم واحد يدويًا.
لماذا ينزل السلم تحت الأساس أيضًا؟
الخطوات السالبة (الأساس ÷ النسبة) تمنح تعليقات توضيحية ونصوصًا صغيرة تنتمي إلى النظام نفسه — 12.8 بكسل في سلم 16/1.25 بدلاً من رقم عشوائي مثل 13.
هل أستخدم px أم rem؟
استخدم rem في CSS: المستخدمون الذين يكبّرون حجم خط المتصفح يحصلون على سلم أكبر تناسبيًا. عمود px مخصص لنماذج أدوات التصميم.
أدوات مشابهة
الإبلاغ عن مشكلة
مولد السلم الطباعي (Type Scale)