‏فونت‌های سایت‌های طراحی ۲۰۲۶: بیشترشون فقط یه فونت دارن

هر سال کلی مقاله با عنوان «بهترین ترکیب‌های فونت» منتشر می‌شه، ولی کسی چک نمی‌کنه طراح‌ها واقعاً از این ترکیب‌ها استفاده می‌کنن یا نه. نویسندهٔ این مقاله تو Muzli این کارو کرده: ۲۱۹۰ سایتی که از اول ژانویه تا ۲۰ اکتبر ۲۰۲۶ تو ۲۴ گالری طراحی مثل Awwwards و SiteInspire و Land-book معرفی شدن رو با headless Chrome (یعنی یه مرورگر واقعی بدون پنجره که با اسکریپت کنترل می‌شه) باز کرده و پرسیده هر خط متن واقعاً با کدوم فایل فونت کشیده می‌شه. این مهمه چون سایت‌ها اسم فونت‌ها رو تو CSS عوض می‌کنن، ولی مرورگر می‌دونه دقیقاً کدوم فونت رو رندر کرده.

نتیجهٔ اصلی اینه که ۶۰ درصد سایت‌ها برای تیتر و متن از یه خانواده فونت استفاده می‌کنن. تضاد بصری از فونت دوم اومده تو اندازه: تیتر معمولاً ۶۴ پیکسله روی متن ۱۶ پیکسلی، یعنی حدود چهار برابر. فونت‌های جدید هم خودشون تنوع دارن؛ مثلاً Inter یه optical size داره (یعنی شکل حروف تو اندازه‌های بزرگ خودش تیزتر و فشرده‌تر می‌شه) و variable fontها هر وزنی بین ۱۰۰ تا ۹۰۰ رو بهت می‌دن.

Inter با حضور روی ۱۳ درصد سایت‌ها اوله، بیشتر از سه برابر نفر دوم. یه دلیلش اینه که فونت پیش‌فرض Framerه و روی ۲۴ درصد سایت‌های Framer دیده شده. بعدش فونت‌های پولی grotesk (یعنی همون خانوادهٔ sans-serif ساده‌ای که Helvetica هم توشه) میان: PP Neue Montreal با ۳.۹ درصد، Neue Haas Grotesk با ۳ درصد و Suisse Int'l با ۲.۱ درصد. Geist از Vercel هم ۳.۵ درصده. جالبش اینه که Roboto و Open Sans و Montserrat که تو کل وب خیلی پرکاربردن، اینجا زیر یه درصدن.

وقتی طراح‌ها دو فونت رو با هم ترکیب می‌کنن، تقریباً هیچ‌کس از کس دیگه کپی نمی‌کنه: ۸۷۱ سایت دوفونتی، ۸۱۱ ترکیب متفاوت. ترکیب‌های کلاسیک مثل Montserrat با Lora صفر بار دیده شدن. به جای ترکیب ثابت، چند الگو تکرار می‌شه: سریف بزرگ روی Inter (حدود ۳۵ درصد ترکیب‌ها)، دو sans که یکی پرشخصیت و یکی ساده‌ست (۳۶ درصد)، و دو فونت از یه سازنده (۵ درصد). یه نکتهٔ دیگه: ۲۳ درصد سایت‌ها یه فونت mono (یعنی فونتی که همهٔ حروفش یه عرض دارن) برای برچسب‌ها و تاریخ‌ها اضافه می‌کنن که Geist Mono سرشونه.

تنظیمات رایج هم جالبه: تیترها بیشتر با وزن ۴۰۰ هستن نه bold، ۵۸ درصدشون فاصلهٔ حروفشون کمی تنگ‌تر شده و line height حدود ۱.۰ـه. متن ۱۶ پیکسله با line height بین ۱.۴ تا ۱.۵. نویسنده این تنظیمات رو برای Inter به صورت CSS گذاشته:

h1 {
  font-size: clamp(40px, 7vw, 64px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-optical-sizing: auto; /* big sizes get Inter Display */
}

این تنظیمات تیتر رو چهار برابر متن نگه می‌داره و optical size بزرگ Inter رو هم فعال می‌کنه. ۶۷ درصد فونت‌های تیتر این سایت‌ها پولی یا اختصاصی‌ان، ولی نویسنده جایگزین رایگان هم پیشنهاد می‌ده: Switzer یا Inter به جای PP Neue Montreal، Geist به جای ABC Diatype و Instrument Serif به جای PP Editorial New. توصیه‌ش اینه که فونت دوم پروژه‌ت رو حذف کنی، تیتر رو چهار برابر متن کنی و فقط اگه صفحه هنوز چیزی کم داشت، سراغ فونت دوم بری.

نکات کلیدی:

• ۶۰ درصد از ۲۱۹۰ سایت گالری‌های طراحی برای تیتر و متن فقط یه خانواده فونت دارن.
• Inter روی ۱۳ درصد سایت‌ها و ۲۴ درصد سایت‌های Framer استفاده شده.
• از ۸۷۱ سایت دوفونتی، ۸۱۱ ترکیب مختلف دیده شده و Montserrat با Lora صفر بار.
• ۲۳ درصد سایت‌ها یه فونت mono برای برچسب‌ها دارن و Geist Mono پرکاربردترینه.
• تیتر رایج: ۶۴ پیکسل، وزن ۴۰۰، کمی فاصلهٔ تنگ؛ متن: ۱۶ پیکسل با line height بین ۱.۴ تا ۱.۵.
• ۶۷ درصد فونت‌های تیتر پولی یا اختصاصی‌ان.