Roboto has been refined extensively to work across the wider set of supported platforms. It is slightly wider and rounder, giving it greater clarity and making it more optimistic. Vue Material use Roboto by default, with Noto Sans as a fallback. To get up and running with Roboto font, just install it from Google Fonts. Or install it from the following snippet:
Too many type sizes and styles at once can wreck any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.
The sizes and styles balance content density and reading comfort under typical usage conditions. They are all based on simple classes that gives the styles and works fine with dark themes. Look:
a tag create a link style and is the only that is affected globally. It will be automatically themed using the accent color.The following classes can be applied to any HTML element:
| Name | Description |
|---|---|
| md-display-4 | Create the biggest display text |
| md-display-3 | Create the second biggest display text |
| md-display-2 | Create the third biggest display text |
| md-display-1 | Create the forth biggest display text |
| md-headline | Create a headline text, that is bigger than a title |
| md-title | Create the regular title. Commonly used inside toolbars |
| md-subheading | Create a subtitle like element |
| md-body-2 | Create a medium weight variation of body text |
| md-body-1 | Create a regular text. This has the same effect as the body text |
| md-caption | Create a caption text. This has the same effect as the tag |