تایپوگرافی
متن‌ها برای انتقال مفاهیم اصلی، کمک به کاربر برای تعامل با محصول و همچنین ایجاد تجربهٔ کاربرِ مناسب اهمیت ویژه‌ای دارند. تایپوگرافی با توجه به جزئیاتی مانند اندازهٔ فونت‌ها، استایل و رنگ آن‌ها، باید محتوای متن‌ها را به‌راحت‌ترین و خواناترین شکل ممکن به کاربر انتقال دهد.
مفاهیم
اندازه فونت (Font Size)
اندازهٔ کاراکترهای فونت را نشان می‌دهد و کوچکترین واحد اندازه‌گیری آن پوینت (pt)، معادل ۱.۷۲ اینچ است. در تایپ دیجیتال حروف در فضایی فرضی به نام em square قرار می‌گیرند که ابعاد آن را اندازهٔ فونت مشخص می‌کند. برای مثال حروف فونتی با اندازهٔ ۱۰pt در فضایی با ابعاد ۱۰pt قرار می‌گیرند.
انتخاب اندازهٔ فونت مناسب در خوانایی متن بسیار مهم است. به‌علاوه می‌توان با استفاده از فونت‌هایی با اندازهٔ متفاوت و ایجاد تضاد، مفاهیم را سریع‌تر به کاربر منتقل کرد. اندازهٔ فونت‌های استفاده‌شده و واحدهای آن‌ها در دیزاین سیستم سنّت به شکل زیر است:
| Web | Android | iOS |
|---|---|---|
| 0.5rem | - | - |
| 0.625rem | - | - |
| 0.75rem | 12pt | 12sp |
| 0.875rem | 14pt | 14sp |
| 1rem | 16pt | 16sp |
| 1.125rem | 18pt | 18sp |
| 1.25rem | 20pt | 20sp |
| 1.5rem | - | - |
| 2rem | - | - |
| 3rem | - | - |
| واحد rem در مرورگرها براساس اندازهٔ فونت root element تعیین می‌شود که به صورت پیش‌فرض 16px است. | ||
وزن فونت (Font Weight)
نسبت ضخامت کاراکتر به ارتفاع آن، وزن فونت را تعیین می‌کند. وزن‌ها در مقیاس عددی در بازه‌ای بین ۱۰۰ تا ۹۰۰ (۱۰۰، ۲۰۰، ۳۰۰، ... ، ۹۰۰) قرار می‌گیرند. برای مثال مقدار فونت نرمال ۴۰۰ و مقدار فونت bold معادل ۷۰۰ است. برای اغلب فونت‌ها همهٔ این ۹ حالت تعریف نشده است.
در دیزاین سیستم سنّت از وزن‌های Medium ،Regular ،Light و Bold خانوادهٔ فونت IRANSans استفاده شده است. سلسله مراتب متن به‌وسیلهٔ تفاوت در وزن فونت متمایز می شود.
ارتفاع خط (Line Height)
به فاصلهٔ عمودی بین خطوط، ارتفاع خط گفته می‌شود. رایج‌ترین مقدار برای ارتفاع خط ۱.۵em است. در دیزاین سیستم سنّت این مقدار بدون واحد (unitless) و با مقادیر ۱.۵ در متنهای عنوان و ۲ در متنهای بدنه در نظر گرفته شده است.
کامپوننت‌ها و کاربردهای آن
متنهای عنوان اصلی (Headings)
تایپوگرافی برای تگ‌های عنوان HTML اندازه و وزن فونت و ارتفاع خط را مشخص کرده است تا متن در حفظ خوانایی و سلسله مراتب موثر و قاعده‌مند عمل کند.
متن زیرعنوان (Subtitle Text)
برای نمایش عنوان‌ها در بخش‌‌های مختلف رابط کاربر و همچنین عنوان‌های ساختار کامپوننت‌ها، از متن عنوان استفاده می‌شود.
متن بدنه (Body Text)
در کامپوننت متن بدنه از فونت‌های کوچکتری نسبت به متن عنوان استفاده می‌شود. این کامپوننت برای متنهای طولانی کاربرد دارد و در بدنهٔ اصلی و نیز بخش توضیحات در ساختار کامپوننت‌ها استفاده می‌شود.
متن زیرنویس (Caption Text)
این کامپوننت برای نوشتن توضیح عکس‌ها، جدول‌ها و توضیحات داخل کامپوننت‌های کوچک مانند ابزار راهنما کاربرد دارد و کوچکترین اندازهٔ فونت برای آن استفاده می‌شود.
دسترس‌پذیری
رنگ‌های متن
رنگ‌های متن دیزاین سیستم سنّت براساس دستورالعمل‌های دسترس‌پذیری محتوای وب (WCAG) تنظیم می‌شوند. با ایجاد کنتراست رنگ سطح AA (حداقل نسبت کنتراست ۴.۵:۱) میان رنگ متنهای اصلی و رنگ پس‌زمینه، خوانایی محتوای متنی صفحات تضمین می‌شود.