فونت و تایپوگرافی در CSS — مقدمه‌ای کاربردی

تایپوگرافی خوب بیش از انتخاب یک فونت زیبا است؛ ترکیبی از خوانایی، سازگاری، عملکرد و سازگاری با جهت نوشتار (RTL) است. در وب فارسی، انتخاب صحیح فونت و پیکربندی CSS می‌تواند تجربه کاربری را بسیار بهبود دهد و در عین حال سرعت بارگذاری را نیز کنترل کند.

اصول پایه‌ای انتخاب فونت

• خوانایی در متن‌های طولانی: اندازه، فاصله خطوط و طول خط (45–75 کاراکتر) را در نظر بگیرید.
• پشته فونت (font-family): فونت‌های پشتیبان را همیشه تعریف کنید تا هنگام بارگذاری یا در صورت نبود فونت دلخواه، جایگزین مناسبی داشته باشیم.
• پشتیبانی از حروف فارسی/عربی: اطمینان از کامل بودن گلیف‌ها و شکل‌گیری درست حروف در حالت RTL.
• عملکرد: از فونت‌های بهینه، فرمت‌های مناسب و بارگذاری پیش‌بار (preload) استفاده کنید تا CLS و FOUT/FOIT کنترل شود.

نمونه پشته فونت مناسب برای فارسی

body {
  font-family: "Vazirmatn", "Vazir", "Tahoma", "Helvetica", "Arial", sans-serif;
  direction: rtl;
  font-size: 16px;
  line-height: 1.6;
}

این کد یک پشته فونت رایج برای سایت‌های فارسی را نشان می‌دهد. ابتدا فونت وب مورد نظر قرار دارد، سپس فونت‌های سیستم و در نهایت generic sans-serif. همچنین direction: rtl تعیین شده تا مرورگر به‌درستی جهت متن را اعمال کند.

@font-face و نکات بهینه‌سازی

@font-face {
  font-family: "MyPersian";
  src: url("/fonts/MyPersian.woff2") format("woff2"),
       url("/fonts/MyPersian.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF;
}

در این مثال:

• font-display: swap باعث می‌شود تا متن با فونت پشتیبان نمایش یابد و پس از بارگذاری فونت اصلی جایگزین شود—کاهش FOIT.
• unicode-range به مرورگر می‌گوید این فایل فقط برای مجموعهٔ یونیکد عربی/فارسی مناسب است؛ در صورت استفاده از فونت جداگانه برای لاتین می‌توان فایل‌ها را تقسیم کرد تا حجم کاهش یابد.
• فرمت woff2 برای بیشتر مرورگرهای مدرن مناسب و فشرده‌تر است.

پیش‌بارگذاری فونت‌ها برای بهبود عملکرد

<link rel="preload" href="/fonts/MyPersian.woff2" as="font" type="font/woff2" crossorigin>

با استفاده از preload به مرورگر می‌گوییم که این فایل فونت اولویت دارد و باید سریع‌تر دانلود شود. دقت کنید که اگر فونت‌ها از سرور خارجی بارگذاری می‌شوند، باید مقدار crossorigin مناسب تنظیم شود.

تایپوگرافی ریسپانسیو

h1 {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
}

در این کد از تابع clamp() استفاده شده تا اندازهٔ فونت بین حداقل و حداکثر کنترل شود و در اندازه‌های مختلف صفحه به‌صورت پویا مقیاس‌بندی شود. این روش جایگزینی امن برای استفادهٔ صرف از واحدهای viewport است.

ویژگی‌های پیشرفته فونت

• font-variation-settings — برای کنترل ویژگی‌های فونت‌های متغیر (variable fonts).
• font-feature-settings و font-variant-numeric — برای فعال/غیرفعال‌کردن لیگاتورها، ارقام قدری/پوزیسیون و غیره.
• font-optical-sizing — استفادهٔ خودکار از سایز اپتیکال در فونت‌های پشتیبانی‌کننده.

نمونه: استفاده از فونت متغیر (Variable Font)

@font-face {
  font-family: "MyVariable";
  src: url("/fonts/MyVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
h2 {
  font-family: "MyVariable", sans-serif;
  font-weight: 300;
  font-variation-settings: "wght" 300;
}

فونت‌های متغیر اجازه می‌دهند وزن، عرض و سایر محورهای فونت را بدون بارگذاری چندین فایل تغییر دهید که به کاهش درخواست‌ها و حجم کلی کمک می‌کند.

دسترس‌پذیری و خوانایی

• کنتراست متن و پس‌زمینه را با استانداردهای WCAG بررسی کنید (حداقل نسبت 4.5:1 برای متن عادی).
• برای متن‌های بلند line-height را بین 1.4 تا 1.8 نگه دارید.
• فاصلهٔ مناسب بین کلمات و letter-spacing را برای حروف فارسی تنظیم کنید تا خوانایی افزایش یابد.

مشکلات رایج و راه‌حل‌ها

• FOIT (Flash of Invisible Text): استفاده از font-display: swap یا optional و preload برای کاهش آن.
• مشکل شکل‌گیری حروف در فارسی: از فونت‌هایی استفاده کنید که kerning و shaping مناسب داشته باشند و در صورت نیاز از :lang(fa) برای اعمال استایل اختصاصی بهره ببرید.
• حجم بالای فونت‌ها: تقسیم فونت بر اساس unicode-range یا استفاده از فرمت woff2 و فونت‌های متغیر.

پیشنهادات عملی و نکات پیشرفته

• برای سربرگ‌ها از وزن‌های سنگین‌تر و برای متن از وزن‌های سبک‌تر استفاده کنید تا هرم دیداری حفظ شود.
• از یک فونت اختصاصی برای لوگو یا برند استفاده کنید و برای متن‌های طولانی فونت خواناتری انتخاب کنید.
• از تست‌های سرعت (Lighthouse) و ابزارهای شبکه برای مشاهدهٔ زمان بارگذاری فونت استفاده کنید و بسته به نتیجه تصمیم به preload یا split کنید.
• در پروژه‌های چندزبانه، فونت‌ها را بر اساس زبان با unicode-range یا selector های :lang جدا کنید تا تنها گلیف‌های مورد نیاز بارگذاری شوند.

جدول مرجع سریع خواص مهم

جمع‌بندی سریع

تایپوگرافی در CSS ترکیبی از هنر و مهندسی است. با انتخاب فونت مناسب، تنظیم خواص CSS مرتبط، و بهینه‌سازی فرآیند بارگذاری می‌توانید تجربهٔ بهتر، ظاهر حرفه‌ای‌تر و عملکرد بهتری برای سایت‌های فارسی فراهم کنید. همواره تست در دستگاه‌ها و مرورگرهای مختلف را فراموش نکنید و برای پروژه‌های بزرگ‌تر از فونت‌های متغیر و تکنیک‌های تقسیم یونیکد بهره ببرید.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال