DESIGN

مولد مقياس الخط المتدرج — نظام التيبوغرافيا

استخدام أحجام خطوط عشوائية يجعل التصميم غير متسق. استخدم مقياساً متدرجاً مبنياً على نسب رياضية لإنشاء نظام تيبوغرافيا احترافي.

ما هو المقياس المتدرج؟

هو حساب كل حجم بضرب حجم أساسي (عادةً 16px) في نسبة ثابتة.

النسب الشائعة

  • Minor Third (1.2): تسلسل هرمي ناعم ودقيق
  • Major Third (1.25): خيار متوازن
  • Perfect Fourth (1.333): تسلسل هرمي قوي، مناسب لمعظم الحالات
  • Golden Ratio (1.618): تسلسل هرمي دراماتيكي

مثال (أساس 16px، نسبة 1.25)

  • xs: 10.24px | sm: 12.8px | base: 16px
  • md: 20px | lg: 25px | xl: 31.25px

التطبيق بمتغيرات CSS

:root {
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.563rem;
  --text-xl: 1.953rem;
}