Vue Material -



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:

Roboto Font
<link rel="stylesheet" href="//,400,500,700,400italic">
Code copied!


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:

The 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:

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