فونتهای متغیر در پروداکشن: چطور بدون خراب کردن عملکرد ارسالشان کنیم
راهنمای عملی فونتهای متغیر در پروداکشن. چهار محوری که ارزش ارسال دارند، استراتژی سابستینگ که حجم فایل را نصف میکند و روش بارگذاری که صفحه را از پرش نگه میدارد.
فونتهای متغیر در پروداکشن: چطور بدون خراب کردن عملکرد ارسالشان کنیم
فونت متغیر یک فایل با بی‌نهایت ضخامت است. تیم‌هایی که درست ارسالش میکنند بایت صرفه‌جویی میکنند و بیان‌گری طراحی را آزاد میکنند. تیم‌هایی که غلط ارسالش میکنند فونتهای ۸۰۰ کیلوبایتی بارگذاری میکنند و اولین رندر صفحه را برای انیمیشن‌هایی که هیچ‌کس نمی‌بیند مسدود میکنند. تفاوت در انتخاب فونت نیست. در استراتژی پروداکشن است.
فونت متغیر یک فایل با بی‌نهایت ضخامت است
فونت متغیر همه ضخامت‌ها، شیب‌ها و عرض‌ها را درون یک فایل واحد با محورهایی می‌فرستد که می‌توانید بینشان درون‌یابی کنید. این کل ادعای فروش آن است و کل بده‌بستانش هم همین است. یک درخواست شبکه جای چهار تا هفت درخواست فونت استاتیک را می‌گیرد. فایل از هر ضخامت استاتیک تکی بزرگتر است، اما از مجموعه کامل ضخامت‌های استاتیک کوچک‌تر. معامله همین است.
فرمت، OpenType با داده‌های تغییر تعبیه‌شده است. مرورگر در زمان رندر بین نقاط انتهایی محورها درون‌یابی میکند، یعنی font-weight: 350 یا font-weight: 723 را مجانی می‌گیرید، نه فقط اعداد صحیحی که ریختهگری فونت تصمیم گرفته بفرستد. همین است که الگوی انیمیشن ضخامت روی هاور را ممکن میکند و همین است که پیاده‌سازی بی‌دقت را وادار میکند برای سایتی که فقط دو ضخامت دارد فایل ۶۰۰ کیلوبایتی بارگذاری کند.
چهار محوری که ارزش ارسال دارند
ضخامت، شیب، اندازه اپتیکال و عرض. بیشتر سایتهای پروداکشن به دو یا سه‌تای این‌ها نیاز دارند و ارسال محور بیشتر از آنچه استفاده میکنید بایت هدر دادن است.
مشخصات OpenType پنج محور ثبتشده تعریف میکند: ضخامت (wght)، عرض (wdth)، شیب (slnt)، ایتالیک (ital) و اندازه اپتیکال (opsz). فراتر از این‌ها، ریخته‌گری‌ها میتوانند محورهای سفارشی برای هر چیزی از گرید تا بیان‌گری تعریف کنند. محورهای سفارشی در نمونه‌برگ فونت سرگرم‌کننده‌اند. در پروداکشن تقریباً هیچ‌وقت ارزش حجم فایلشان را ندارند. به همان چهار محور ثبتشده بچسبید، مگر اینکه طراحی صراحتاً چیز دیگری بخواهد.
| محور | ویژگی CSS | بازه معمول | کی استفاده شود |
|---|---|---|---|
ضخامت (wght) | font-weight | 100–900 | تقریباً همیشه |
عرض (wdth) | font-stretch | 75%–125% | ادیتوریال، تیترهای واکنش‌گرا |
شیب (slnt) | font-style: oblique Xdeg | -15deg تا 0deg | جایگزین ایتالیک واقعی یا انیمیشن |
اندازه اپتیکال (opsz) | font-optical-sizing | 6–144 | نمایشی و متن از یک فایل |
ضخامت، اسب باری است
محور ضخامت جای چهار تا هفت فایل ضخامت استاتیکی را می‌گیرد که بیشتر سایت‌ها می‌فرستند و تنهایی هزینه فونتهای متغیر را جبران میکند. سایتی که Regular، Medium، SemiBold، Bold و ExtraBold را بهصورت فایل استاتیک می‌فرستد پنج درخواست فونت می‌زند. فونت متغیر با محور ضخامت یک درخواست می‌زند و همه مقادیر میانی را مجانی تحویل میدهد.
CSS همان font-weight: 300 تا font-weight: 900 روی هر عنصر است. مقادیر میانی مثل font-weight: 450 معتبرند و درست رندر میشوند. پیش از آنکه فرض کنید فونت متغیر کل بازه ۱۰۰ تا ۹۰۰ را پوشش میدهد، مستندات بازه محور را از ریختهگری چک کنید. بعضی بازه باریک‌تری دارند و بی‌صدا clamp میکنند، که به‌جای انتقال نرم، پله‌های ظریف اما زشت تولید میکند.
شیب، ایتالیک واقعی را آزاد میکند
محور شیب واقعی اجازه میدهد در هر مقداری از حالت راست‌ایستاده به ایتالیک بروید، کاری که بیشتر جفت‌فونت‌های استاتیک بدون فایل دوم از پسش برنمی‌آیند. تفاوت میان slnt (شیب) و ital (ایتالیک) مهم است: شیب یک بازه پیوسته از راست‌ایستاده تا مایل است، در حالی که ایتالیک یک سوییچ دودویی است که به طرح ایتالیک جداگانه و اپتیکالی اصلاح‌شده می‌پرد.
برای متن بدنه، محور ایتالیک با ایتالیک اپتیکال درست تقریباً همیشه انتخاب صحیح است. برای تیترهایی که قصد انیمیشن دارید، شیب محوری است که می‌خواهید. CSS همان font-style: oblique -10deg است و مقدار درجه به بازه محور نگاشت میشود. پیش از قطعی کردن مقدار، شیب را در اندازه واقعی تیترتان تست کنید. زاویه‌های شیب شدید در اندازه‌های کوچک بدتر از آنچه نمونه‌برگ ریختهگری نشان میدهد به نظر می‌رسند.
اندازه اپتیکال، تایپ نمایشی را زنده نگه میدارد
اندازه اپتیکال کنتراست، x-height و جزئیات را بر اساس اندازه رندرشده تنظیم میکند، یعنی تفاوت میان فیس نمایشی و فیس متنی که درون یک فونت واحد ساخته شده. تایپ‌فیسی که برای متن ۱۲ پیکسلی طراحی شده جزئیات ساده، حفره‌های باز و فاصله‌گذاری سخاوتمندانه دارد. برش نمایشی در ۸۰ پیکسل کنتراست تیزتر، فاصله‌گذاری فشرده‌تر و جزئیات پرداخته‌تر دارد. اندازه اپتیکال هر دو را از یک فایل به شما میدهد.
ویژگی CSS همان font-optical-sizing: auto است که اجازه میدهد مرورگر بر اساس font-size اعلام‌شده تنظیمات اپتیکال درست را اعمال کند. می‌توانید دستی هم تنظیمش کنید: font-variation-settings: 'opsz' 72 برای تیتر ۷۲ پیکسلی. فونت‌هایی که این محور را درست پشتیبانی میکنند، که Inter Display در برابر Inter Text نمونه کلاسیکش است، با اندازه اپتیکال به‌عنوان قابلیت درجه یک طراحی شده‌اند. فونت‌هایی که محور opsz را بعداً و از سر دلخوشی اضافه میکنند به‌ندرت تفاوت بصری معناداری می‌دهند. بدانید چه چیزی می‌خرید.
عرض، محور ادیتوریال است
محور عرض اجازه میدهد تیترها را فشرده و نقل‌قول‌های برجسته را باز کنید، بدون عوض کردن فونت، و این همان حرکتی است که چیدمان‌های ادیتوریال را به آواز می‌آورد. ویژگی CSS همان font-stretch است و مقدار درصدی می‌گیرد: font-stretch: 75% برای فشرده و font-stretch: 125% برای باز.
این محور در سایت‌هایی با چیدمان ادیتوریال واکنش‌گرا حجم فایلش را پس میدهد. تیتری ۱۲۰ پیکسلی در دسکتاپ شاید برای جا شدن در ستون ۳۷۵ پیکسلی موبایل لازم باشد فشرده شود و محور عرض این را با یک @media query ساده، به‌جای بارگذاری فونت دوم، حل میکند. Roboto Flex یکی از پهن‌ترین بازههای محور عرض را در یک فونت متغیر آماده پروداکشن دارد و اگر قصد استفاده جدی از این محور دارید ارزش مطالعه دارد. برای سایتهای بازاریابی با هدرهای عرض ثابت، کلاً ردش کنید.
متغیر در برابر استاتیک، درخت تصمیم
فونتهای متغیر وقتی برنده‌اند که از سه ضخامت یا بیشتر استفاده کنید، تایپ را انیمیت کنید، یا به اندازه اپتیکال نیاز داشته باشید. در غیر این صورت استاتیک بمانید. نقطه سر‌به‌سر معمولاً دو تا سه ضخامت است و بسته به نیازهای پوشش زبانی، حساب تغییر میکند.
| سناریو | بهترین انتخاب | دلیل |
|---|---|---|
| ۱ تا ۲ ضخامت، بدون انیمیشن | استاتیک | بایت کل کمتر |
| ۳ ضخامت یا بیشتر | متغیر | یک فایل از سه فایل بهتر است |
| انیمیشن ضخامت یا شیب | متغیر | فقط با متغیر ممکن است |
| نیاز به اندازه اپتیکال | متغیر | یک بارگذاری فونت دوم را حذف میکند |
| فقط لاتین باریک، تک ضخامت | استاتیک | متغیر سودی ندارد |
| چند‌محلی، زبان‌های متعدد | متغیر با سابستینگ | یک فایل پایه، افزونه‌های محلی |
سایتی که Regular و Bold می‌فرستد احتمالاً با دو فایل استاتیک به مجموع ۴۰ تا ۶۰ کیلوبایت بهتر از یک فونت متغیر ۱۲۰ تا ۲۰۰ کیلوبایتی است. به محض اینکه از سه ضخامت رد شوید یا انیمیشن به نیازها اضافه شود، حساب قاطعانه به نفع متغیر می‌چرخد.
سابستینگ فایل را نصف میکند
سابستینگ گلیفهایی را که استفاده نمی‌کنید حذف میکند و در یک سایت بازاریابی یعنی فونت متغیر ۶۰۰ کیلوبایتی بدون تغییر قابلمشاهده ۲۰۰ کیلوبایت میشود. فونت متغیر کامل هر گلیفی را که ریختهگری طراحی کرده می‌فرستد: لاتین، لاتین گسترده، سیریلیک، یونانی، عملگرهای ریاضی، نمادهای ارز و لیگاتورهایی که هرگز استفاده نمی‌کنید. فونت متغیر سابستشده فقط آنچه محتوایتان لازم دارد می‌فرستد.
ابزارش pyftsubset از کتابخانه fonttools است. یک فرمان سابست پایه لاتین:
pyftsubset font.woff2 \
--output-file=font-subset.woff2 \
--flavor=woff2 \
--unicodes=U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD \
--layout-features="kern,liga,calt,rlig"
فیچرهای چیدمان kern، liga، calt و rlig را نگه دارید. همه چیز دیگر را حذف کنید، مگر اینکه طراحی صراحتاً از آن استفاده کند. اگر ابزار فشرده‌سازی را خودکار انجام نداد، خروجی را از یک فشرده‌ساز WOFF2 رد کنید.
لاتین، لاتین گسترده و بازههای زبانی
استراتژی سابستینگ درست، یک فایل لاتین به‌اضافه یک فایل افزونه زبانی برای هر محلی است که فقط در صورت نیاز بارگذاری میشود. بیشتر سایتهای بازاریابی و محصول عمدتاً محتوای لاتین دارند. سابست لاتین را پیش‌فرض بفرستید و مجموعه کاراکترهای گسترده را از طریق دسکریپتور unicode-range در @font-face بارگذاری کنید، که به مرورگر می‌گوید فقط وقتی فایل را بگیرد که کاراکترهای منطبق را در صفحه ببیند.
@font-face {
font-family: 'YourFont';
src: url('/fonts/yourfont-latin.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
@font-face {
font-family: 'YourFont';
src: url('/fonts/yourfont-latin-ext.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020,
U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
مرورگر فقط فایل‌هایی را دانلود میکند که با کاراکترهای صفحه فعلی منطبق‌اند. صفحه فرانسوی فایل لاتین گسترده را بارگذاری میکند. صفحه انگلیسی نه. Google Fonts در مقیاس بزرگ همین‌طور کار میکند و این الگوی درستی برای کپی کردن در فونتهای متغیر خودتان است.
بارگذاری بدون پرش
فونت متغیری که بعد از اولین رندر بارگذاری شود چیدمان را جابه‌جا میکند و دستور بارگذاری، preload به‌اضافه font-display با مقدار swap به‌اضافه فالبک هممتریک است. این اختیاری نیست. فونت متغیر از یک ضخامت استاتیک تکی بزرگتر است، یعنی دیرتر می‌رسد، یعنی پنجره جابهجایی چیدمان پهن‌تر است.
لینک preload در <head> و پیش از هر استایل‌شیت می‌آید:
<link
rel="preload"
href="/fonts/yourfont-latin.woff2"
as="font"
type="font/woff2"
crossorigin
>
تعریف font-display: swap در @font-face به مرورگر می‌گوید فوراً با فالبک رندر کند و وقتی فونت متغیر رسید جایش را عوض کند. فونت متغیر یک فایل با بی‌نهایت ضخامت است و استراتژی بارگذاری غلط، اگر تعریف‌های preload و غیرpreload را میان استایل‌شیت‌ها قاطی کنید، بی‌دلیل آن را دوبار بارگذاری میکند. یک preload برای هر فایل سابست. کل قاعده همین است.
فونتهای متغیری می‌خواهید که با نصف بایت ارسال شوند و هرگز صفحه را نپرانند؟ Brainy را استخدام کنید تا استک تایپوگرافی پروداکشن شما را با محورهای درست، ساب‌ست‌های درست و روش بارگذاری‌ای که Lighthouse را سبز نگه میدارد ارسال کنیم.
فال‌بک‌های هممتریک
فالبک سیستمی هممتریک از size-adjust، ascent-override و descent-override استفاده میکند تا فالبک با همان ریتم فونت متغیر رندر شود. بدون این، font-display: swap متن نامرئی را با جابهجایی چیدمان معاوضه میکند، آن هم وقتی فونت متغیر می‌رسد. با تطبیق متریک، swap از نظر بصری نامحسوس است.
@font-face {
font-family: 'YourFont Fallback';
src: local('Arial');
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
size-adjust: 107%;
}
مقادیر دقیق به فونت متغیر شما بستگی دارد. ابزارهایی مثل Fontaine و next/font این مقادیر را خودکار تولید میکنند. اگر روی Next.js می‌سازید، next/font کل زنجیره فالبک را مدیریت میکند. اگر نه، Fontaine سریع‌ترین راه برای رسیدن به مقادیر override درست بدون محاسبه دستی است.
چهار الگوی انیمیشن که فونتهای متغیر آزاد میکنند
Hover-weight، scroll-weight، hover-slant و reveal-width. این چهار انیمیشن فقط با فونتهای متغیر ممکن‌اند و اگر کم مصرف شوند حجم فایل را پس می‌دهند. هر چهار را روی یک صفحه بریزید، میشود دموی فنی، نه طراحی.
Hover-weight مقدار font-weight را روی هاور از ۴۰۰ به ۷۰۰ می‌برد. درون‌یابی نرم است چون داده محور در خود فونت است. transition: font-weight 0.15s ease روی عنصر کل CSS است. روی لینک‌های ناوبری، متن call-to-action و لیبل‌های تعاملی کار میکند.
Scroll-weight مقدار font-weight را از موقعیت اسکرول می‌راند، با یک شنونده اسکرول جاوااسکریپتی که scrollY را به مقداری در بازه محور نگاشت میکند. بازه را تنگ نگه دارید: ۳۰۰ تا ۷۰۰ عمدی به نظر می‌رسد و ۱۰۰ تا ۹۰۰ مثل باگ. جایش در بخش‌های هیرو است، جایی که با اسکرول کاربر به محتوا، تایپ سنگین‌تر میشود.
Hover-slant مقدار font-style: oblique 0deg را روی هاور به font-style: oblique -10deg می‌برد. جایگزین ظریف‌تر hover-weight است و روی لینک‌های ناوبری و عناصر تعاملی درون‌خطی پرداخته‌تر به نظر می‌رسد. با hover-weight فقط وقتی ترکیبش کنید که تایپفیس برای پشتیبانی همزمان از هر دو طراحی شده باشد.
Reveal-width مقدار font-stretch را به‌عنوان بخشی از انیمیشن ورود متحرک میکند. متن با font-stretch: 75% وارد میشود و طی ۴۰۰ میلی‌ثانیه به font-stretch: 100% باز میشود. همراه با fade-in یکی از تمیزترین الگوهای آشکارسازی تایپوگرافیک موجود است. روی متن بدنه ردش کنید. فقط به تایپ نمایشی و تیترهای هیرو می‌آید.
هفت سایتی که فونت متغیر را در مقیاس بزرگ می‌فرستند
GitHub، Stripe Press، Vercel، Linear، The New York Times، Apple Music و Figma هرکدام فونت متغیر را در پروداکشن می‌فرستند و الگوهای مشترکشان همانی است که ارزش کپی کردن دارد.
GitHub فونتهای Mona Sans و Hubot Sans را می‌فرستد، هر دو فونت متغیر سفارشی ساخته‌شده برای برند GitHub. در بیشتر زمینه‌های UI فقط محور ضخامت. انیمیشن ندارد، جز در بخش‌های بازاریابی گاه‌به‌گاه. حجم فایل‌ها کم است چون به‌شدت بر اساس گروه زبانی سابست میکنند.
Stripe Press از یک فونت متغیر نمایشی سفارشی برای تیترهای ادیتوریال استفاده میکند. محور ضخامت را سخت زیر فشار می‌گذارند، با تیترهای نمایشی در ضخامت سنگین و کپشن‌ها در ضخامت سبک، همه از یک فایل. اندازه اپتیکال در اندازه‌های بزرگتر تیتر آشکار است. جاه‌طلبانه‌ترین استفاده ادیتوریال از فونت متغیر در این فهرست است.
Vercel فونت Geist، فونت متغیر خودش، را در Geist Sans و Geist Mono می‌فرستد. محور ضخامت کل بازه را پوشش میدهد. فونت متن‌باز است، سابستینگ لاتین تمیز است و آنقدر سریع بارگذاری میشود که مرجعی باشد برای اینکه فونت متغیر خوب‌ارسال‌شده در یک اپ Next.js پروداکشن چه شکلی است.
Linear فونت Inter را بهصورت متغیر می‌فرستد. محور ضخامت در ضخامت‌های UI می‌چرخد و در بازه باریک‌تر ضخامت اپتیکال مناسب یک UI متراکم می‌ماند. محافظه‌کارانه‌ترین استفاده این فهرست است و در عین حال یکی از درست‌ترین‌ها برای رابط محصول پر از داده، جایی که انیمیشن فقط نویز می‌شد.
The New York Times از یک سریف متغیر سفارشی برای تایپ نمایشی استفاده میکند. محورهای ضخامت و اندازه اپتیکال هر دو فعال‌اند و انتقال‌های میان نمایشی و متن بدنه از محور اندازه اپتیکال برای تغییر رندر شخصیت حروف بهره می‌برند. این پیچیده‌ترین سطحی است که استفاده پروداکشن از فونت متغیر در مقیاس ادیتوریال به آن می‌رسد.
Apple Music فونت San Francisco را در شکل متغیرش با هر دو محور ضخامت و اندازه اپتیکال فعال می‌فرستد. انتقال محورها میان تایپ بزرگ و کوچک آنقدر نرم است که بیشتر کاربران متوجه متغیر بودن فونت نمیشوند، که هدف درست همین است. فونت باید در تجربه خواندن ناپدید شود.
Figma فونت Inter Display را بهصورت متغیر در سراسر اپلیکیشن می‌فرستد. اگر برای UI یک محصول انتخاب تایپفیس نمایشی میکنید، ببینید Figma چطور Inter را در ضخامت‌های کوچک UI با Inter Display در اندازه‌های بزرگ تیتر متعادل میکند. انضباط بازه ضخامت را مستقیم کپی کنید.
چک‌لیست فونت متغیر پیش از دیپلوی
پیش از ارسال فونت متغیر این را اجرا کنید تا باگ‌هایی که در پروداکشن گاز می‌گیرند را بگیرید.
- سابستینگ تأیید شد.
pyftsubsetرا با بازههای یونیکد هدفتان اجرا کنید. تأیید کنید فایل سابست لاتین زیر ۲۰۰ کیلوبایت است. نمونه‌وار چک کنید کاراکترهایی که محتوایتان استفاده میکند در خروجی هستند. - محورها مستند شدند. بدانید فونت کدام محورها را می‌فرستد و حداقل و حداکثر بازه هرکدام چیست. اگر محور در ۷۰۰ سقف می‌خورد،
font-weight: 800اعلام نکنید. بی‌صدا clamp میشود و طراحی‌تان غلط درمی‌آید. - Preload تنظیم شد. یک
<link rel="preload">برای هر فایل سابست، در<head>، با اتریبیوتcrossorigin، که فقط به فایل اصلی لاتین اشاره کند. preload فایلی که استفاده نمی‌کنید پهنای باند هدر میدهد. - font-display پیکربندی شد. هر بلاک
@font-faceمقدارfont-display: swapدارد. در تب Network در DevTools تأیید کنید فونت‌ها هیچ منبع مسیر بحرانی را render-blocking نمی‌کنند. - متریک فالبک تطبیق داده شد. یک بلاک
@font-faceبرای فالبک سیستمی باsize-adjust،ascent-overrideوdescent-overrideمحاسبه‌شده. با throttle کردن روی Slow 3G در DevTools و بررسی جابهجایی چیدمان هنگام بارگذاری راستی‌آزمایی کنید. CLS باید ۰ یا نزدیک ۰ باشد. - محورهای مورد استفاده طراحی تأیید شد. هر محوری که در CSS اعلام شده واقعاً در طراحی نهایی استفاده میشود. محورهایی که در فایل فونت هستند اما در CSS نیستند باز هم بایت اضافه میکنند. اگر از عرض استفاده نمی‌کنید، سابستینگ بازه محور را برای حذف آن بایت‌ها در نظر بگیرید.
- امتیاز Lighthouse چک شد. Lighthouse را روی URL پروداکشن با فونت در جایش اجرا کنید. LCP و CLS مرتبط با فونت باید سبز باشند. اگر نیستند، متریک فالبک غلط است یا preload جا افتاده.
- هدرهای CORS تأیید شد. فونتهای متغیری که از CDN یا مبدأ خارجی بارگذاری میشوند به هدرهای
Access-Control-Allow-Originنیاز دارند. تب Network را برای خطاهای CORS بررسی کنید. شکست CORS فالبک بی‌صدای فونت تولید میکند که در پروداکشن عیب‌یابی‌اش سخت است.
سوالات متداول
فونت متغیر چیست و چه فرقی با فونت استاتیک دارد؟
فونت متغیر یک فایل فونت واحد است که کل بازه طراحی یک تایپفیس را در خود دارد و با محورهایی مثل ضخامت، عرض، شیب و اندازه اپتیکال کنترل میشود. فونت استاتیک یک اسنپشات تکی در یک ضخامت و سبک است. تفاوت عملی این است که فونت متغیر اجازه میدهد font-weight: 350 استفاده کنید یا ضخامت را در CSS نرم انیمیت کنید، در حالی که فونتهای استاتیک فقط مقادیر خاصی را مجاز میکنند که ریختهگری بهصورت فایلهای جدا فرستاده است.
آیا فونتهای متغیر واقعاً عملکرد را بهتر میکنند؟
بستگی دارد چند ضخامت بارگذاری میکنید. اگر دو ضخامت استاتیک با مجموع ۶۰ کیلوبایت میفرستید، رفتن به فونت متغیر ۱۸۰ کیلوبایتی پسرفت عملکرد است. اگر پنج ضخامت با مجموع ۳۰۰ کیلوبایت میفرستید، رفتن به فونت متغیر سابستشده ۱۲۰ کیلوبایتی یک برد روشن است. استدلال عملکردی برای فونتهای متغیر واقعی است، اما فقط وقتی صدق میکند که از آستانه سه ضخامت رد شوید و درست سابست کنید.
بهترین فونت متغیر برای طراحی UI کدام است؟
Inter پرکاربردترین فونت متغیر در طراحی UI است. محور ضخامتش برای استفاده روی صفحه‌نمایش خوب کالیبره شده، تمیز سابست میشود و Figma آن را به‌عنوان مرجع پروداکشن می‌فرستد. Roboto Flex وقتی انتخاب درست است که به بازه محور پهن برای چیدمان‌های ادیتوریال واکنش‌گرا نیاز دارید. اگر هم یک sans متغیر و هم یک mono متغیر را از یک خانواده تایپ می‌خواهید، Recursive ارزش مطالعه دارد. برای اصول طراحی وب که فیس نمایشی بیان‌گرتر می‌خواهند، Fraunces و Playfair Display هر دو محورهای قوی اندازه اپتیکال و ضخامت دارند.
چطور از font-variation-settings در CSS استفاده کنم؟
font-variation-settings ویژگی سطح پایین برای تنظیم مستقیم محورهای فونت متغیر با تگ چهارحرفی محور و یک مقدار عددی است: font-variation-settings: 'wght' 450, 'wdth' 85. برای محورهای ثبتشده مثل ضخامت و عرض، ویژگیهای سطح بالای CSS (font-weight، font-stretch) را ترجیح دهید چون درست ارثبری و ترکیب میشوند. font-variation-settings را فقط برای محورهای سفارشی که ویژگی CSS سطح بالا ندارند به کار ببرید.
آیا فونتهای متغیر میتوانند باعث جابهجایی چیدمان شوند؟
بله، و احتمال بیشتری نسبت به فونتهای استاتیک دارند چون فایل بزرگتر است و دیرتر بارگذاری میشود. راهحل font-display: swap همراه با فالبک هممتریک است. این ترکیب swap را از نظر بصری نامحسوس میکند. بدون فالبک هممتریک، font-display: swap متن نامرئی را با یک پرش چیدمان قابلمشاهده، هنگام رسیدن فونت، معاوضه میکند. هر دو مشکل با هم حل میشوند یا اصلاً حل نمیشوند.
آیا فونتهای متغیر در همه مرورگرها پشتیبانی میشوند؟
فونتهای متغیر در همه مرورگرهای مدرن پشتیبانی میشوند: Chrome، Firefox، Safari و Edge. پایه آنقدر محکم است که برای سازگاری مرورگر به فالبک فونت استاتیک نیاز ندارید. درصد کاربران روی مرورگری که از فونت متغیر پشتیبانی نمیکند برای بیشتر سایتهای پروداکشن زیر یک درصد است. برای آن حالت لبه، یک فالبک فونت سیستمی بدهید، نه یک استک فونت استاتیک.
سابستینگ فونت متغیر چطور کار میکند؟
سابستینگ گلیفهایی را از فایل فونت حذف میکند که محتوای شما هرگز رندرشان نمیکند، با ابزاری مثل pyftsubset از کتابخانه پایتونی fonttools. شما بازههای کاراکتر یونیکد موردنیازتان را مشخص میکنید و ابزار بقیه را میزداید. یک فونت متغیر کامل شاید ۳۰۰۰ گلیف داشته باشد. سابست فقطلاتین حدود ۲۵۰ تا نگه میدارد. نتیجه، خروجی بصری یکسان برای محتوای لاتین با حدود یکسوم حجم فایل است. برای مرجع کامل فرمانها مدخل واژهنامه سابستینگ را ببینید.
تغییری که فونتهای متغیر واقعاً آزاد میکنند
فونتهای متغیر کنجکاوی تایپوگرافیک نیستند. راهی‌اند برای ارسال بیان بیشتر با بایت کمتر و تیم‌هایی که با آن‌ها مثل ابزار پروداکشن رفتار میکنند همان‌هایی‌اند که تایپوگرافی بهتری با هزینه شبکه کمتر می‌سازند.
معماری متغیرهای Figma که سیستم‌های طراحی مدرن را می‌راند، طبیعی روی محورهای فونت متغیر نگاشت میشود. توکن font-weight در Figma یک مقدار محور در فونت است. یک سیستم توکن خوش‌ساختار را با فونت متغیر درست سابستشده جفت کنید و تصمیم‌های طراحی بدون ابهام از فایل طراحی به پروداکشن منتشر میشوند. این را با یک سیستم رنگ OKLCH روی حالت‌های هاور جفت کنید و تعامل‌های محصولی می‌سازید که سنجیده به نظر می‌رسند، نه سرهم‌شده.
معیار فونتهای متغیر پروداکشن این نیست که «آیا فونت متغیر فرستادیم». معیار این است: درست سابست شده، درست preload شده، متریک فالبک تطبیق یافته و فقط محورهایی که طراحی استفاده میکند. این همان استانداردی است که تیم‌های تایپوگرافی پروداکشن را از تیم‌های تئاتر تایپوگرافی جدا میکند.
فونتهای متغیری می‌خواهید که با نصف بایت ارسال شوند و هرگز صفحه را نپرانند؟ Brainy را استخدام کنید تا استک تایپوگرافی پروداکشن شما را با محورهای درست، ساب‌ست‌های درست و روش بارگذاری‌ای که Lighthouse را سبز نگه میدارد ارسال کنیم.
Want variable fonts that ship at half the bytes and never jank the page? Brainy ships production typography stacks with the right axes, the right subsets, and the loading recipe that keeps Lighthouse green.
Get Started
