محول حجم الخط

Unit	Value	Notes
px	16	absolute pixels
rem	1	base 16px
em	1	parent 16px
pt	12	at 96 dpi
vw	1.1111	viewport 1440px wide
vh	1.7778	viewport 900px tall
%	100	parent 16px

Unit

Value

Notes

absolute pixels

rem

base 16px

parent 16px

at 96 dpi

1.1111

viewport 1440px wide

1.7778

viewport 900px tall

100

parent 16px

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

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

وحدات CSS

px - بكسل مطلق (16px = افتراضي body)
rem - نسبي للجذر (1rem = 16px)
em - نسبي للأم
% - نسبة من الأم
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. تواصل التسلسل البصري.