Typography
Stay organized with collections
Save and categorize content based on your preferences.
Typography helps make text on the screen or text on the UI legible and
beautiful. Type styles include: display, title, label, body, arc, and numerals.
Use tokens to define font, line height, size, tracking, width and weight.
Variable font axis in motion
Use a variable font axis to signal expressive motion feedback and making
interactions more expressive and delightful to use.
Example use-cases:
- Dynamic font weight
- Dynamic font width
- Dynamic font weight and width
Tokens
Tokens assign an element's type style by a configurable value, rather than a set
value, making managing styles and themes considerably easier.
Type roles
Along with an updated and optimized type scale, we are also introducing new type
roles that specifically serve notable patterns on Wear.
- Leaning into more use-cases with Arc Text like fixed height page titles or
descriptors with limited space, such as confirmation overlays.
- A type role specifically for Numerals so we can lean into bigger and more
styled text sizes for strings that don't need to be localized or benefit
from mono or tabular spacing when animated, such as pickers.
Resource: Google Fonts library
Search through a wide variety of fonts. Once you search for and select the
font you want, options will appear in the right-hand panel to resize, recolor,
and copy the customized font to clipboard.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2025-05-20 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-05-20 UTC."],[],[],null,["# Typography helps make text on the screen or text on the UI legible and\nbeautiful. Type styles include: display, title, label, body, arc, and numerals.\nUse tokens to define font, line height, size, tracking, width and weight. \n\n\u003cbr /\u003e\n\nVariable font axis in motion\n----------------------------\n\n\nUse a variable font axis to signal expressive motion feedback and making\ninteractions more expressive and delightful to use.\n\nExample use-cases:\n\n- Dynamic font weight\n- Dynamic font width\n- Dynamic font weight and width \n\n\u003cbr /\u003e\n\nTokens\n------\n\n\nTokens assign an element's type style by a configurable value, rather than a set\nvalue, making managing styles and themes considerably easier. \n\n\u003cbr /\u003e\n\nType roles\n----------\n\n\nAlong with an updated and optimized type scale, we are also introducing new type\nroles that specifically serve notable patterns on Wear.\n\n- Leaning into more use-cases with Arc Text like fixed height page titles or descriptors with limited space, such as confirmation overlays.\n- A type role specifically for Numerals so we can lean into bigger and more styled text sizes for strings that don't need to be localized or benefit from mono or tabular spacing when animated, such as pickers. \n\n\u003cbr /\u003e\n\nResource: Google Fonts library\n------------------------------\n\n\nSearch through a [wide variety of fonts](http://fonts.google.com/icons). Once you search for and select the\nfont you want, options will appear in the right-hand panel to resize, recolor,\nand copy the customized font to clipboard. \n\n\u003cbr /\u003e"]]
