تایپوگرافی قوی نصف مسیر یک UI خوبه. اگه فونت، سایز و فاصلهها روی هر اسکرین یکنواخت نباشه، حتی بهترین رنگها و آیکونها هم حس «غیرحرفهای» میدن.
توی این پست، خیلی عملی میریم سراغ ساخت یک Type Scale تمیز و قابلاستفاده برای وب / موبایل، بر اساس راهنمای Material Design 3، و پیادهسازیش داخل Figma.
۱️⃣ انتخاب پایهی تایپوگرافی
اول یک Base Size انتخاب کن:
• برای وب: معمولاً 16px
• برای موبایل: میتونی 14–16px رو تست کنی
این Base میشه نقطهی شروع همهی Styleها؛ یعنی مثلاً Body، بعد از اون Headlineها، Caption و غیره.
۲️⃣ ساخت Type Scale منطقی
Material Design پیشنهاد میده چند سطح مشخص داشته باشی:
• Display (بزرگترین تیترها)
• Headline
• Title
• Body
• Label
لازم نیست همهی سطحها رو کپی کنی، ولی میتونی مثلاً این ترکیب رو بسازی:
• Display / H1
• Headline / H2
• Title
• Body (Regular + Medium)
• Caption / Label
بهجای انتخاب تصادفی سایز، یک نسبت ثابت در نظر بگیر (مثلاً 1.25):
• Body: 16px
• Title: 20px (16 × 1.25)
• Headline: 25px تقریباً (20 × 1.25)
• Display: حدود 31px (25 × 1.25)
این نسبت باعث میشه تایپوگرافی «هماهنگ» دیده بشه، نه وصلهپینهای 😄
۳️⃣ ساخت Text Styleها در Figma
حالا نوبت پیادهسازی توی Figma ست:
• یک Text بنویس، فونت اصلی رو انتخاب کن (مثلاً Vazirmatn یا IranYekan).
• اندازه، وزن و Line height رو تنظیم کن.
• از پنل راست روی چهار نقطهی Style کلیک کن و Create style… رو بزن.
• برای نامگذاری، از ساختار سیستمی استفاده کن:
type / display / xl
type / headline / lg
type / title / md
type / body / md
type / label / sm
این مدل نامگذاری (Category / Role / Size) هم توی Design System های بزرگ استفاده میشه و هم توی تیم، سریع قابلفهمه.
۴️⃣ تنظیم Line Height و Letter Spacing
• برای متنهای طولانی (Body)، Line height بین 140% تا 160% خوانایی خوبی میده.
• برای تیترهای بزرگ، میتونی Line height رو کمتر (110–120%) بگیری تا جمعوجورتر بشه.
• توی زبان فارسی معمولاً نیازی به Letter spacing زیاد نیست؛ مگر توی Labelهای کوچک.
یک نکتهی مهم از طرف WCAG: فاصلهی خطوط کافی کمک میکنه متن روی اسکرین خستهکننده و سختخوان نشه، مخصوصاً روی موبایل.
۵️⃣ Type Style برای حالتهای مختلف (Responsive)
خیلی وقتها برای Desktop و Mobile اندازهی متفاوت لازم داری. بهجای ساخت Styleهای کاملاً جدا، میتونی اینطوری نامگذاری کنی:
type / body / md / desktop
type / body / md / mobile
بعد توی Design System بخش Usage بنویس که مثلاً:
• توی Desktop از نسخهی desktop استفاده میشه.
• توی Mobile frameها، Style مربوط به mobile رو اعمال کن.
۶️⃣ ترفند کوچک برای تست سریع
یک Text Sample بساز (چند پاراگراف فارسی + چند تیتر). روی چند Frame با سایز مختلف (مثلاً 1440، 1024، 390) این Styleها رو تست کن. اگر در هر سه حالت خوانا بود و ریتم خوبی داشت، یعنی Scaleت منطقیه.
در نهایت، وقتی یک بار این سیستم رو تمیز بسازی، هر پروژهی جدید فقط چند دقیقه طول میکشه تا تایپوگرافیش سر و شکل حرفهای بگیره ✨
امتحانش کن روی یکی از صفحههای قدیمیات در Figma و ببین فقط با تغییر Type Styleها، چقدر UI مرتبتر و Mature بهنظر میرسه 🙌
🔖 #Design #طراحی #UI #UX #Figma #Typography #UI #Design_System #Material_Design #WCAG
👤 Developix
💎 Channel: @DevelopixDesign
