headingXl
Used for main page titles.
| 32px | 36px | 40px | |headingL
Suitable for section headers.
| 24px | 28px | 32px | |headingM
Used for subsections or feature highlights.
| 20px | 22px | 24px | |headingS
Ideal for smaller titles and labels.
| 16px | 16px | 16px | |headingXS
Used for minor headings and annotations.
bodyL
Used for general reading content.
| 16px | 20px | 20px | |bodyS
Ideal for supporting information and descriptions.
| 14px | 16px | 16px | |bodyXS
Used for less prominent text, such as disclaimers.
| 12px | 14px | 14px |captionL
Used for standout short descriptions.
| 24px | 28px | 28px | |captionM
Suitable for explanatory notes.
| 20px | 24px | 24px | |captionS
Best for minor clarifications and subtitles.
| 16px | 20px | 20px |linkL
Used for large link buttons
| 20px | |linkM
Used for medium link buttons
| 16px | |linkS
Used for small link buttons
| 14px |buttonL
Used for large buttons
| 20px | |buttonM
Used for medium size buttons
| 16px | |buttonS
Used for small size buttons
| 14px |Heading And Caption
Heading and Caption use a 1.14× multiplier for Roboto and Roboto condense.
|  | | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | |Body and Link
Body and Link use a 1.37× multiplier for Roboto.
|  | ## Usages Guidelines *** |Use defined font sizes
Choose from library defined font sizes. By using unique font sizes, you risk upsetting the hierarchy and balance of typography in your product.
|  | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | |Don't use underlines for adding emphasis
Underlines are reserved for text links only. They should not be used as a way for adding emphasis to words.
|  | |Respect capitalization rules
Use sentence case for all UX content.
|  | |Use tabular numbers for numerical data
Numbers within components should be tabular with lining figures. In tables, numbers should be right aligned to make numerical data easier to read and compare.
|  | |Don't let paragraph widths get too thin
Paragraphs of text that are too long are difficult to follow, and paragraphs of text that are too thin are difficult to read. Ideally, blocks of text should be roughly 70 characters wide. Be sure to keep them at least between 50 and 120 characters wide.
|  | |Keep content short and to the point
Keep paragraphs concise. Some users with cognitive disabilities (and even those who don’t) can have a very difficult time reading and comprehending large blocks of text.
|  | |Don't use indentation
Paragraphs of text should not be indented.
|  | |Don't fully-justify text
Do not use fully-justified blocks of text. This adds trapped white space within paragraphs, which makes it harder to read, especially for those with cognitive disabilities or dyslexia. Right alignment (left rag) is also discouraged for paragraphs of text.
|  | |Typography component pairing
Heading, body, caption, and link typography components can be paired together in order to create balanced relationships while enforcing hierarchy of content. By default, this can be done by using text block components with the same size.
Relationships may sometimes need to be more or less pronounced, so in those use cases, it’s acceptable to combine your own selection of sizes as long as you’re maintaining consistent hierarchy.