چرا تایپوگرافی رابط کاربری شما آماتور به نظر میرسد: ۶ راه‌حل با اعداد دقیق
شش اشتباه تایپوگرافی که رابط را آماتور نشان میدهند و راه‌حل حرفهای هرکدام با اعداد دقیق: مقیاس تایپ، یک خانواده فونت، خاکستری خوانا، حروف بزرگ، ارتفاع خط و سلسله‌مراتب.
تایپوگرافی آماتور به‌ندرت یک اشتباه بزرگ است. شش اشتباه کوچک است که هرکدام با حس و حال تصمیم گرفته شده: اندازه‌ای که درست به نظر آمد، فونتی که بامزه بود، خاکستریای که شیک می‌نمود. تایپوگرافی حرفهای آرام به نظر میرسد، چون هر کدام از این انتخاب‌ها از یک قاعده پیروی میکند. این شش مورد را با اعدادشان ببینید.
1. از مقیاس تایپ استفاده کنید
✕ آماتور: اندازه‌ها با حس انتخاب شده‌اند
✓ حرفهای: یک نسبت، 1.25 از 16
سمت چپ، هر اندازه جداگانه انتخاب شده: 31، 27، 22، 17، 15، 13. فاصله‌ها نامنظم است، پس بعضی سطوح تقریباً یکسان به نظر می‌رسند و بعضی ناگهان می‌پرند. سمت راست، هر اندازه برابر قبلی ضربدر 1.25 است: 16، 20، 25، 31، 39. پله‌ها یکنواخت‌اند و هر سطح به‌وضوح با بعدی فرق دارد.
نسبتی بین 1.2 و 1.333 برای بیشتر رابط‌ها مناسب است. یکی را انتخاب کنید، بنویسید و هرگز اندازه‌ای خارج از فهرست تایپ نکنید. در CSS این یک مجموعه کوچک متغیر است و در Figma مجموعه‌ای از استایل‌های متن. راهنمای ما درباره مقیاس تایپ ماژولار انتخاب نسبت را توضیح میدهد.
:root {
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */
}
2. یک خانواده، دو وزن
آخر هفته در لیسبون
یک دفتر خاطرات کوچک سفرسه روز، دو محله و یک سواری بسیار طولانی با تراموا.
ادامه مطلب✕ آماتور: چهار فونت روی یک کارت
آخر هفته در لیسبون
یک دفتر خاطرات کوچک سفرسه روز، دو محله و یک سواری بسیار طولانی با تراموا.
ادامه مطلب✓ حرفهای: یک خانواده، معمولی و بولد
هر فونت جدید شخصیت خودش را می‌آورد و چهار شخصیت روی یک کارت با هم دعوا می‌کنند. خواننده نمی‌داند کدام‌یک برند است. یک خانواده در دو وزن، معمولی برای خواندن و بولد برای تیترها، برای ساختن همه سطوح لازم یک صفحه کافی است.
اگر خانواده دوم می‌خواهید، فقط یک کار به آن بدهید، مثلاً فقط تیترها، و همه‌جا همان را حفظ کنید. هرگز فونتی اضافه نکنید تا یک عنصر «خاص» شود.
3. خاکستریای که بشود خواند
سفارش شما در راه است
رسیدن بین 14:20 تا 14:40.وقتی پیک نزدیک شد پیامک می‌فرستیم.
✕ #B0B0B0 روی سفید: خواندنش سخت است
سفارش شما در راه است
رسیدن بین 14:20 تا 14:40.وقتی پیک نزدیک شد پیامک می‌فرستیم.
✓ #6B6B6B روی سفید: خواندنش آسان است
خاکستری روشن در فایل طراحی روی مانیتور روشن ظریف به نظر میرسد. روی گوشی در فضای باز ناپدید میشود. زمان رسیدن در سمت چپ مفیدترین خط کارت است و سخت‌ترین خط برای خواندن.
#6B6B6B کنار تیتر مشکی هنوز آرام به نظر میرسد و خوانا می‌ماند. قاعده کلی: متن ثانویه روی سفید نباید روشن‌تر از حدود #767676 باشد، روشنترین خاکستریای که حداقل دسترس‌پذیری برای متن بدنه را رد میکند.
4. حروف بزرگ فقط برای برچسب‌ها
We've updated our terms. Please review the changes before your next order.
✕ آماتور: یک جمله کامل با حروف بزرگ
UPDATE
We've updated our terms
Please review the changes before your next order.
✓ حرفهای: برچسب با حروف بزرگ، متن عادی
حروف بزرگ شکل کلمهها را از بین می‌برند. در حروف کوچک، حرفهای بلند و کوتاه به هر کلمه کانتوری میدهند که چشم تشخیص میدهد؛ در حروف بزرگ هر کلمه یک مستطیل است و جمله را باید حرف به حرف خواند. برای همین یک پاراگراف با حروف بزرگ شبیه داد زدن است و خواندنش بیشتر طول می‌کشد.
حروف بزرگ برای کاری که برایش ساخته شده‌اند خوب‌اند: برچسبهای کوتاه یک تا سه کلمهای، مثل تگ بخش، وضعیت یا دکمه. هر چیز بلندتر با حروف معمولی نوشته شود.
5. تیتر فشرده، متن بدنه راحت
Spacing is part of the type
Tight leading turns a paragraph into a wall. Give body text room to breathe and keep headings snug.
✕ آماتور: تیتر باز، متن بدنه فشرده
Spacing is part of the type
Tight leading turns a paragraph into a wall. Give body text room to breathe and keep headings snug.
✓ حرفهای: تیتر 1.1، متن بدنه 1.5
ارتفاع خط در اندازههای مختلف کارهای متضاد دارد. تیترهای بزرگ از قبل فضای زیادی میان حروفشان دارند، پس تیتر با 1.1 مثل یک شکل یکپارچه کنار هم می‌ماند. متن بدنه کوچک بین خطوط جا می‌خواهد تا چشم آغاز خط بعد را پیدا کند، پس 1.5 می‌گیرد.
نسخه آماتور برعکس عمل میکند، معمولاً چون یک ارتفاع خط برای همه‌چیز اعمال شده. دو مقدار تعیین کنید و همه‌جا از آن‌ها استفاده کنید: حدود 1.1 تا 1.2 برای تیترها، 1.4 تا 1.6 برای متن بدنه.
6. اندازه، وزن، رنگ، فاصله
سفارش #2841
تحویل شدامروز، 14:203 کالاجمع کل 42.80$
✕ آماتور: همه‌چیز بولد، یک اندازه
● تحویل شد
سفارش #2841
امروز، 14:20 · 3 کالاجمع کل 42.80$
✓ حرفهای: چهار ابزار، یک ترتیب روشن
وقتی همه‌چیز بولد است، هیچ‌چیز بولد نیست. کارت آماتور پنج خط با یک اندازه و یک وزن دارد و خواننده باید همه را بخواند تا مهم‌ترین را پیدا کند.
کارت حرفهای چهار ابزار را به کار می‌برد، هرکدام کمی: شماره سفارش بزرگ‌تر است، وضعیت رنگ و یک نقطه می‌گیرد، جزئیات خاکستری می‌شوند و فاصله جمع کل را جدا میکند. هیچ ابزاری زیاد فشار نمی‌آورد و برای همین آرام به نظر میرسد. بیشتر درباره این در سلسله‌مراتب تایپوگرافی.
شش راه‌حل در یک جدول
| آماتور | حرفهای | مقدار |
|---|---|---|
| اندازه‌ها با حس انتخاب شده | یک مقیاس تایپ | 1.25 از 16: 20، 25، 31، 39 |
| چند فونت | یک خانواده، دو وزن | معمولی و بولد |
| متن خاکستری روشن | خاکستری خوانا | #6B6B6B روی سفید، هرگز روشن‌تر از #767676 نه |
| جمله‌ها با حروف بزرگ | حروف بزرگ برای برچسب کوتاه | یک تا سه کلمه |
| یک ارتفاع خط برای همه | دو ارتفاع خط | تیتر 1.1، متن بدنه 1.5 |
| همه‌چیز بولد | چهار ابزار سلسله‌مراتب | اندازه، وزن، رنگ، فاصله |
FAQ
مقیاس تایپ خوب برای UI چیست؟
نسبتی بین 1.2 و 1.333 از پایه 16 px. نسبت 1.25 اندازههای 16، 20، 25، 31 و 39 px را میدهد که برای بیشتر صفحهها سطح کافی است.
یک UI چند فونت باید داشته باشد؟
یک خانواده کافی است، در دو وزن. خانواده دوم را فقط با یک وظیفه ثابت اضافه کنید، مثل تیترها، و همه‌جا یکسان از آن استفاده کنید.
ارتفاع خط متن بدنه چقدر باشد؟
حدود 1.5 برای متن بدنه و حدود 1.1 تا 1.2 برای تیترهای بزرگ.
چه خاکستریای روی سفید خوانا است؟
#767676 روشنترین خاکستریای است که حداقل WCAG برای متن بدنه روی سفید را رد میکند. #6B6B6B کمی حاشیه بیشتر میدهد و هنوز ثانویه به نظر میرسد.
آیا متن UI باید همه با حروف بزرگ باشد؟
فقط برای برچسبهای کوتاه یک تا سه کلمهای. متن بلندتر با حروف بزرگ کندتر خوانده میشود چون کلمهها شکلشان را از دست میدهند.
منابع
- مقیاس تایپ: 16 × 1.25ⁿ = 20، 25، 31.25 و 39.06، به‌صورت گردشده نمایش داده شده.
- کنتراست روی سفید، محاسبه‌شده با فرمول WCAG 2:
#B0B0B0برابر 2.2 به 1، #767676برابر 4.5 به 1، #6B6B6Bبرابر 5.3 به 1. WCAG برای متن بدنه 4.5 به 1 می‌خواهد (1.4.3 Contrast (Minimum)). - ابتدا به‌صورت کاروسل در UX Brainy منتشر شد.
Want type that looks this calm across your whole product? Our team builds UI and design systems with the typography decided once.
Get Started
