NO. 1101
برنامه‌نویسی و طراحی وب رابط و تجربه کاربری

فونت

Font / Typeface

فونت فایل یا منبعی است که شکل قابل نمایش حروف، اعداد و نشانه‌ها را همراه با اطلاعاتی مثل وزن، فاصله‌گذاری و جایگزین‌های نگارشی در اختیار نرم‌افزار می‌گذارد. در گفت‌وگوی روزمره فونت و تایپ‌فیس یکی گرفته می‌شوند، اما از نظر تخصصی دقیقاً یک چیز نیستند.

فونت، تایپ‌فیس و گلیف چه فرقی دارند؟

تایپ‌فیس طراحی کلی یک خانوادهٔ حروف است؛ شخصیت بصری‌ای که در همهٔ وزن‌ها و سبک‌ها مشترک می‌ماند. فونت پیاده‌سازی قابل استفادهٔ آن طراحی است؛ مثلاً فایل وزن ۷۰۰ یک خانواده. گلیف هم شکل مشخصی است که برای نمایش یک نویسه یا ترکیب نویسه‌ها انتخاب می‌شود.

در چاپ فلزی، این تمایز ملموس بود: تایپ‌فیس طرح بود و هر مجموعهٔ سربی با اندازه و وزن مشخص یک فونت به شمار می‌رفت. فایل‌های دیجیتال و به‌ویژه فونت متغیر مرز را نرم‌تر کرده‌اند؛ یک فایل می‌تواند صدها مقدار وزن یا عرض را در خود نگه دارد. به همین دلیل در زبان عمومی، گفتن «فونت وزیرمتن» کاملاً قابل فهم است، حتی اگر طراح حروف اصطلاح «خانوادهٔ قلم» را دقیق‌تر بداند.

فونت فقط تصویر حروف نیست

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

در فونت فارسی چه چیزهایی را باید آزمایش کرد؟

اسکرین‌شات یک تیتر برای انتخاب فونت کافی نیست. متن فارسی به اتصال حروف، جایگاه نقطه‌ها و هماهنگی با اعداد و لاتین حساس است. یک نمونهٔ واقعی شامل این موارد بسازید:

  • ی و ک فارسی: پوشش درست «ی» و «ک» فارسی و رفتار قابل قبول در متنی که نویسه‌های عربی وارد آن شده‌اند.
  • اعداد: ارقام فارسی، لاتین، جداکنندهٔ هزارگان، درصد و قیمت را کنار هم ببینید.
  • ترکیب فارسی و انگلیسی: نام محصول، URL، ایمیل و اصطلاح فنی را در جملهٔ راست‌به‌چپ آزمایش کنید.
  • وزن‌های میانی: تفاوت ۴۰۰، ۵۰۰ و ۷۰۰ باید واقعی باشد؛ نه اینکه مرورگر وزن مصنوعی بسازد.
  • اندازهٔ متن: قلمی که در تیتر زیباست ممکن است در ۱۴ یا ۱۶ پیکسل خوانایی ضعیفی داشته باشد.
  • نشانه‌ها: پرانتز، دونقطه، گیومه، ممیز و نیم‌فاصله را فراموش نکنید.

برای رابط کاربری، ارتفاع سطر و پهنای متوسط حروف به اندازهٔ زیبایی مهم‌اند. فونت بسیار عریض در دکمه و جدول جا کم می‌آورد؛ فونت بسیار فشرده در متن بلند خسته‌کننده می‌شود. انتخاب باید روی محتوای واقعی محصول انجام شود.

فونت وب چگونه به صفحه می‌رسد؟

در وب، مرورگر با قانون @font-face منبع فونت را می‌شناسد و سپس از طریق font-family، وزن و سبک مناسب را انتخاب می‌کند. مشخصات CSS Fonts در W3C توضیح می‌دهد که خانوادهٔ فونت فهرستی اولویت‌دار است؛ مرورگر تا رسیدن به منبعی که گلیف لازم را دارد پیش می‌رود.

@font-face {
  font-family: "Example Persian";
  src: url("/fonts/example.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
body { font-family: "Example Persian", system-ui, sans-serif; }

فرمت WOFF2 برای تحویل وب فشرده و رایج است. فقط وزن‌هایی را بارگذاری کنید که واقعاً استفاده می‌شوند یا از فایل متغیر بهینه بهره ببرید. برای متن بالای صفحه، پیش‌بارگذاری سنجیده می‌تواند مفید باشد؛ اما preload کردن چند فایل بلااستفاده رقابت شبکه ایجاد می‌کند.

font-display: swap اجازه می‌دهد متن ابتدا با فونت جایگزین دیده شود و پس از دریافت فایل تغییر کند. برای کاهش پرش چیدمان، فونت جایگزین را از نظر ارتفاع و پهنا نزدیک انتخاب کنید و نسخهٔ نهایی را روی شبکهٔ کند هم آزمایش کنید.

مجوز فونت را از خود فایل جدا نبینید

دانلودشدن یک فونت از اینترنت به معنی اجازهٔ استفادهٔ تجاری یا میزبانی روی وب نیست. مجوز ممکن است استفادهٔ دسکتاپ، وب، اپلیکیشن، پخش ویدئو یا قراردادن در قالب قابل فروش را جدا حساب کند. پیش از انتشار، نام صاحب اثر، نوع مجوز، تعداد بازدید یا کاربران مجاز و حق تغییر فایل را بررسی کنید.

فونت‌های دارای SIL Open Font License برای استفاده در طراحی، وب و حتی بسته‌بندی در نرم‌افزار آزادی زیادی می‌دهند، اما هنگام تغییر و بازتوزیع فایل شروطی دارند. راهنمای رسمی نحوهٔ استفاده از OFL میان «استفاده از فونت» و «تغییر و توزیع خود فایل فونت» تمایز می‌گذارد. متن مجوز را همراه دارایی پروژه نگه دارید.

خطر رایج در پروژه‌های مشتری

داشتن مجوز دسکتاپ توسط طراح الزاماً به مشتری اجازه نمی‌دهد فایل فونت را روی سرور خود منتشر کند. مشخص کنید مجوز به چه شخص یا شرکتی تعلق دارد و تحویل فایل در قرارداد پروژه مجاز است یا نه.

برای مفهوم کلی حق استفاده از نرم‌افزار، مدخل لایسنس نرم‌افزار را ببینید.

چک‌لیست انتخاب فونت برای محصول فارسی

  1. لحن برند و نقش متن را تعریف کنید: مطالعهٔ طولانی، داشبورد، فروشگاه یا تیتر تبلیغاتی.
  2. پوشش فارسی، لاتین، اعداد و نشانه‌های مورد نیاز را با دادهٔ واقعی بسنجید.
  3. خوانایی را روی موبایل کوچک، نمایشگر کم‌کیفیت و حالت بزرگ‌نمایی آزمایش کنید.
  4. تعداد فایل‌ها، حجم WOFF2 و اثر آن بر نمایش نخست را اندازه بگیرید.
  5. وزن‌های واقعی و رفتار bold مصنوعی را بررسی کنید.
  6. fallback را طوری انتخاب کنید که هنگام بارگذاری، چیدمان کمتر جابه‌جا شود.
  7. متن مجوز و منبع دریافت را در مخزن پروژه ثبت کنید.

فونت خوب فونتی نیست که بیش از همه جلب توجه کند؛ فونتی است که سلسله‌مراتب را روشن، خواندن را آسان و هویت محصول را منسجم کند.

پرسش‌های متداول دربارهٔ فونت

آیا فونت و تایپ‌فیس یک معنی دارند؟

در استفادهٔ روزمره تقریباً بله. در بیان تخصصی، تایپ‌فیس طراحی خانواده است و فونت نمونه یا فایل قابل استفاده با وزن، سبک یا محورهای مشخص. در فونت‌های متغیر یک فایل می‌تواند چندین حالت را پوشش دهد.

بهترین فرمت فونت برای وب چیست؟

برای مرورگرهای امروزی معمولاً WOFF2 انتخاب اصلی است، چون برای وب فشرده شده و پشتیبانی گسترده دارد. تصمیم نهایی باید با نیاز مرورگرهای هدف و مجوز فونت هماهنگ باشد.

آیا هر فونت رایگانی برای استفادهٔ تجاری آزاد است؟

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