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.


Light 112sp
.display-4font-weight 300
Regular 56sp
.display-3font-weight 400
Regular 45sp
.display-2font-weight 400
Regular 34sp
.display-1font-weight 400
Regular 24sp
.headlinefont-weight 400
Medium 20sp
.titlefont-weight 500
Regular 16sp
.subheadingfont-weight 400
Medium 14sp
.body-2font-weight 500
Regular 14sp
.body-1font-weight 400
Regular 12sp
.captionfont-weight 400