The typography of an application is just as important as its functionality. Vuetify.js uses the Material Design spec Roboto Font. Each heading size also has a corresponding helper class to style other elements the same.

Font sizes

Typography helper classes allow you to easily style text according to Material Design sizing.

Typography Display Classes
ClassInformation
.display-4Light 96sp
.display-3Light 60sp
.display-2Regular 48sp
.display-1Regular 34sp
.headlineRegular 24sp
.titleMedium 20sp
.subtitle-1Regular 16sp
.subtitle-2Medium 14sp
.body-1Regular 16sp
.body-2Regular 14sp
.captionRegular 12sp
.overlineRegular 10sp

Examples

Quantum Mechanics
Regular
6.626069x10-34
Thin
One hundred percent cotton bond
Bold italic
Quasiparticles
Bold
It became the non-relativistic limit of quantum field theory
Condensed
PAPERCRAFT
Light italic
Probabilistic wave - particle wavefunction orbital path
Medium italic
ENTANGLED
Black
Cardstock 80lb ultra-bright orange
Medium
STATIONERY
Thin
POSITION, MOMENTUM & SPIN
Condensed Light
Edit this page on Github | Translate on Crowdin
Vuetify
StoreFor Enterprise