مقیاس نوع مدولار: چگونه یک سیستم تایپوگرافی سازگار بسازیم

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

اگر بد انجام شود، در نهایت با هفده اندازه فونت مواجه می‌شوید که هیچ‌کس نمی‌تواند از آنها دفاع کند، سرتیترهایی که برای سلسله مراتب با متن بدنه مبارزه می‌کنند، و هر سه ماه یک بار جلسه طراحی مجدد برگزار می‌شود که در آن کسی پیشنهاد می‌دهد "بیایید فقط اندازه‌ها را استاندارد کنیم" و هیچ‌کس نمی‌داند که به چه سمتی استاندارد شود. مقیاس چیزی است که شما به سمت آن استاندارد می‌کنید. این قطعه نحوه ساخت یک نمونه است که از یک محصول واقعی، با نسبت‌های واقعی، یک ساختار توکن واقعی و ترجمه‌های Figma و Tailwind که آن را قابل اجرا می‌کنند، جان سالم به در می‌برد.

مقیاس تایپ ماژولار در واقع چیست؟

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

یک اندازه پایه، مثلاً ۱۶ پیکسل، و یک نسبت، مثلاً ۱.۲۵ را انتخاب کنید. ۱۶ را در ۱.۲۵ ضرب کنید و ۲۰ می‌شود. ۲۰ را در ۱.۲۵ ضرب کنید و ۲۵ می‌شود. ادامه دهید و ۳۱، ۳۹، ۴۹، ۶۱ خواهید داشت. ۱۶ را بر ۱.۲۵ تقسیم کنید و ۱۲.۸ می‌شود. آن را بر ۱.۲۵ تقسیم کنید و ۱۰.۲۴ خواهید داشت. این مقیاس است. هشت اندازه، یک پایه، یک نسبت، سازگاری کامل ریاضی.

دلیل اینکه این روش کار می‌کند، روان‌فیزیکی است. ادراک بصری انسان به نسبت‌ها پاسخ می‌دهد، نه به تفاوت‌های مطلق. پرش از ۱۲ به ۱۴ تقریباً مانند پرش از ۲۴ به ۲۸ خوانده می‌شود، زیرا هر دو تقریباً یک گام ضربی هستند. یک مقیاس خطی (۱۲، ۱۴، ۱۶، ۱۸، ۲۰، ۲۲) در بالا تنگ و در پایین بیش از حد فاصله‌دار به نظر می‌رسد. یک مقیاس مدولار یکنواخت به نظر می‌رسد، زیرا نسبتاً همینطور است.

همین منطق، فواصل موسیقی (اکتاوها ۲ برابر، پنجم‌ها ۱.۵ برابر، چهارم‌ها ۱.۳۳۳ برابر)، دیافراگم‌های عکاسی و بیشتر نظریه تناسب معماری را تضمین می‌کند. تایپ همین را قرض گرفته است. نسبت‌های نامگذاری شده‌ای که در این مقاله خواهید دید (دوم کوچک، چهارم کامل، نسبت طلایی) به دلیلی از موسیقی وارد شده‌اند: آنها همان نوع رابطه ادراکی را توصیف می‌کنند.

پنج نسبتی که محصولات واقعی را پوشش می‌دهند

بیشتر محصولات بین ۱.۱۲۵ تا ۱.۶۱۸ هستند و هر نسبت سیگنال چگالی خاصی را حمل می‌کند.

پنج نسبتی که تقریباً هر رابط واقعی را پوشش می‌دهند:

| نسبت | نام | سیگنال چگالی | پیاده‌سازی واقعی |

|------:|------|----------------|---------------------| | ۱.۱۲۵ | دوم کوچک | فشرده، متراکم، پر از داده | Vercel، Geist، اکثر داشبوردهای مدیریتی | | ۱.۲ | سوم کوچک | جمع و جور، متعادل | مقیاس پیش‌فرض Tailwind | | ۱.۲۵ | سوم بزرگ | سرمقاله استاندارد | Stripe، نقش‌های بدنه متریال ۳ | | ۱.۳۳۳ | چهارم عالی | سخاوتمندانه، حس مجله | سایت‌های سرمقاله، وبلاگ‌های طولانی | | ۱.۶۱۸ | نسبت طلایی | نمایشی، مبتنی بر نمایش | صفحات بازاریابی، سایت‌های قهرمان‌محور |

گاهی اوقات دو مورد دیگر نیز ظاهر می‌شوند. ۱.۴۱۴ (چهارم افزوده، که جذر ۲ و نسبت پشت کاغذ A4 است) بین چهارم کامل و پنجم کامل قرار می‌گیرد و انتخابی معقول برای محصولاتی با حس مجله‌ای است که یک گام درام بیشتر از ۱.۳۳۳ می‌خواهند. ۱.۵ (پنجم کامل) از ۱.۳۳۳ بلندتر و از ۱.۶۱۸ آرام‌تر است و پیش‌فرض بسیاری از تولیدکنندگان صفحه بازاریابی است.

شما می‌توانید از نسبت‌های خارج از این محدوده استفاده کنید، اما معمولاً نباید این کار را انجام دهید. زیر ۱.۱، گام‌ها آنقدر کوچک هستند که در یکدیگر فرو می‌روند، نمی‌توانید عنوان ۳ را از عنوان ۴ در یک نگاه تشخیص دهید. بالای ۱.۷، مقیاس آنقدر سریع افزایش می‌یابد که اندازه‌های میانی قابل استفاده شما تمام می‌شود. طراحانی که محدوده وسیع‌تری نسبت به ۱.۶۱۸ می‌خواهند، معمولاً مشکل اشتباهی را حل می‌کنند، آنها دو مقیاس می‌خواهند، نه یک مقیاس بزرگتر.

نسبت تراکم مورد نیاز خود را انتخاب کنید

یک برنامه داده متراکم، نسبت فشرده می‌خواهد، یک سایت تحریریه، نسبت گسترده می‌خواهد، و تماس اشتباه در همه جا در پایین‌دست نشان داده می‌شود.

اگر محصول یک داشبورد، یک پنل مدیریت، یک CRM، یک ابزار تحلیلی یا هر چیزی است که کاربر ساعت‌ها ردیف‌هایی از اطلاعات فشرده را می‌خواند، به طور پیش‌فرض روی ۱.۱۲۵ یا ۱.۲ تنظیم کنید. نسبت فشرده به این معنی است که اندازه عناوین توجه را از داده‌ها منحرف نمی‌کند. سلسله مراتب همچنان کار می‌کند زیرا سلسله مراتب در این مقیاس بیشتر از وزن، رنگ و فاصله ناشی می‌شود، نه از اندازه.

اگر محصول یک صفحه بازاریابی SaaS، یک سایت محتوا، یک صفحه محصول یا یک سطح مستندسازی است، به طور پیش‌فرض روی ۱.۲۵ یا ۱.۳۳۳ تنظیم کنید. نسبت‌های میانی به اندازه کافی جذابیت تیتر را ایجاد می‌کنند تا بخش‌ها را از هم جدا کنند بدون اینکه متن بدنه در مقایسه کوچک به نظر برسد. این جایی است که اکثر محصولات B2B در آن قرار دارند و جایی است که Tailwind، Material و Stripe همگی همگرا شده‌اند.

اگر محصول شما سرمقاله‌ای، مجله‌ای یا نمایشی است، مانند یک نشریه طولانی، یک سایت مد یا یک میکروسایت کمپین، به طور پیش‌فرض روی ۱.۴۱۴ یا ۱.۶۱۸ تنظیم کنید. نسبت عریض به این معنی است که تیترها مانند تیترهای اصلی به نظر می‌رسند، از آن نوعی که یک بلوک کامل قهرمان را به خود اختصاص می‌دهند. متن اصلی می‌تواند منطقی باقی بماند زیرا فاصله بین قهرمان و متن اصلی کار را انجام می‌دهد.

اشتباه این است که یک نسبت را انتخاب کنید زیرا چشمگیر به نظر می‌رسد (نسبت طلایی نسبت معروفی است) و آن را به محصولی تحمیل کنید که نیازی به آن درام ندارد. نسبت ۱.۶۱۸ در CRM نویز غیرقابل خواندن است. نسبت ۱.۱۲۵ در یک سایت سرمقاله‌ای ضعیف به نظر می‌رسد. نسبتی را که محصول شما واقعاً به آن نیاز دارد انتخاب کنید، سپس آن را اعمال کنید.

قبل از مقیاس‌بندی، اندازه پایه را قفل کنید

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

به طور پیش‌فرض روی ۱۶ پیکسل برای متن اصلی در وب تنظیم شده است. پیش‌فرض مرورگر ۱۶ است، شیوه‌نامه‌ی عامل کاربر ۱۶ است، اندازه‌ی متوسط ​​ترجیحی برای خواندن برای بزرگسالان ۱۶ است، و راهنمای دسترسی‌پذیری از WCAG و دستورالعمل‌های رابط کاربری Apple هر دو ۱۶ را به عنوان کف متن اصلی در نظر می‌گیرند. اگر مخاطب مسن‌تر است یا اگر محصول خواندن زیادی دارد، می‌توانید به ۱۷ یا ۱۸ بروید، اما هرگز نباید در متن اصلی از ۱۶ پایین‌تر بروید.

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

برای موبایل، می‌توانید پایه را کوچک‌تر کنید (۱۵ یا ۱۶) و به واحدهای نسبی تکیه کنید. برای چاپ، پایه معمولاً ۱۱ یا ۱۲ پوینت است و نسبت‌ها ثابت می‌مانند. برای سطوح مستندسازی با بلوک‌های کد، بدنه را روی ۱۶ و کد تک‌رنگ را روی ۱۴ تنظیم کنید و نسبت یکسانی را به مقیاس کد اعمال کنید. پایه برای هر متوسط ​​و نسبت برای هر محصول است و هر دو تصمیمی هستند که شما یک بار می‌گیرید.

یک قانون دیگر. پایه را در وب بر اساس rem تنظیم کنید، نه px. کل مقیاس باید بر اساس rem بیان شود تا تنظیمات اندازه فونت کاربر و ابزارهای دسترسی (بزرگنمایی، حالت خواندن، مقیاس‌بندی مرورگر) به درستی پخش شوند. Tailwind از قبل این کار را انجام می‌دهد. Material این کار را انجام می‌دهد. نوع پویای iOS Apple معادل آن را انجام می‌دهد. اگر مقیاس شما بر اساس پیکسل کدگذاری شده باشد، در حال مبارزه با پلتفرم هستید.

مراحل را ایجاد کنید، آنها را بر اساس نقش برچسب‌گذاری کنید

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

یک پایه ۱۶ پیکسلی و نسبت ۱.۲۵ را در نظر بگیرید. مراحل عبارتند از:

• ۱۰ (عنوان خیلی کوچک، پاورقی)
• ۱۳ (متن کوچک، متن ثانویه)
• ۱۶ (بدنه، پایه)
• ۲۰ (سرصفحه، بدنه بزرگ)
• ۲۵ (h4، عنوان کوچک)
• ۳۱ (h3، عنوان میانی)
• ۳۹ (h2، عنوان بزرگ)
• ۴۹ (h1، عنوان صفحه)
• ۶۱ (نمایش، قهرمان)

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

حالا آنها را نامگذاری کنید. نه "text-31" یا "39px". آنها را بر اساس نقش نامگذاری کنید: عنوان، کوچک، بدنه، سرصفحه، h4، h3، h2، h1، نمایش. نام نقش‌ها قرارداد مهندسی است، نه مقادیر پیکسل. اگر پایه یا نسبت تغییر کند، مقدار پیکسل می‌تواند تغییر کند، اما نقش ثابت می‌ماند. h1 همیشه بزرگترین عنوان است. بدنه همیشه پایه است. عنوان همیشه کوچکترین متن خوانا است.

این چیزی است که یک مقیاس را به جای یک صفحه گسترده، به یک سیستم تبدیل می‌کند. یک طراح می‌گوید "این بدنه است" و یک مهندس متن-بدنه را ارسال می‌کند. اگر مقیاس در سه ماهه بعدی تغییر کند، بدنه همچنان به معنای بدنه است و هر جزء به طور خودکار مقدار جدید را دریافت می‌کند. هیچ کس مجبور نیست هر ۱۶ را در کدبیس پیدا کند و آن را به ۱۷ تغییر دهد.

طراحی متریال ۳ مقیاس خود را بر اساس نقش نامگذاری می‌کند: نمایش، تیتر، عنوان، برچسب، بدنه، با انواع اندازه (بزرگ، متوسط، کوچک) در داخل هر کدام. HIG Apple عنوان بزرگ، عنوان ۱، عنوان ۲، عنوان ۳، تیتر، بدنه، توضیحات، زیرعنوان، پاورقی، عنوان ۱، عنوان ۲ را ارسال می‌کند. Tailwind متن-xs را از طریق text-9xl ارسال می‌کند، که به جای نامگذاری نقش، اندازه تی‌شرت است و جایی است که پیش‌فرض‌های Tailwind مسلماً ضعیف‌تر از Material هستند. اکثر تیم‌هایی که Tailwind را اتخاذ می‌کنند، در نهایت نام‌های مستعار نقش‌محور را روی کلاس‌های تی‌شرت لایه‌بندی می‌کنند.

مقیاس را به توکن‌های طراحی تبدیل می‌کنند

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

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

1. توکن‌های خام. مقادیر اندازه واقعی. font-size-100، font-size-200 و غیره، یا با نام‌هایی مانند font-size-body، font-size-h1. اینها منبع حقیقت هستند.

2. توکن‌های معنایی. نام‌های مستعاری که قصد را بیان می‌کنند. text-heading-page، text-body-default، text-caption. توکن‌های معنایی به توکن‌های خام اشاره می‌کنند. کامپوننت‌ها از توکن‌های معنایی استفاده می‌کنند، نه مستقیماً از توکن‌های خام.

۳. توکن‌های کامپوننت. اتصال‌ها درون کامپوننت‌های خاص. card-title-size به text-heading-card اشاره می‌کند که به font-size-200 اشاره دارد. توکن‌های کامپوننت به شما امکان لغو هر کامپوننت را بدون ایجاد اختلال در سیستم می‌دهند.

یک فایل توکن JSON حداقلی برای مقیاس ۱۶ پایه و نسبت ۱.۲۵:

{
  "font-size": {
    "raw": {
      "100": { "value": "0.625rem" },
      "200": { "value": "0.8125rem" },
      "300": { "value": "1rem" },
      "400": { "value": "1.25rem" },
      "500": { "value": "1.5625rem" },
      "600": { "value": "1.9375rem" },
      "700": { "value": "2.4375rem" },
      "800": { "value": "3.0625rem" },
      "900": { "value": "3.8125rem" }
    },
    "semantic": {
      "caption":  { "value": "{font-size.raw.100}" },
      "small":    { "value": "{font-size.raw.200}" },
      "body":     { "value": "{font-size.raw.300}" },
      "lead":     { "value": "{font-size.raw.400}" },
      "h4":       { "value": "{font-size.raw.500}" },
      "h3":       { "value": "{font-size.raw.600}" },
      "h2":       { "value": "{font-size.raw.700}" },
      "h1":       { "value": "{font-size.raw.800}" },
      "display":  { "value": "{font-size.raw.900}" }
    }
  }
}

این ساختار قابل حمل است. Style Dictionary، Tokens Studio، Specify، Supernova، همگی این فرمت را می‌خوانند و متغیرهای Figma، متغیرهای CSS، پیکربندی Tailwind، ثابت‌های Swift iOS، XML اندروید، هر آنچه پلتفرم‌ها نیاز دارند را منتشر می‌کنند. توکن‌ها منبع هستند. هر چیز دیگری تولید می‌شود.

مقیاس را به متغیرهای Figma منتقل کنید.

متغیرهای Figma جایی هستند که مقیاس برای تیم طراحی در آن قرار دارد و به صورت یک مجموعه تایپوگرافی واحد با نام‌های مستعار معنایی ساختار یافته است.

یک مجموعه متغیر به نام Typography ایجاد کنید. درون آن، برای هر اندازه خام یک متغیر عددی اضافه کنید: size/100 تا size/900، با مقادیر پیکسلی معادل rem (10، 13، 16، 20، 25، 31، 39، 49، 61). سپس یک ردیف دوم از نام‌های مستعار اضافه کنید: text/caption، text/small، text/body، text/lead، text/h4، text/h3، text/h2، text/h1، text/display. هر نام مستعار به یک متغیر اندازه خام اشاره می‌کند.

سپس سبک‌های متن را ایجاد کنید، یکی برای هر نقش. Heading/H1 از text/h1 برای اندازه، فونت عنوان شما برای خانواده، وزن عنوان شما برای وزن، نسبت ارتفاع خط عنوان شما برای پیشرو استفاده می‌کند. Body/Default از text/body، فونت بدنه شما، وزن معمولی استفاده می‌کند. برای هر نقش تکرار کنید.

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

اگر از حالت‌های چگالی چندگانه پشتیبانی می‌کنید، این را با تنظیمات حالت‌ها ترکیب کنید. حالت "فشرده" می‌تواند متغیرهای اندازه خام را نادیده بگیرد تا از نسبت ۱.۱۲۵ برای یک تجربه متراکم‌تر استفاده کند. حالت "راحت" می‌تواند از ۱.۲۵ استفاده کند. نام‌های مستعار ثابت می‌مانند. اجزا تغییر نمی‌کنند. مقیاس فقط زیر آنها تغییر می‌کند. این چیزی است که سیستم برای شما می‌خرد.

مقیاس را به Tailwind CSS وصل کنید

پیکربندی Tailwind جایی است که مقیاس برای تیم مهندسی در آن قرار دارد و باید دقیقاً ساختار متغیر Figma را منعکس کند.

مقدار پیش‌فرض fontSize در Tailwind را با مقیاس خود در tailwind.config.js جایگزین کنید:

module.exports = {
  theme: {
    fontSize: {
      'caption':  ['0.625rem',  { lineHeight: '1rem' }],
      'small':    ['0.8125rem', { lineHeight: '1.25rem' }],
      'body':     ['1rem',      { lineHeight: '1.5rem' }],
      'lead':     ['1.25rem',   { lineHeight: '1.75rem' }],
      'h4':       ['1.5625rem', { lineHeight: '2rem' }],
      'h3':       ['1.9375rem', { lineHeight: '2.375rem' }],
      'h2':       ['2.4375rem', { lineHeight: '2.875rem' }],
      'h1':       ['3.0625rem', { lineHeight: '3.5rem' }],
      'display':  ['3.8125rem', { lineHeight: '4.25rem' }],
    },
  },
}

حالا text-h1 در نشانه‌گذاری به همان معنی است که Heading/H1 در Figma به آن اشاره دارد. نام کلاس قرارداد است. مهندسان اندازه‌ها را انتخاب نمی‌کنند، آنها نقش‌ها را انتخاب می‌کنند و نقش در زمان ساخت به مقدار پیکسل مناسب تبدیل می‌شود.

ارتفاع خطوط در اینجا دلخواه نیست. الگو به این صورت است: ارتفاع خط بدنه برای اندازه‌های کوچک، فاصله بین خطوط برای بدنه و ابتدای متن کمتر، و دوباره فاصله بین خطوط برای عنوان‌ها. یک قانون رایج این است که ارتفاع خط بدنه ۱.۵، ارتفاع خط عنوان ۱.۱ تا ۱.۲، با یک انتقال از ۱.۳ تا ۱.۴ در اطراف اندازه‌های ابتدای متن و h4. می‌توانید این را به عنوان یک مقیاس دیگر (یک مقیاس پیشرو) یا به عنوان مقادیر هر مرحله بیان کنید، اما رابطه بین اندازه و پیشرو باید عمدی باشد، نه چشم‌بسته.

اگر می‌خواهید کلاس‌های پیش‌فرض Tailwind را در کنار مقیاس خود (برای کد قدیمی یا اجزای شخص ثالث) در دسترس نگه دارید، به جای جایگزینی کامل fontSize از extend استفاده کنید. اما هدف بلندمدت یک مقیاس است، نه دو. دو مقیاس نوع در یک محصول فقط یک مقیاس نوع و مجموعه‌ای از موارد تصادفی است.

مقیاس را با یک راهنمای جفت کردن فونت واقعی برای انتخاب فونت و یک چارچوب سیستم طراحی که مقیاس را در متن قرار می‌دهد، جفت کنید. مقیاس یک بخش از سیستم تایپوگرافی است، انتخاب فونت و نگاشت نقش بخش‌های دیگر هستند. به یک مقیاس کاری، توکن‌های واقعی و Figma + Tailwind نیاز دارید که از روز اول به درستی تنظیم شده باشد؟ استخدام ⟦برند ۰⟧. ما سیستم‌های نوع کامل را از طریق BrandBrainy و UXBrainy با توکن‌ها، متغیرهای Figma و پیکربندی Tailwind که به عنوان یک تحویل به هم متصل شده‌اند، ارسال می‌کنیم.

قوانین مدیریتی که یک مقیاس را زنده نگه می‌دارند

هر مقیاس نوع مرده به طور مشابه، به استثنا، از بین رفت.

سه قانون، یک مقیاس را طولانی‌تر از هر ابزاری زنده نگه می‌دارند:

قانون اول: هر کامپوننت جدید نقش‌ها را انتخاب می‌کند، نه اندازه‌ها. یک طراح که یک کارت می‌سازد، Body را برای body، H3 را برای title و Caption را برای timestamp انتخاب می‌کند. آنها font-size: 18px را در inspector تایپ نمی‌کنند. اگر نقش وجود نداشته باشد، آنها یک نقش جدید را از طریق سیستم پیشنهاد می‌دهند، نه یک تغییر یکباره.

قانون دوم: استثناها یک نام و یک تاریخ دریافت می‌کنند. اگر تیم بازاریابی به یک تیتر ۷۲ پیکسلی برای یک قهرمان در صفحه کمپین نیاز داشته باشد و اندازه نمایش ۶۱ پیکسل باشد، استثنا نامگذاری (hero-marketing-q3-launch) و تاریخ‌گذاری می‌شود. پس از انتشار کمپین، یا استثنا در مقیاس قرار می‌گیرد (اگر قابل استفاده مجدد باشد) یا حذف می‌شود (اگر یک‌باره باشد). هیچ لغو ناشناسی وجود ندارد.

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

تیم‌هایی که مقیاس نوع خود را از دست می‌دهند، همیشه داستان مشابهی را بعداً تعریف می‌کنند. کسی به اندازه ۱۷ پیکسل برای یک دکمه نیاز داشت، کسی دیگر به اندازه ۲۱ پیکسل برای یک بنر نیاز داشت، شش ماه بعد چهل و هفت اندازه فونت در پایگاه کد وجود دارد و هیچ‌کس نمی‌تواند به شما بگوید کدام یک واقعی هستند. مقیاس از بین رفته است. آنچه باقی مانده است، یک گورستان اندازه فونت است.

شما با در نظر گرفتن مقیاس به عنوان یک قرارداد، نه یک صفحه گسترده، از این امر جلوگیری می‌کنید. این قرارداد توسط ابزارها (سبک‌های Figma، کلاس‌های Tailwind، قوانین lint) و با بررسی اجرا می‌شود. قرارداد در بررسی سه ماهه مورد مذاکره مجدد قرار می‌گیرد. هر چیزی خارج از قرارداد یک اشکال محسوب می‌شود.

سوالات متداول

مقیاس نوع ماژولار چیست؟

مقیاس نوع ماژولار سیستمی است که در آن هر اندازه فونت در یک محصول با اعمال یک نسبت واحد به یک اندازه پایه واحد تولید می‌شود. یک پایه، معمولاً ۱۶ پیکسل برای وب، انتخاب کنید، یک نسبت، معمولاً بین ۱.۱۲۵ تا ۱.۶۱۸، و پایه را به طور مکرر در نسبت ضرب یا تقسیم کنید تا مراحل تولید شوند. نتیجه، مقیاسی است که در آن هر اندازه از نظر ریاضی با هر اندازه دیگر مرتبط است، که به تایپوگرافی حس سازگاری درونی می‌دهد که انتخاب‌های پیکسلی دلخواه نمی‌توانند.

از چه نسبتی باید برای مقیاس نوع خود استفاده کنم؟

نسبت چگالی مورد نیاز محصول خود را انتخاب کنید. برای محصولات داده‌ای متراکم مانند داشبوردها و ابزارهای مدیریتی که در آنها عنوان‌ها نباید توجه را از داده‌ها منحرف کنند، از ۱.۱۲۵ یا ۱.۲ استفاده کنید. برای صفحات بازاریابی SaaS استاندارد، سایت‌های محتوایی و صفحات محصول، که بیشتر محصولات B2B در آن‌ها قرار دارند، از ۱.۲۵ یا ۱.۳۳۳ استفاده کنید. برای محصولات سرمقاله‌ای، مجله‌ای یا محصولات نمایشی که تیترها باید حس تیتر را القا کنند، از ۱.۴۱۴ یا ۱.۶۱۸ استفاده کنید. رایج‌ترین اشتباه، انتخاب یک نسبت به دلیل چشمگیر بودن آن است، نه به دلیل تناسب آن با محصول.

یک مقیاس تایپ باید چند اندازه داشته باشد؟

بیشتر مقیاس‌های آماده تولید، هفت تا نه اندازه دارند. عنوان، کوچک، بدنه، لید، h4، h3، h2، h1 و نمایش تقریباً تمام سطح واقعی محصول را پوشش می‌دهند. پایین رفتن از هفت اندازه، شکاف‌هایی ایجاد می‌کند که طراحان با لغوهای یک‌باره آن‌ها را پر می‌کنند. بالا رفتن از ده اندازه، مقیاس را تا جایی نازک می‌کند که برخی از اندازه‌ها هرگز استفاده نمی‌شوند و نگهداری سیستم سخت‌تر می‌شود. هفت تا نه نقطه مطلوب است و نام نقش‌ها باید توصیف کنند که هر اندازه برای چیست، نه مقدار پیکسل آن.

آیا باید از rem یا px برای مقادیر مقیاس تایپ استفاده کنم؟

برای وب از rem استفاده کنید. اندازه فونت ریشه مرورگر به طور پیش‌فرض ۱۶ پیکسل است، اما کاربر می‌تواند آن را از طریق تنظیمات دسترسی و تنظیمات مرورگر تغییر دهد و یک مقیاس مبتنی بر rem به طور خودکار به این تنظیمات احترام می‌گذارد. مقیاس‌های مبتنی بر پیکسل آنها را نادیده می‌گیرند. Tailwind، Material Design و اکثر سیستم‌های طراحی مدرن، همگی به همین دلیل از rem استفاده می‌کنند. برای پلتفرم‌های موبایل، از پلتفرم پیروی کنید: iOS از نقاط استفاده می‌کند و از نوع پویا پشتیبانی می‌کند، اندروید از پیکسل‌های مستقل از مقیاس (sp) استفاده می‌کند. اصل کار یکسان است، از واحد نسبی پلتفرم استفاده کنید، نه واحدهای مطلق.

تفاوت بین مقیاس نوع ماژولار و توکن‌های طراحی چیست؟

مقیاس نوع ماژولار ریاضی است، توکن‌های طراحی نحوه ارسال ریاضی هستند. مقیاس مقادیر (۱۰، ۱۳، ۱۶، ۲۰، ۲۵، ۳۱، ۳۹، ۴۹، ۶۱) را تعریف می‌کند. توکن‌ها لایه نامگذاری شده‌ای هستند که به بقیه سیستم طراحی اجازه می‌دهد بدون کدگذاری سخت، به آن مقادیر ارجاع دهند. شما می‌توانید یک مقیاس بدون توکن داشته باشید، اما این مقیاس در یک پایگاه کد واقعی دوام نخواهد آورد. می‌توانید توکن‌ها را بدون مقیاس داشته باشید، اما مقادیر دلخواه خواهند بود. سیستم کامل، مقیاسی است که به صورت توکن بیان می‌شود، با لایه‌های خام، معنایی و کامپوننت، و به Figma ارسال می‌شود و از طریق همان منبع کدنویسی می‌شود.

الگویی که اکثر مقیاس‌های تایپی از دست می‌دهند

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

تیم‌هایی که این کار را درست انجام می‌دهند، نسبتی را انتخاب نمی‌کنند و متوقف نمی‌شوند. آنها نسبتی را انتخاب می‌کنند، مقیاس را می‌سازند، آن را به صورت توکن ارسال می‌کنند، آن را به Figma و Tailwind متصل می‌کنند و سپس آن را از طریق یک بررسی سه ماهه و یک قانون بدون استثنا که دارای قدرت است، اجرا می‌کنند. مقیاس، نتیجه قابل تحویل نیست، نظم و انضباط است. نتیجه قابل تحویل چیزی است که نظم و انضباط را ممکن می‌سازد.

تیم‌هایی که این کار را اشتباه انجام می‌دهند، با مقیاس به عنوان یک تابلوی خلق و خو رفتار می‌کنند. آنها نسبت‌های زیبایی را در یک ماکت پینترست انتخاب می‌کنند، یک سند مشخصات استاتیک ارسال می‌کنند و شش ماه بعد متوجه می‌شوند که تیم مهندسی هرگز آن را نپذیرفته است زیرا سند مشخصات کد اجرایی نبوده است. یا مقیاس را به Figma ارسال می‌کنند و هرگز به Tailwind نمی‌فرستند، و فایل‌های طراحی و برنامه تولید از هم جدا می‌شوند تا اینکه به دو محصول متفاوت با فونت‌های مختلف تبدیل می‌شوند. یا به هر دو ارسال می‌کنند و هرگز مدیریت نمی‌کنند، و استثنائات در عرض یک سال از قوانین بیشتر می‌شود.

راه میانبر این است که از روز اول با مقیاس به عنوان یک قرارداد رفتار کنید. محاسبات ریاضی مراحل را تعیین می‌کند. توکن‌ها مراحل را قابل حمل می‌کنند. متغیرهای Figma و پیکربندی Tailwind مراحل را در هر دو طرف خط طراحی-مهندسی قابل استفاده می‌کنند. مدیریت، مراحل را پس از راه‌اندازی زنده نگه می‌دارد. هر بخش از سیستم یک کار را انجام می‌دهد و اگر هر یک از آنها از دست برود، سیستم از کار می‌افتد.

اگر یک مقیاس نوع ماژولار کارآمد، توکن‌های واقعی، متغیرهای واقعی Figma، پیکربندی واقعی Tailwind و یک طرح مدیریتی که مقیاس را پس از راه‌اندازی حفظ کند، می‌خواهید، استخدام ⟦برند ۰⟧. ما سیستم‌های طراحی کامل را از طریق BrandBrainy و UXBrainy ارائه می‌دهیم، با مقیاس‌های نوع که از روز اول به صورت توکن طراحی شده‌اند، سیستم تایپوگرافی به پالت رنگ برند متصل شده است، و قوانینی که سیستم را پس از ارسال تیم زنده نگه می‌دارند.