[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間：2025-07-27 (世界標準時間)。"],[],[],null,["# Typography\n\nAs television screens are typically viewed from a distance, interfaces that use\nlarger typography are more legible and comfortable for users. TV Design's\ndefault type scale includes contrasting and flexible type styles to\nsupport a wide range of use cases.\n\nHighlights\n----------\n\n- Prioritize using larger typography for a more comfortable viewing experience on TV screens.\n- The default Android TV typeface is Roboto.\n- Choose distinct, legible fonts which best reflect your brand style.\n- Ensure fonts are readable at a glance, with appropriate width and optical sizing.\n- Pair complimentary fonts; for instance, use sans-serif for body text and labels.\n- Maximize legibility by avoiding decorative fonts.\n\nFonts\n-----\n\n### Default typefaces\n\nAndroid TV has its own system typeface, Roboto, which is optimized for\nlegibility and clarity. Use Roboto for a utilitarian, non-branded UI\nelement that's best served using the native platform experience.\n\n### Distinct typefaces\n\nWhere relevant, use a distinctive font that reflects your brand style.\nHere are the main things to think about when choosing a font:\n\n- [Legibility](https://fonts.google.com/knowledge/glossary/legibility) - For better readability from a distance, use typefaces with large counters and apt optical sizing. Ensure letters are distinguishable from one other.\n- [Readable at a glance](https://www.nngroup.com/articles/glanceable-fonts/)- Any text on TV needs to have a legible font width, as thinner lines are not instantly recognisable.\n- [Pair complimentary fonts](https://fonts.google.com/knowledge/choosing_type/pairing_typefaces) - If you want to use multiple fonts, use a sans-serif typeface for body text and labels.\n\n| **Note:** More personable fonts are best suited to bigger size text.\n\n- If you can, avoid [decorative fonts](https://fonts.google.com/?category=Handwriting). While the font sizes on TV are bigger than other display sizes, UI text legibility is the priority. Steer clear of fonts that can't function as body text.\n\n### Type scale\n\nA type scale is a selection of font styles that can be used across an app.\nIt ensures a flexible, yet consistent style that accommodates a range\nof purposes. The TV Design type scale is a combination of 15 styles,\neach with an intended application and meaning. They're assigned based\non use, such as \"display,\" or \"headline,\" and are grouped into\ncategories based on scale (large or small). TV Design's default\ntype scale uses Roboto for all titles, labels, and body text to\ncreate a unified typography experience.\n\nTo learn about typography tokens and typeface customization,\nvisit [Material Design 3](https://m3.material.io/styles/color/the-color-system/key-colors-tones).\n\nType roles\n----------\n\n### Display\n\nThere are three display styles in the default type scale: large, medium,\nand small. As the largest text on the screen, large display styles are\nreserved for short, important text passages, or numerals. They can be\nused for the main heading of the screen. Don't use large display\nstyles for section or cluster headings.\n| **Tip:** For display type, consider choosing a more expressive font. If available, set the appropriate optical size to your usage.\n\n### Headline\n\nHeadlines are best-suited for short, high-emphasis text.\nThese styles can be good for marking primary passages of text or\nimportant regions of content. They are used for headings in featured\ncarousels and immersive clusters. Headlines can also make use of\nexpressive typefaces, provided appropriate line height and letter spacing\nhelps maintain readability.\n\n### Title\n\nTitle styles are smaller than headline styles. Use titles for brief,\nmedium-emphasis text. For example, consider using titles to divide secondary\npassages of text or secondary regions of content.\n\nUse titles for UI elements like cards or lists. Title sizes are compact\nwhile providing a useful level of prominence and legibility.\n\n### Body\n\nBody styles are used for longer text passages in your app. Use typefaces\nthat are readable at smaller sizes and can be comfortably read in longer\npassages. Avoid decorative fonts for body text since these can be hard\nto read from far away.\n\n### Label\n\nLabel styles are smaller, utilitarian styles, used for things like the text\ninside components or for very small text in the content body, such as captions.\nButtons, for example, use the label large style."]]
