سلسله مراتب از طریق تفاوت در وزن فونت، اندازه، ارتفاع خط و فاصله حروف منتقل میشود. مقیاس بهروز شدهی نوع، سبکها را در شش نقش سازماندهی میکند که برای توصیف اهدافشان نامگذاری شدهاند: نمایش، عنوان، برچسب، بدنه، عدد و قوس. نقشهای جدید مستقل از اندازه صفحه نمایش هستند و امکان کاربرد آسانتر را در موارد استفادهی متنوع فراهم میکنند.
سبکهای نمایش
از نمایش برای رشتههای متنی بزرگ و کوتاه استفاده میشود که برای نمایش اطلاعات برجسته و قابل توجه، معیارهای مهم، اعتماد به نفس یا لحظات بیان برند به کار میروند.
- DisplayLarge بزرگترین تیتر است. Displays بزرگترین متن روی صفحه نمایش است که برای اطلاعات کوتاه و قابل توجه، معیارهای مهم، اعتماد به نفس یا لحظات بیان برند که از مقیاس و سبک برجستهای بهره میبرند، در نظر گرفته شده است.
- DisplayMedium دومین تیتر بزرگ است. نمایشگرها بزرگترین متن روی صفحه هستند که برای اطلاعات کوتاه و قابل توجه، معیارهای مهم، اعتماد به نفس یا لحظات بیان برند که از مقیاس و سبک برجستهای بهره میبرند، در نظر گرفته شدهاند.
- DisplaySmall کوچکترین تیتر است. Displays بزرگترین متن روی صفحه نمایش است که برای اطلاعات کوتاه و قابل توجه، معیارهای مهم، اعتماد به نفس یا لحظات بیان برند که از مقیاس و سبک برجستهای بهره میبرند، در نظر گرفته شده است.
عنوان
عنوان، متنی سلسله مراتبی است که به عنوان مکانیزمی برای یافتن مسیر استفاده میشود، مانند عنوان یک صفحه، عنوان بخش یا عنوان زیربخش (در مورد TitleSmall).
- TitleLarge بزرگترین عنوان است. عنوانها از Displays کوچکتر هستند. آنها معمولاً برای متن با تأکید متوسط که طول کوتاهتری دارد، رزرو شدهاند و برای اجزای تعاملی، به جای سرصفحهها یا زیرعنوانهای صفحه، توصیه نمیشوند.
- TitleMedium عنوان متوسط است. عنوانها از Displays کوچکتر هستند. آنها معمولاً برای متنهایی با تأکید متوسط که طول کوتاهتری دارند، استفاده میشوند و برای اجزای تعاملی، به جای سرتیترها یا زیرتیترهای صفحه، توصیه نمیشوند.
- عنوان کوچک (TitleSmall) کوچکترین عنوان است. عنوانها از نمایشها (Displays) کوچکتر هستند. آنها معمولاً برای متن با تأکید متوسط که طول کوتاهتری دارد، رزرو شدهاند و برای اجزای تعاملی، به جای سرصفحهها یا زیرعنوانهای صفحه، توصیه نمیشوند.
برچسب
برچسب (Label) برای متن سطح کامپوننت استفاده میشود که عملی را توصیف میکند که در صورت تعامل با آن اتفاق میافتد. رایجترین و پرکاربردترین کاربرد برچسب، برای متنی است که درون یک دکمه قرار میگیرد.
- LabelLarge بزرگترین برچسب است. برچسبها برای نمایش متون برجسته مانند برچسب روی دکمههای عنوان، که روی اجزای تعاملی اعمال میشوند، استفاده میشوند.
- LabelMedium برچسب متوسط و رایجترین نوع برچسب است. برچسبها برای نمایش متونی مانند برچسب اصلی روی دکمهها استفاده میشوند که روی اجزای تعاملی اعمال میشوند.
- LabelSmall برچسب کوچک است. برچسبها برای نمایش متون مانند برچسب ثانویه روی دکمهها، برچسبهای روی دکمههای فشرده و اعمال شده روی اجزای تعاملی استفاده میشوند.
بدن
بدنه برای متن محتوا مانند پاراگرافهای متن بدنه، متن مورد استفاده در تجسم دادههای پیچیده، مهرهای زمانی و ابردادهها رزرو شده است.
- BodyLarge بزرگترین بدنه است. متون بدنه معمولاً برای نوشتههای طولانی استفاده میشوند زیرا برای اندازههای کوچک متن به خوبی کار میکنند. برای بخشهای طولانیتر متن، فونت serif یا sans serif توصیه میشود.
- BodyMedium دومین فونت بزرگ از نظر اندازه بدنه است. متنهای بدنه معمولاً برای نوشتههای طولانی استفاده میشوند، زیرا برای اندازههای کوچک متن به خوبی کار میکنند. برای بخشهای طولانیتر متن، فونت serif یا sans serif توصیه میشود.
- بدنه کوچک (BodySmall ) سومین اندازه بزرگ بدنه را دارد. متنهای بدنه معمولاً برای نوشتههای طولانی استفاده میشوند، زیرا برای اندازههای کوچک متن به خوبی کار میکنند. برای بخشهای طولانیتر متن، فونت serif یا sans serif توصیه میشود.
- BodyExtraSmall کوچکترین بدنه است. متون بدنه معمولاً برای نوشتههای طولانی استفاده میشوند زیرا برای اندازههای کوچک متن به خوبی کار میکنند. برای بخشهای طولانیتر متن، فونت serif یا sans serif توصیه میشود.
عدد
سبکهای متن عددی برای ارقام عددی استفاده میشوند که معمولاً به چند کاراکتر محدود میشوند. میتوانند در اندازههای بزرگتر نمایشگر، ویژگیهای رساتری به خود بگیرند. انعطافپذیری لازم برای گسترش محور عرض را با حداقل نگرانی در مورد محلیسازی و مقیاسبندی فونت فراهم میکنند.
- NumeralsExtraLarge بزرگترین نقش را برای ارقام دارد. اعداد به طور پیشفرض از فاصلهگذاری جدولی استفاده میکنند. آنها اعدادی را که فقط به دو یا سه کاراکتر محدود میشوند، برجسته و قابل مشاهده میکنند، که در آنها نیازی به محلیسازی مانند صفحه شارژ یا انتخابگر زمان نیست.
- NumeralsLarge دومین نقش بزرگ برای ارقام است. اعداد به طور پیشفرض از فاصلهگذاری جدولی استفاده میکنند. آنها رشتههای عددی با اندازه بزرگ هستند که محدود به نمایشهای بزرگ زمان هستند، جایی که نیازی به محلیسازی مانند شمارش معکوس تایمر یا انتخابگر زمان نیست.
- NumeralsMedium سومین نقش بزرگ برای ارقام است. اعداد به طور پیشفرض از فاصلهگذاری جدولی استفاده میکنند. آنها اعدادی با اندازه متوسط هستند که به رشتههای کوتاهی از ارقام محدود میشوند، جایی که نیازی به محلیسازی مانند شمارش گامها یا انتخابگر زمان نیست.
- NumeralsSmall چهارمین نقش بزرگ برای ارقام است. اعداد به طور پیشفرض از فاصلهگذاری جدولی استفاده میکنند. آنها برای اعدادی هستند که نیاز به تأکید در مقیاس کوچکتر دارند، جایی که مانند انتخابگرهای تاریخ و زمان نیازی به محلیسازی نیست.
- NumeralsExtraSmall کوچکترین نقش برای ارقام است. اعداد به طور پیشفرض از فاصلهگذاری جدولی استفاده میکنند. آنها برای اعدادی هستند که نیاز به جای دادن رشتههای طولانیتری از ارقام دارند، جایی که نیازی به محلیسازی مانند معیارهای درون تمرین نیست.
قوس
متن سربرگ قوسی برای متن منحنی که علائم راهنما در رابط کاربری مانند متن زمان و برچسبهای منحنی را تشکیل میدهد، استفاده میشود. محور فونت سفارشی که به طور خاص نوع را در امتداد یک منحنی بهینه میکند و به منظور تطبیق با فاصلههای مختلفی که بین کاراکترها هنگام قرارگیری در بالای صفحه نمایش منحنی در مقایسه با پایین آن ظاهر میشود، طراحی شده است.
بالا
- ArcLarge برای سربرگها و عناوین قوسی است. Arc برای متن در امتداد یک مسیر منحنی روی صفحه است، که برای رشتههای متنی سربرگ کوتاه در بالا یا پایین صفحه مانند پوششهای تأیید رزرو شده است.
- ArcMedium برای سربرگها و عناوین قوسی است. Arc برای متن در امتداد یک مسیر منحنی روی صفحه است، که برای رشتههای متنی کوتاه سربرگ در بالا یا پایین صفحه مانند عناوین صفحه رزرو شده است.
- ArcSmall برای رشتههای متنی با قوسهای محدود است. Arc برای متن در امتداد یک مسیر منحنی روی صفحه است که برای رشتههای متنی منحنی کوتاه در بالای صفحه مانند متن زمان رزرو شده است.
پایین
- ArcLarge برای سربرگها و عناوین قوسی است. Arc برای متن در امتداد یک مسیر منحنی روی صفحه است، که برای رشتههای متنی سربرگ کوتاه در بالا یا پایین صفحه مانند پوششهای تأیید رزرو شده است.
- ArcMedium برای سربرگها و عناوین قوسی است. Arc برای متن در امتداد یک مسیر منحنی روی صفحه است، که برای رشتههای متنی کوتاه سربرگ در بالا یا پایین صفحه مانند عناوین صفحه رزرو شده است.
- ArcSmall برای رشتههای متنی با قوس محدود است. Arc برای متن در امتداد یک مسیر منحنی روی صفحه است که برای رشتههای متنی منحنی کوتاه در پایین صفحه مانند فراخوانی برای اقدام رزرو شده است.
حروفچینی
حروفچینی عمودی برای اطمینان از خوانایی متن در هر اندازهای، به فاصلهگذاری، کادرهای مرزی و خطوط پایه متکی است. هنگام تصمیمگیری برای حروفچینی، تغییر اندازه متن، تراکم و استفاده از متن در طرحبندیهای تطبیقی، ملاحظات مهندسی و قراردادهای پلتفرم خود را در نظر بگیرید.
از خط پایه استفاده کنید
خط پایه، خط نامرئی است که یک خط متن روی آن قرار میگیرد. در طراحی متریال، خط پایه یک مشخصه مهم در اندازهگیری فاصله عمودی بین متن و یک عنصر است.
بررسی خوانایی
برای افزایش خوانایی فونتهای نمایش داده شده در برنامهتان، این بررسیهای خوانایی را انجام دهید.
اعداد جدولی و تکی
در جاهایی که مقادیر ممکن است اغلب تغییر کنند یا متحرک باشند یا مقادیر به سرعت در حال تغییر باشند، مانند تایمرهای شمارش معکوس، انتخابگرها یا معیارهای تناسب اندام مداوم، از ارقام جدولی (که به عنوان اعداد تک فاصلهای نیز شناخته میشوند) به جای ارقام متناسب استفاده کنید.
از اعداد جدولی تکفاصله استفاده کنید تا مقادیر از نظر نوری تراز شوند و اسکن و ترازبندی بهتری داشته باشید و از جابهجایی اعداد یا متنهای مجاور جلوگیری شود.
ارتفاع خط
ارتفاع خط، فضای بین هر خط متن است و مستقیماً به اندازهی متن مرتبط است. در ساعت، فضای عمودی محدود است، بنابراین ارتفاع خط برای اطمینان از خوانایی بهینه شده است، در حالی که حداکثر خطوط متن قابل مشاهده در داخل صفحه نمایش را دارد.
ارتفاع خط اضافی
در Jetpack Compose و در اندروید، تایپوگرافی به طور خودکار در آخرین خط ارتفاع خط بیشتری پیدا میکند تا از همپوشانی کاراکترهای طولانیتر جلوگیری شود. به همین دلیل است که برخی از تستهای اسکرینشات کاملاً تراز نمیشوند.
برگه تقلب ارتفاع خط اضافی
| سبک پیشفرض (اندازه متن / ارتفاع خط) | ارتفاع پیشفرض خط در هر خط | ارتفاع خط اضافی فقط در خط پایین | محاسبه |
|---|---|---|---|
| ۶۰ / ۶۰ | ۰ (۱۰۰٪) | + ۱۵ (۱۲۵٪) | ۶۰ / ۷۵ (۱۵/۱۲۵٪) (۶۰+۱۵) |
| ۵۰ / ۵۰ | ۰ (۱۰۰٪) | + ۱۳ (۱۲۶٪) | ۵۰ / ۶۳ (۱۳/۱۲۶٪) (۵۰+۱۳) |
| ۴۰ / ۴۴ | ۴ (۱۱۰٪) | + ۷ (۱۲۷.۵٪) | ۴۰ / ۵۱ (۱۱/۱۲۷.۵٪) (۴۴+۷) |
| ۳۰ / ۳۴ | ۴ (۱۱۳٪) | + ۳ (۱۲۳.۳٪) | 30 / 37 (7/123.3%) (34+3) |
| ۲۴ / ۲۶ | ۲ (۱۰۸٪) | + ۴ (۱۲۵٪) | ۲۴ / ۳۰ (۶/۱۲۵٪) (۲۶ + ۴) |
| ۲۰ / ۲۲ | ۲ (۱۱۰٪) | + ۳ (۱۲۵٪) | ۲۰ / ۲۵ (۵/۱۲۵٪) (۲۲+۳) |
| ۱۸ / ۲۰ | ۲ (۱۱۱٪) | + ۳ (۱۲۵٪) | ۱۸ / ۲۳ (۵/۱۲۵%) (۲۰+۳) |
| ۱۶ / ۱۸ | ۲ (۱۱۲.۵٪) | + ۲ (۱۲۵٪) | ۱۶ / ۲۰ (۴/۱۲۵٪) (۱۸ + ۲) |
| ۱۵ / ۱۸ | ۳ (۱۲۰٪) | + ۱ (۱۲۶.۶٪) | ۱۵ / ۱۹ (۴/۱۲۶.۶٪) (۱۸+۱) |
| ۱۴ / ۱۶ | ۲ (۱۱۴٪) | + ۲ (۱۲۸.۵٪) | ۱۴ / ۱۸ (۴/۱۲۸.۵٪) (۱۶ + ۲) |
| ۱۳ / ۱۶ | ۳ (۱۲۳٪) | + ۰ (۱۲۳٪) | ۱۳ / ۱۶ (۳/۱۲۳%) (۱۶+۰) |
| ۱۲ / ۱۴ | ۲ (۱۱۶.۶٪) | + ۱ (۱۲۵٪) | ۱۲ / ۱۵ (۳/۱۲۵٪) (۱۴+۱) |
| ۱۰ / ۱۲ | ۲ (۱۲۰٪) | + ۰ (۱۲۰٪) | ۱۰ / ۱۲ (۲/۱۲۰%) (۱۲+۰) |