Stax

محول حجم الخط

تحويل أحجام خطوط CSS بين px وrem وem وpt وvw.

UnitValueNotes
px16absolute pixels
rem1base 16px
em1parent 16px
pt12at 96 dpi
vw1.1111viewport 1440px wide
vh1.7778viewport 900px tall
%100parent 16px

Click any row to use that unit as the new input.

Settings (base font size, viewport, parent)
px
px
px
px

ما هو محول حجم الخط؟

أداة لتحويل بين وحدات حجم الخط: px، em، rem، pt، %. أساسي لمصممي الويب، مطوري CSS، مصممي الطباعة. كل وحدة لها استخدام: px للدقة، rem للتجاوب، pt للطباعة.

وحدات CSS

  1. px - بكسل مطلق (16px = افتراضي body)
  2. rem - نسبي للجذر (1rem = 16px)
  3. em - نسبي للأم
  4. % - نسبة من الأم
  5. pt - للطباعة (1pt = 1.333px)

متى تستخدم كل وحدة

  • rem - الأفضل للنص (متجاوب)
  • px - للحدود، الظلال، التفاصيل
  • em - للتباعد داخل المكون
  • % - للعرض المرن
  • pt - فقط للطباعة (CSS @media print)

أحجام موصى بها

Body: 16-18px (1-1.125rem). H1: 32-48px. H2: 24-32px. H3: 20-24px. Captions: 14px. Mobile body: ≥16px (تجنب iOS auto-zoom). نسب: H1 = 2x body. استخدم clamp() للنص السائل: font-size: clamp(1rem, 2.5vw, 1.5rem).

الأسئلة الشائعة

ما الوحدات لحجم الخط في CSS؟
px: مطلق، ثابت. em: نسبي للأم. rem: نسبي للجذر (16px افتراضياً). %: نسبي للأم. pt: للطباعة (1pt = 1.333px). vh/vw: نسبة من الشاشة. الأفضل للويب: rem (متجاوب، يحترم تفضيلات المستخدم).
متى أستخدم rem vs px؟
rem: للنص، التباعد، التخطيط (يقاس). يستجيب لإعدادات المستخدم. px: للحدود، الظلال، التفاصيل الدقيقة (لا تقاس). كل شيء كنص = rem. تأكيد: 1rem = 16px افتراضياً. مستخدم زاد 200% = نصك يكبر، حدودك ثابتة.
ما الحجم المناسب للنص؟
Body: 16-18px (1-1.125rem). Headings: H1 32-48px، H2 24-32px، H3 20-24px. Mobile: ≥16px لتجنب zoom في iOS. Captions: 14px (0.875rem). تجنب <12px (صعب القراءة). فحص بـ DevTools - mobile preview.
كيف أصمم تجاوبياً؟
fluid typography بـ clamp(): font-size: clamp(1rem, 2.5vw, 1.5rem). يتغير بسلاسة بين الأحجام. أو media queries لنقاط محددة. تجنب px ثابت - مشكلة على شاشات كبيرة/صغيرة. حافظ على نسب: H1 = 2x body. تواصل التسلسل البصري.

أدوات ذات صلة