Typography در وب فقط انتخاب یک Font نیست. در CSS معمولا باید خانواده فونت، اندازه، وزن، ارتفاع خط و Style را کنار هم تنظیم کنید تا متن روی دستگاه‌ها و زبان‌های مختلف خوانا بماند.
font-family و Font Stack
body {
font-family: "Vazirmatn", Tahoma, sans-serif;
}مرورگر Fontها را به ترتیب بررسی می‌کند. اگر گزینه اول در دسترس نباشد سراغ گزینه بعدی می‌رود و در نهایت از خانواده عمومی مثل sans-serif استفاده می‌کند. اگر از Web Font استفاده می‌کنید، فایل آن باید قبل از استفاده به صفحه معرفی و بارگذاری شود.
ویژگی‌های اصلی Font
font-size: اندازه متن.font-weight: وزن متن مثل 400 یا 700.font-style: حالت‌هایی مثل normal یا italic.line-height: فاصله عمودی بین خطوط و یکی از عوامل اصلی خوانایی متن.
.article {
font-size: 1rem;
font-weight: 400;
line-height: 1.8;
}Shorthand ویژگی font
ویژگی font امکان نوشتن چند تنظیم مرتبط را در یک Declaration می‌دهد، اما استفاده از آن می‌تواند بعضی Sub-propertyها را Reset کند. اگر فقط یک ویژگی کوچک را تغییر می‌دهید، نوشتن Property مشخص معمولا خواناتر و کم‌ریسک‌تر است.
نکات Font برای فارسی
- Font باید Glyphهای فارسی کامل و خوانا داشته باشد.
- اندازه و line-height را با متن فارسی واقعی تست کنید؛ معیارهای مناسب برای Latin همیشه همان نتیجه را در فارسی نمی‌دهند.
- Weightهای موردنیاز را واقعا بارگذاری کنید تا مرورگر مجبور به ساخت وزن مصنوعی نشود.
- برای Performance فقط خانواده‌ها و Weightهایی را لود کنید که واقعا استفاده می‌شوند.
ویدیوی آموزش
مطالب مرتبط: text-align در CSS و Border در CSS
