Typography

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.

  • .display-4 - Good for <h1>
  • .display-3 - Good for <h2>
  • .display-2 - Good for <h3>
  • .display-1 - Good for <h4>
  • .headline - Good for <h5>
  • .title - Good for <h6>
  • .subheading - Good for supporting text
  • .body-2 - Regular body text with additional weight
  • .body-1 - Regular body text
  • .caption - Smaller size text
.display-4
Light 112sp
.display-3
Regular 56sp
.display-2
Regular 45sp
.display-1
Regular 34sp
.headline
Regular 24sp
.title
Medium 20sp
.subheading
Regular 16sp
.body-2
Medium 14sp
.body-1
Regular 14sp
.caption
Regular 12sp

Font weights

Material design supports 100, 300, 400, 500, 700, 900 font weights.

  • .font-weight-thin - Sets font-weight to 100
  • .font-weight-light - Sets font-weight to 300
  • .font-weight-regular - Sets font-weight to 400
  • .font-weight-medium - Sets font-weight to 500
  • .font-weight-bold - Sets font-weight to 700
  • .font-weight-black - Sets font-weight to 900

Text can also have an italic applied to it.

.font-italic - Sets the font-style to italic

Roboto Thin
.font-weight-thin
Roboto Light
.font-weight-light
Roboto Regular
.font-weight-regular
Roboto Medium
.font-weight-medium
Roboto Bold
.font-weight-bold
Roboto Black
.font-weight-black
Roboto Thin Italic
.font-weight-thin.font-italic
Roboto Light Italic
.font-weight-light.font-italic
Roboto Regular Italic
.font-weight-regular.font-italic
Roboto Medium Italic
.font-weight-medium.font-italic
Roboto Bold Italic
.font-weight-bold.font-italic
Roboto Black Italic
.font-weight-black.font-italic

Text transforms

Control the casing with a text transform.

  • .text-capitalize - Sets text-transform to capitalize
  • .text-lowercase - Sets text-transform to lowercase
  • .text-none - Sets text-transform to none
  • .text-uppercase - Sets text-transform to uppercase
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

Text wrapping

Force text to not wrap or truncate it if its too long.

  • .text-no-wrap - Sets whitespace to no-wrap
  • .text-truncate - Truncates overflowed text
Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore