متمكن

ليكون موقعك مختلف

احجام الخطوط

الهدف من الدرس :

إذا لم تكن متأكدًا من أحجام الخطوط المناسبة لموقعك، فهذه الموارد ستكون ذات قيمة كبيرة لك.

مميزات هذا الأسلوب :

  • أحجام العناوين قابلة للتدرج من سطح المكتب إلى الجوال تلقائيًا، دون الحاجة لتعديلها يدويًا في وضع التابلت.

  • جميع القيم تستخدم وحدة REM، وهي أفضل من حيث قابلية الوصول (Accessibility).

  • يُفضل تعيينها من خلال إعدادات الخطوط العامة (Global Fonts) داخل Elementor.

  • يجب إدخال أكواد clamp() في خيار “الوحدة المخصصة” (Custom Unit) داخل Elementor.

⚠️ تنبيه مهم:
لا تضع هذه القيم مباشرة في عناصر H1 إلى H6 في إعدادات “الخطوط” ضمن إعدادات الموقع، لأن ذلك يؤثر سلبًا على تحسين محركات البحث (SEO) ويقيد عدد مستويات العناوين إلى 6 فقط.

طريقة التركيب :

📝 أحجام العناوين (Titles):

  • Title 1
    clamp(3rem, 2.5385rem + 2.0513vw, 4rem)

  • Title 2
    clamp(2.4rem, 2.1231rem + 1.2308vw, 3rem)

  • Title 3
    clamp(2.1rem, 1.9154rem + 0.8205vw, 2.5rem)

  • Title 4
    clamp(1.8rem, 1.7077rem + 0.4103vw, 2rem)

  • Title 5
    clamp(1.6rem, 1.5308rem + 0.3077vw, 1.75rem)

  • Title 6
    clamp(1.4rem, 1.3538rem + 0.2051vw, 1.5rem)

  • Title 7
    clamp(1.2rem, 1.1769rem + 0.1026vw, 1.25rem)

📝 النصوص الأخرى (Text Styles):

  • Subheading (العنوان الفرعي)
    1.2rem

  • Body (النص الأساسي)
    1rem

  • Body Bold (النص العريض)
    1rem

  • Body Big (النص الكبير)
    1.125rem

  • Body Small (النص الصغير)
    0.875rem