طراحی سیستم تایپوگرافی: چگونه تایپی بسازیم که مقیاسپذیر باشد
چگونه یک سیستم تایپوگرافی طراحی کنیم که از موبایل تا بیلبورد ثابت بماند. مقیاسها، جفتسازیها و قوانینی که تایپ حرفهای را از انتخاب فونت آماتور جدا میکند.
انتخاب یک فونت، طراحی سیستم تایپوگرافی نیست. انتخاب دو فونت که در کنار هم زیبا به نظر میرسند نیز هنوز طراحی سیستم تایپوگرافی نیست. سیستم تایپوگرافی مجموعهای از قوانین است که تعیین میکند هر قطعه متن در محصول، برند یا رابط کاربری شما چگونه در هر زمینهای که ظاهر میشود، رفتار کند.
بیشتر طراحان از این مرحله صرف نظر میکنند. آنها یک فونت برای عنوان و یک فونت برای متن اصلی انتخاب میکنند، اندازهها را به صورت چشمی تنظیم میکنند و کار را تمام شده میدانند. سپس شش ماه بعد، سایت بازاریابی از یک مقیاس استفاده میکند، اپلیکیشن از مقیاس دیگری، و اسلاید ارائه از مقیاس سومی، و هیچکس نمیتواند توضیح دهد که چرا برند ناسازگار به نظر میرسد، حتی با وجود اینکه لوگو تغییر نکرده است.
این ناسازگاری یک مشکل در سیستم تایپ است. و قابل حل است.
سیستم تایپوگرافی واقعاً شامل چه چیزهایی است؟
یک سیستم تایپوگرافی واقعی پنج چیز را تعریف میکند:
۱. یک مقیاس تایپ. رابطه ریاضی بین اندازههای متن شما. ۲. جفتسازی فونتها. کدام تایپفیسها چه نقشهایی را ایفا میکنند و چرا. ۳. قوانین وزن و سبک. چه زمانی از bold، italic، medium استفاده کنیم و هر وزن چه چیزی را نشان میدهد. ۴. استانداردهای فاصله گذاری. ارتفاع خط، فاصله حروف و فاصله پاراگراف برای هر اندازه. ۵. رفتار واکنشگرا. چگونه هر یک از عناصر بالا در اندازههای مختلف صفحه نمایش تطبیق مییابند.
اگر "سیستم تایپ" شما فاقد هر یک از این موارد باشد، شما انتخاب فونت دارید، نه یک سیستم.
مقیاس تایپ، پایه و اساس است
مقیاس تایپ مجموعهای از اندازههای فونت است که از یک نسبت ریاضی ثابت تولید میشود. به جای انتخاب اندازهها بر اساس حس (۱۶ پیکسل اینجا، ۲۴ پیکسل آنجا، شاید ۳۶ پیکسل برای بخش اصلی)، شما یک اندازه پایه و یک نسبت را انتخاب میکنید، و هر اندازه دیگری از آن نشأت میگیرد.
نسبتهای رایجی که کارآمد هستند:
| نسبت | نام | حس | بهترین برای |
|---|---|---|---|
| 1.125 | Major Second | فشرده، متراکم | داشبوردهای پر از داده، صفحههای کوچک |
| 1.200 | Minor Third | متعادل، آرام | مقالات، مستندات |
| 1.250 | Major Third | سلسله مراتب واضح | سایتهای بازاریابی، نمونه کارها |
| 1.333 | Perfect Fourth | کنتراست قوی | صفحات فرود، تیترها |
| 1.618 | Golden Ratio | چشمگیر | چاپ، طراحی پوستر، بخشهای اصلی |
با یک پایه ۱۶ پیکسلی شروع کنید (پیشفرض مرورگر، قابل دسترس، خوانا) و برای عنوانها به سمت بالا ضرب کنید، برای زیرنویسها و برچسبها به سمت پایین تقسیم کنید. مقیاس Major Third از ۱۶ پیکسل به شما این اندازهها را میدهد: ۱۰ پیکسل، ۱۲.۸ پیکسل، ۱۶ پیکسل، ۲۰ پیکسل، ۲۵ پیکسل، ۳۱.۲۵ پیکسل، ۳۹ پیکسل. به مقادیر تمیز گرد کنید و مقیاسی خواهید داشت که به جای تصادفی بودن، هدفمند به نظر میرسد.
جفتسازی فونت، استراتژی است
اینترنت پر از لیستهای "بهترین جفتسازی فونت" است. بیشتر آنها توصیههای تزئینی هستند که در لباس توصیههای طراحی پنهان شدهاند. جفتسازی واقعی فونت، استراتژیک است.
قوانینی که واقعاً کارآمد هستند:
تضاد در ساختار، هماهنگی در تناسب. یک سنسسریف هندسی را با یک سریف انسانی جفت کنید. تضاد ساختاری، جذابیت بصری ایجاد میکند. ارتفاع x مشترک و تناسب، باعث میشود که آنها به هم تعلق داشته باشند. Inter + Merriweather. DM Sans + Lora. Satoshi + Source Serif.
یک صدا برای هر نقش. تایپفیس عنوان شما شخصیت را منتقل میکند. تایپفیس متن اصلی شما محتوا را منتقل میکند. تایپفیس رابط کاربری شما عملکرد را منتقل میکند. تلاش برای اینکه یک فونت هر سه کار را انجام دهد، باعث میشود که سیستمی داشته باشید که عمومی یا تحت فشار به نظر میرسد.
دو فونت تقریباً همیشه کافی است. سه فونت حداکثر برای هر سیستمی است که نیاز به مدیریتپذیری دارد. هر تایپفیس اضافی، تعداد تصمیمات جفتسازی، تصمیمات وزن و تصمیمات واکنشگرا را که باید بگیرید، چند برابر میکند. اگر فکر میکنید به چهار فونت نیاز دارید، احتمالاً باید از دو فونت بهتر استفاده کنید.
جفتسازی را در متن و نه در نمونه، آزمایش کنید. جفتسازی که روی پوستر نمونه تایپ زیبا به نظر میرسد، ممکن است در داخل یک کامپوننت کارت یا نوار ناوبری از هم بپاشد. قبل از تعهد، آن را در طرحبندی واقعی آزمایش کنید.
قوانین وزن و سبک
وزن، سلسله مراتب است. Bold به معنای مهم است. Medium به معنای پشتیبانیکننده است. Regular به معنای متن اصلی است. Light به معنای تزئینی یا ثانویه است. این ارتباطات در نحوه خواندن افراد نهادینه شده است.
اشتباه در استفاده ناسازگار از وزن است. اگر H2 شما در سایت بازاریابی semibold باشد اما در اپلیکیشن bold باشد، برند متفاوت به نظر میرسد، حتی با وجود اینکه فونت یکسان است. یک سیستم تایپ این موضوع را تثبیت میکند:
- H1: Bold (700). همیشه. این بلندترین صدای شماست.
- H2: Semibold (600) یا Bold (700). یکی را انتخاب کنید، همه جا از آن استفاده کنید.
- H3: Medium (500). کنتراست کافی برای دیده شدن بدون رقابت با H2.
- متن اصلی: Regular (400). خوانا، خنثی، بدون اصطکاک.
- زیرنویسها و برچسبها: Regular (400) یا Medium (500) در اندازههای کوچکتر.
ایتالیک یک وظیفه دارد: تأکید در متن اصلی. استفاده از ایتالیک برای اهداف تزئینی (نقل قولهای برجسته، برچسبهای بخش) معنای آن را کمرنگ میکند و تأکید واقعی را نامرئی میسازد.
فاصله گذاری جایی است که سیستمها از هم میپاشند
ارتفاع خط، فاصله حروف و فاصله پاراگراف جایی است که بیشتر "سیستمهای تایپ" بیصدا از هم میپاشند. اندازههای فونت در محصولات مختلف یکسان است، وزنها یکسان است، اما متن متفاوت به نظر میرسد زیرا فاصله گذاری ناسازگار است.
قوانین ارتفاع خط:
عنوانها به ارتفاع خط فشردهتری (۱.۱ تا ۱.۳) نیاز دارند، زیرا متن بزرگ در نسبتهای متن اصلی فضای عمودی زیادی ایجاد میکند. متن اصلی برای خواندن راحت به ارتفاع خط بازتری (۱.۵ تا ۱.۸) نیاز دارد. اشتباه رایج این است که ۱.۵ را به همه چیز اعمال کنیم، که باعث میشود عنوانها شناور به نظر برسند و متن اصلی در اندازه اشتباه، فشرده احساس شود.
قوانین فاصله حروف:
متن بزرگ (عنوانها، نمایشگر) از فاصله حروف کمی منفی (-۰.۰۱em تا -۰.۰۲em) بهره میبرد. فاصله نوری در اندازههای بزرگ، شکافهایی ایجاد میکند که پهنتر از حد انتظار به نظر میرسند. متن کوچک (زیرنویسها، برچسبها، حروف بزرگ) از فاصله حروف کمی مثبت (+۰.۰۲em تا +۰.۰۵em) بهره میبرد، زیرا ردیابی فشرده در اندازههای کوچک، خوانایی را کاهش میدهد.
فاصله پاراگراف:
از یک ضریب ثابت برای واحد پایه خود استفاده کنید. اگر پایه شما ۱۶ پیکسل با یک گرید ۴ پیکسلی است، فاصله پاراگراف باید ۱۶ پیکسل یا ۲۴ پیکسل باشد، نه یک مقدار دلخواه. این کار ریتم عمودی را در هر صفحه ثابت نگه میدارد.
رفتار واکنشگرا
یک سیستم تایپ که در یک نقطه شکست کار میکند، سیستم نیست. یک اسکرینشات است.
تایپوگرافی سیال اندازههای فونت را به آرامی بین نقاط شکست با استفاده از CSS clamp() مقیاسبندی میکند. به جای پرش از ۱۶ پیکسل به ۱۴ پیکسل در یک نقطه شکست، اندازه درونیابی میشود. این کار از مشکلات طرحبندی که از تغییرات سخت نقاط شکست ناشی میشود، جلوگیری میکند.
font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem);
فشردگی مقیاس در موبایل. نسبت مقیاس دسکتاپ شما (مثلاً ۱.۲۵۰) کنتراست زیادی را در یک صفحه کوچک ایجاد میکند. یک H1 با اندازه ۳۹ پیکسل در دسکتاپ کار میکند. یک H1 با اندازه ۳۹ پیکسل در یک گوشی ۳۷۵ پیکسلی کار نمیکند. راهحل: نسبت را در موبایل فشرده کنید (به ۱.۱۲۵ یا ۱.۱۵۰ کاهش دهید) در حالی که اندازه پایه را ثابت نگه میدارید. سلسله مراتب حفظ میشود، اندازهها تطبیق مییابند.
حداقل اندازههای خوانا. هرگز برای متن اصلی در موبایل از ۱۶ پیکسل کمتر نشوید. هرگز برای هیچ متنی از ۱۲ پیکسل کمتر نشوید. دسترسیپذیری اختیاری نیست، و متن کوچک در صفحههای کوچک برای کاربران واقعی مشکلساز است.
شکستهای رایج سیستم تایپ
بوفه فونت. پنج تایپفیس، بدون منطق. هر صفحه شبیه یک برند متفاوت به نظر میرسد.
وزن یتیم. استفاده از Thin (100) یا Black (900) برای یک عنصر تزئینی و هیچ چیز دیگر. این کار بدون افزودن ارزش سیستمی، نویز بصری ایجاد میکند.
حدس فاصله گذاری. ارتفاع خطوط و فاصله حروف که بین کامپوننتها تغییر میکند، زیرا هیچکس قوانین را تعریف نکرده است.
مقیاس فقط دسکتاپ. در یک ماکاپ ۱۴۴۰ پیکسلی عالی به نظر میرسد. در هر چیزی کوچکتر از هم میپاشد، زیرا هیچکس رفتار واکنشگرا را آزمایش نکرده است.
توکنهای گمشده. یک سیستم تایپ که در فایل Figma تعریف شده اما به توکنهای طراحی یا ویژگیهای سفارشی CSS ترجمه نشده است. سیستم در تئوری وجود دارد اما در کد نه، بنابراین مهندسان هر اسپرینت آن را دوباره اختراع میکنند.
سوالات متداول
سیستم تایپوگرافی در طراحی چیست؟
سیستم تایپوگرافی مجموعه کاملی از قوانین حاکم بر انتخاب فونت، اندازه، وزن، فاصله گذاری و رفتار واکنشگرا در یک برند یا محصول است. این فراتر از انتخاب فونتها میرود تا نحوه مقیاسبندی و حفظ ثبات هر قطعه متن را تعریف کند.
یک سیستم طراحی باید چند فونت داشته باشد؟
دو فونت استاندارد است. سه فونت حداکثر برای بیشتر سیستمها است. یک تایپفیس نمایشی یا عنوان و یک تایپفیس متن اصلی، بخش عمدهای از نیازهای طراحی را پوشش میدهد. افزودن بیشتر، پیچیدگی تصاعدی در تصمیمات جفتسازی، وزن و واکنشگرا ایجاد میکند.
بهترین نسبت مقیاس تایپ چیست؟
هیچ نسبت واحدی به عنوان بهترین وجود ندارد. Major Third (1.250) برای بازاریابی و مقالات به خوبی کار میکند. Minor Third (1.200) برای رابطهای کاربری متراکم مناسب است. Perfect Fourth (1.333) کنتراست قوی برای عنوانها ایجاد میکند. نسبتی را انتخاب کنید که با تراکم محتوا و نیازهای سلسله مراتبی شما مطابقت دارد.
سیستم را قبل از انتخاب فونت بسازید
فونت آخرین تصمیم است، نه اولین. مقیاس خود، قوانین فاصله گذاری، سلسله مراتب وزن و رفتار واکنشگرای خود را تعریف کنید. سپس تایپفیسی را انتخاب کنید که با این محدودیتها مطابقت دارد. یک فونت متوسط در یک سیستم عالی، همیشه از یک فونت عالی بدون سیستم بهتر عمل خواهد کرد.
Need a typography system that holds up across every touchpoint? Let's build it.
Get Started