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>
  • .subtitle-1 - Good for supporting text
  • .subtitle-2 - Good for supporting text with additional weight
  • .body-1 - Regular body text
  • .body-2 - Regular body text with additional weight
  • .button - The default styling used for buttons
  • .caption - Smaller size text
  • .overline - Emphasized small text
Light 96sp
Light 60sp
Regular 48sp
Regular 34sp
Regular 24sp
Medium 20sp
Regular 16sp
Medium 14sp
Regular 16sp
Regular 14sp
Medium 14sp
Regular 12sp
Regular 10sp

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
Roboto Light
Roboto Regular
Roboto Medium
Roboto Bold
Roboto Black
Roboto Thin Italic
Roboto Light Italic
Roboto Regular Italic
Roboto Medium Italic
Roboto Bold Italic
Roboto Black 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
One hundred percent cotton bond
Bold italic
It became the non-relativistic limit of quantum field theory
Light italic
Probabilistic wave - particle wavefunction orbital path
Medium italic
Cardstock 80lb ultra-bright orange
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