لوگوی توپُر دیزاین سیستم سنّت

تایپوگرافی

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

مفاهیم

اندازه فونت (Font Size)

اندازه فونت‌های استفاده شده در دیزاین سیستم سنّت
اندازه فونت‌های دیزاین سیستم سنّت
WebAndroidiOS
0.5rem--
0.625rem--
0.75rem12pt12sp
0.875rem14pt14sp
1rem16pt16sp
1.125rem18pt18sp
1.25rem20pt20sp
1.5rem--
2rem--
3rem--
واحد rem در مرورگرها براساس اندازهٔ فونت root element تعیین می‌شود که به صورت پیش‌فرض 16px است.

وزن فونت (Font Weight)

وزن‌های فونت استفاده شده در دیزاین سیستم سنّت

ارتفاع خط (Line Height)

گوناگونی ارتفاع‌های خط در دیزاین سیستم سنّت

کامپوننت‌ها و کاربردهای آن

متن پیشرو (Hero Text)

بزرگ‌ترین متن در صفحه متن پیشرو است که در هر صفحه فقط ۱ بار از آن استفاده می‌شود. کاربرد این کامپوننت برای متن‌های مهم و کوتاهی است که روی محتوای آن‌ها تأکید زیادی وجود دارد. بنابراین با استفاده از کامپوننت متن پیشرو بیشترین وزن بصری به متن داده می‌شود. شعار سازمانی در صفحات فرود نمونه‌ای از متن‌هایی است که برای نمایش آن‌ها از متن پیشرو استفاده می‌شود.

متن عنوان (Title Text)

برای نمایش عنوان‌ها در بخش‌‌های مختلف رابط کاربر و همچنین عنوان‌های ساختار کامپوننت‌ها، از متن عنوان استفاده می‌شود.

متن بدنه (Body Text)

در کامپوننت متن بدنه از فونت‌های کوچکتری نسبت به متن عنوان استفاده می‌شود. این کامپوننت برای متن‌های طولانی کاربرد دارد و در بدنهٔ اصلی و نیز بخش توضیحات در ساختار کامپوننت‌ها استفاده می‌شود.

متن زیرنویس (Caption Text)

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

متن‌های عنوان معنادار (HTML ‌Headings)

تایپوگرافی برای تگ‌های عنوان HTML اندازه و وزن فونت و ارتفاع خط را مشخص کرده ‌است تا متن در حفظ خوانایی و سلسله مراتب موثر و قاعده‌مند عمل کند.

دسترس‌پذیری