فونتهای متغیر: راهنمای کاری طراح برای ۲۰۲۶
آنچه variable fonts واقعاً انجام میدهند، چرا جایگزین خانوادههای فونت میشوند، با بررسی Inter، Recursive، Apple SF Pro، IBM Plex، و یک چارچوب انتخاب.
Variable fonts جایگزین ارسال شش فایل با ارسال یک فایل شد که شش کار انجام میدهد، و بیشتر تیمها هنوز این تعویض را انجام ندادهاند. این کل استدلال است. هر چیزی که در ادامه میآید اثبات آن است.
بارگذاری چهار فایل فونت استاتیک برای یک typeface برند در سال ۲۰۲۶ یعنی پرداخت مالیات performance و رها کردن محدوده طراحی روی میز. این راهنما مکانیزمها، چهار بررسی production، یک عدد performance واقعی، و یک چارچوب ششسوالی را پوشش میدهد که میتوانید از آن برای انتخاب و ارسال یک variable font تا دوشنبه استفاده کنید.
یک variable font واقعاً چیست
یک variable font یک فایل فونت منفرد است که یک فضای طراحی پیوسته را در یک یا چند محور رمزگذاری میکند. وزن آشناترین محور است: به جای ارسال یک فایل Regular به علاوه یک فایل Bold، یک فایل ارسال میکنید که میتواند هر وزنی از ۱۰۰ تا ۹۰۰ را رندر کند. طراحان تایپ میتوانند محورهای سفارشی فراتر از مجموعه استاندارد هم تعریف کنند، که اینجاست که چیزها جالب میشوند.
مشخصات OpenType variable font (OT 1.8، منتشر شده ۲۰۱۶) این را ممکن کرد. فایل فونت یک master پیشفرض و مقادیر delta برای هر endpoint محور را ذخیره میکند. موتور rendering interpolate میکند. طراح، یا CSS، مقدار دقیق را در زمان اجرا تنظیم میکند.
پنج محور ثبتشده استاندارد:
- وزن (
wght): از نازک تا سیاه، آشناترین محور - عرض (
wdth): از فشرده تا گسترده - زاویه (
slnt): زاویه oblique را کنترل میکند - اندازه اپتیکال (
opsz): letterform ها را برای اندازههای caption در برابر display تنظیم میکند - ایتالیک (
ital): از roman به italic به عنوان یک مقدار پیوسته
محورهای سفارشی از کدهای چهارحرفی بزرگ استفاده میکنند و به طراحان تایپ اجازه میدهند محدودههای بیانی بسازند که هیچ فونت استاتیکی نمیتواند ارائه دهد.
چهار بررسی در یک نگاه
چهار variable font در production، چهار دلیل متفاوت برای ارسال آنها.
| فونت | طراح | محورهای سفارشی | موارد استفاده اصلی | فایل (تقریبی variable) |
|---|---|---|---|---|
| Inter | Rasmus Andersson | ندارد | UI محصول، SaaS، داشبوردها | ~310 KB |
| Recursive | Stephen Nixon (Arrow Type) | Mono، Casual، Expression | کد و بازاریابی از یک فایل | ~580 KB |
| Apple SF Pro | Apple | اندازه اپتیکال | سطح OS، هر پلتفرم Apple | Bundled |
| IBM Plex | Bold Monday + IBM | ندارد | سیستم طراحی شرکتی در محصول و بازاریابی | ~200 KB به ازای هر سبک |
هر فونت نسخه متفاوتی از همان مشکل را حل میکند: یک فایل ارسال کن، هر زمینهای را پوشش بده.
Inter: variable fontای که طراحان واقعاً ارسال میکنند
Inter typeface ی از Rasmus Andersson برای صفحهنمایش است، و احتمالاً پرکاربردترین variable font در production الان است. نسخه variable در rsms.me/inter شامل وزن از ۱۰۰ تا ۹۰۰ و italic است، همه در یک فایل.
موضع صادقانه برای Inter پیشپاافتاده و درست است. متریکهای دقیق، پوشش عمیق Latin و Cyrillic دارد، و از روز اول برای اندازههای کوچک روی صفحهنمایشهای کم DPI طراحی شده است.
این یک typeface شخصیتی نیست. زیرساخت است. وقتی کار متن قابل خواندن body، برچسبهای قابل خواندن، جداول داده قابل خواندن است، Inter مانع نمیشود.
تیمهایی که Notion، Linear، و دهها محصول SaaS دیگر دارند از Inter یا یک مشتق از آن استفاده میکنند. انتخاب آن UI شما را generic نمیکند؛ انتخاب تایپ شما را غیرمسئله میکند تا بتوانید بودجه خلاقانه را روی فاصلهگذاری، اندازهبندی، و سلسلهمراتب خرج کنید.
Recursive: وقتی محورها typeface را طراحی میکنند، نه فقط وزن را
Recursive اثر Stephen Nixon در Arrow Type مثال کلاسیک یک محور سفارشی است که تغییر میدهد typeface چیست، نه فقط چقدر سنگین احساس میشود. محور کلیدی Monospace (MONO) است که فونت را به صورت پیوسته از proportional به monospaced جابجا میکند. محور دوم، Casual (CASL)، از یک ساخت خطی رسمی به یک stroke بیانگر و غیررسمی حرکت میکند.
این یعنی یک فایل Recursive میتواند headline بازاریابی، body copy، و بلوکهای کد شما را سرویس دهد. مقادیر مختلف روی MONO و CASL، همان فایل. صرفهجویی فقط در تعداد فایل نیست؛ در انسجام برند است. نمونههای کد با prose بصری هماهنگ میشوند چون skeleton مشترک دارند.
معامله performance واقعی است: فایل variable Recursive حدود ۵۸۰ KB است چون فضای طراحی گستردهتری را حمل میکند. برای محصولی که واقعاً از کل محدوده محور استفاده میکند، یک درخواست برای همه چیز است. برای محصولی که فقط به یک توقف در هر محور نیاز دارد، یک subset استاتیک هدفمند لاغرتر است. بدانید چه میخرید قبل از اینکه متعهد شوید.
Apple SF Pro: variable به عنوان استاندارد سطح OS
Apple، SF Pro و SF Compact را به عنوان variable fonts درون هر Apple OS مدرن ارسال میکند. محور optical size (opsz) اهرم اصلی است: فونت به صورت خودکار ساخت letterform خود را برای اندازههای caption در برابر اندازههای display تنظیم میکند، فاصلهگذاری را تنگتر میکند و وزن stroke را بدون دخالت طراح تنظیم میکند.
این استدلال upstream برای variable fonts به عنوان استاندارد پلتفرم است. Apple و Google هر دو variable را به عنوان پیشفرض میدانند؛ فایل استاتیک فرمت legacy است. وقتی OS، مرورگر، و stack rendering همه حول فرمت variable ساخته شدهاند، ارسال فایلهای استاتیک شبیه ارسال GIF به جای WebP به نظر میرسد.
طراحانی که درون HIG Apple کار میکنند نمیتوانند SF Pro را مستقیم روی وب بارگذاری کنند (مجوز). اما الگوی محور optical size با هر variable fontای که از opsz پشتیبانی میکند کاملاً قابل تکرار است، و یک استدلال ملموس است برای اینکه چرا محورها فراتر از وزن اهمیت دارند.
IBM Plex: variable درون یک سیستم طراحی شرکتی
IBM Plex typeface ی از Bold Monday است که برای IBM سفارش داده شده، و واضحترین مثال یک variable font است که یک سیستم طراحی شرکتی را در مقیاس لنگر میاندازد. Plex Serif، Sans، Mono، و Math را پوشش میدهد، با نسخههای variable موجود برای Sans و Serif.
استدلال تجاری که IBM مطرح کرد: یک خانواده تایپ، یک مجموعه فایل، هر سطح محصول، هر زبان. Plex در محصولات cloud IBM، بازاریابی، مستندات توسعهدهنده، و چاپ ارسال میشود. Sans variable همان سیگنال برند را حمل میکند چه در ۱۱px در یک جدول داده رندر شود چه در ۷۲px در یک بیلبورد. این ثبات تصادفی نیست؛ این چیزی است که سفارش یک سیستم تایپ با ستون فقرات variable منسجم خریداری میکند.
برندهایی با چندین سطح محصول و عمر طولانی هستند که Plex ارزش خود را ثابت میکند. این بررسی است که باید جلوی هر کسی گذاشت که سرمایهگذاری در یک سیستم تایپ مناسب را زیر سوال میبرد.
نیاز به یک سیستم تایپ دارید که از هر کانالی جان سالم به در ببرد و در یک فایل ارسال شود نه شش فایل؟ Brainy هویت برند ارسال میکند.
استدلال performance در یک عدد
Inter variable تقریباً ۳۱۰ KB به عنوان یک فایل منفرد است. ارسال Inter Regular و Inter Bold به عنوان فایلهای استاتیک در مجموع حدود ۲۸۰ KB میشود. این به نظر میرسد استاتیک برنده میشود. نمیشود.
| فونتهای استاتیک | Variable font | |
|---|---|---|
| درخواستهای HTTP | 2 | 1 |
| محدوده وزن | توقفهای ثابت (400 و 700) | 100 تا 900، پیوسته |
| تغییر محور | ندارد | همه محورهای ثبتشده |
| محدوده طراحی | محدود به وزنهای ارسالشده | هر مقداری که محور پشتیبانی میکند |
برای یک UI که از سه یا چهار وزن استفاده میکند، فایل variable تنها با تعداد درخواست به تنهایی هزینه خود را توجیه میکند. یک سایت بازاریابی که وزن display را دقیق تنظیم میکند کنترل طراحیای دارد که فونتهای استاتیک در هیچ اندازه فایلی نمیتوانند ارائه دهند.
Subsetting ریاضیات را تیزتر میکند. ابزارهایی مثل Fonttools و API subsetting Google Fonts به شما اجازه میدهند یک variable font را فقط به محورها و glyphهایی که نیاز دارید برش دهید. یک variable Inter با subset مناسب برای کاراکترهای Latin با فقط وزن و italic به خوبی زیر ۱۰۰ KB است.
چطور این هفته یک variable font انتخاب کنید
شش سوال، طراحیشده برای بودجههای production سال ۲۰۲۶. آنها را به ترتیب پاسخ دهید. آخرین پاسخی که نتیجه روشنی دارد انتخاب شماست.
| # | سوال | قانون |
|---|---|---|
| 1 | آیا typeface برند از قبل variable است؟ | اگر بله، از آن استفاده کنید. نیازی به تعویض نیست. |
| 2 | آیا این اصولاً یک محصول UI یا SaaS است؟ | با Inter شروع کنید. به روش درستی کسلکننده است. |
| 3 | آیا نیاز دارید بلوکهای کد بصری با prose هماهنگ باشند؟ | به Recursive نگاه کنید. محور MONO برای این ساخته شده. |
| 4 | آیا به بیش از تغییر وزن و italic نیاز دارید؟ | قبل از تعهد لیست محور را بررسی کنید. بیشتر فونتها فقط wght ارائه میدهند. |
| 5 | آیا اندازه فایل یک محدودیت سخت است (بودجه performance تهاجمی)؟ | به محدودههای محور و glyphهایی که واقعاً استفاده میکنید subset بزنید. |
| 6 | آیا این یک سیستم طراحی بلندمدت است، نه یک پروژه یکباره؟ | از ابتدا یک typeface با variable سفارش دهید یا مجوز بگیرید. Retrofit نکنید. |
کاتالوگی که قبل از تعهد به هر انتخابی باید بررسی کنید v-fonts.com است. این جامعترین فهرست variable font موجود است و به شما اجازه میدهد محورها را زنده قبل از دانلود آزمایش کنید.
برای جفت کردن variable fonts با secondary ها، راهنمای جفتبندی فونت ما را ببینید. برای اینکه این چگونه در stack typography گستردهتر جا میگیرد، آن شکستبندی سلسلهمراتب، مقیاس، و فاصلهگذاری را پوشش میدهد.
سوالات متداول
آیا variable fonts در همه مرورگرها کار میکنند؟
بله، از سال ۲۰۲۶. Variable fonts از Safari 11، Chrome 66، Firefox 62، و Edge 17 پشتیبانی گسترده داشتهاند.
تنها نگرانی نمونههای Android WebView بسیار قدیمی است. اگر analytics شما ترافیک قابل توجهی از مرورگرهای دوران Android 4 نشان میدهد، تست کنید. برای بقیه، با اطمینان ارسال کنید.
آیا variable fonts در CSS سختتر پیادهسازی میشوند؟
بعد از اینکه ویژگی font-variation-settings را بفهمید، سختتر از فونتهای استاتیک نیست. مقادیر محور را همانطور اعلام میکنید که font-weight را اعلام میکنید. تغییر وزن اغلب کاملاً از طریق ویژگی موجود font-weight مدیریت میشود چون مرورگرها به طور خودکار آن را به محور wght نگاشت میکنند. محورهای سفارشی از تگهای چهارحرفی مستقیماً در font-variation-settings استفاده میکنند.
آیا میتوانم از یک variable font از Google Fonts استفاده کنم؟
بله. Google Fonts نسخههای variable بسیاری از typeface ها از جمله Inter، Recursive، و Roboto Flex را سرویس میدهد. :ital,wght@0,100..900;1,100..900 (یا محدوده محور مناسب) را به URL Google Fonts اضافه کنید تا فایل variable را به جای وزنهای جداگانه درخواست کنید. syntax در صفحه توسعهدهنده Google Fonts مستند شده است.
آیا یک variable font همیشه از چندین فایل استاتیک کوچکتر است؟
همیشه نه. یک variable font فضای طراحی کامل را رمزگذاری میکند، که میتواند فایل خام را از یک وزن استاتیک منفرد بزرگتر کند. موضع برای variable یک درخواست به علاوه محدوده محور است، نه اندازه فایل خام. Subsetting برای بیشتر موارد استفاده production شکاف را سریع میبندد.
کِی باید با فونتهای استاتیک بمانم؟
وقتی فقط از یک وزن یک typeface استفاده میکنید و برنامهای برای گسترش ندارید. یک Regular استاتیک با subset واقعاً لاغرتر از یک variable font است که در یک توقف منفرد استفاده میکنید. مزیت variable با استفاده از محور مرکب میشود. اگر از یک وزن و یک سبک استفاده میکنید، استاتیک خوب است.
ارسال شش فایل فونت را متوقف کنید وقتی به یکی نیاز دارید
استدلال برای variable fonts حدسی نیست. Apple، SF Pro را به عنوان variable در هر پلتفرم ارسال میکند. IBM Plex یک سیستم را که محصولات cloud، اسناد توسعهدهنده، و چاپ را پوشش میدهد لنگر میاندازد.
Inter ساخته Rasmus Andersson typeface پیشفرض نیمی از interface های SaaS است که هر روز استفاده میکنید. این فرمت تجربی نیست؛ استاندارد فعلی است که بیشتر کارهای طراحی سطح پروژه هنوز به آن نرسیده است.
یک فونت از بررسیهای بالا انتخاب کنید، آن را از چارچوب ششسوالی رد کنید، فایل variable را از v-fonts.com یا Google Fonts بکشید، و این هفته ارسال کنید.
استدلال performance واقعی است. استدلال محدوده طراحی واقعی است. استدلال "ما باید اول استراتژی بارگذاری فونت خود را بررسی کنیم" دلیل شروع دوشنبه است، نه دلیل انتظار. برای مقالات typography بیشتر، کتابخانه کامل آنجاست.
Need a type system that survives every channel and ships in one file, not six? Brainy ships brand identity.
Get Started
