اندازه فونت (Font Size)
«اندازه فونت (Font Size)» یعنی بزرگی متن. طراح با آن خوانایی را تنظیم می کند. لطفا برای تیترها از تگ های h1 تا h6 استفاده کنید. سپس با CSS فقط اندازه را ریزتنظیم کنید.
چیست و چرا مهم است؟
ویژگی font-size اندازه متن را تعیین می کند. اندازه درست، خوانایی را بهتر می کند. تیتر را با تگ درست بسازید؛ با اندازه، تگ را جعل نکنید.
واحدهای مطلق و نسبی
واحد مطلق مثل px دقیق است. اما مقیاس پذیری کم دارد. واحد نسبی مثل em، rem و % با والد یا ریشه تغییر می کند. بنابراین دسترسی پذیرتر است.
تنظیم با پیکسل (px)
px کنترل دقیق می دهد؛ اما در صفحه نمایش های متفاوت، انعطاف کمتر است. با این حال، کاربر می تواند کل صفحه را بزرگ نمایی کند.
نمونه: h1، h2 و p با px
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 16px;
}
تنظیم با em
em نسبت به اندازه فونتِ والد است. اگر والد 16px باشد، 2em یعنی 32px. بنابراین با تغییر والد، همه چیز مقیاس می شود.
نمونه: محاسبه معادل px با em
body {
font-size: 16px;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 1em;
}
تنظیم با rem
rem نسبت به عنصر ریشه <html> است. این یعنی هرجا باشید، از ریشه حساب می شود. برای طراحی واکنش گرا عالی است.
نمونه: ریشه 16px و مقادیر rem
html {
font-size: 16px;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.875rem;
}
p {
font-size: 1rem;
}
واحد vw برای تیترهای سیال
vw یعنی درصدی از عرض پنجره. پس با تغییر عرض، متن هم تغییر می کند. برای تیترهای پویا مفید است.
نمونه: تیتر و متن بر پایه vw
h1 {
font-size: 10vw;
}
p {
font-size: 5vw;
}
نکته: برای زنجیره امن، از جایگزین های فونت کمک بگیرید. برای انتخاب های آماده، فونت های وب سیف مفید است. همچنین صفحه اندازه فونت را مرجع قرار دهید.
گام های عملی سریع
- تگ درست را برای تیتر انتخاب کنید.
- واحد مناسب نیاز خود را برگزینید.
- پایه ریشه یا والد را مشخص کنید.
- در موبایل و دسکتاپ تست کنید.
جمع بندی سریع
- px دقیق است، اما کمتر مقیاس پذیر.
- em به والد وابسته است.
- rem به ریشه وابسته است.
- vw با عرض پنجره تغییر می کند.
- تیتر را با تگ بسازید؛ نه با اندازه.