Text and typography

Control text size, alignment, wrapping, overflow, transforms and more. By default, Vuetify uses the Material Design 3 specification Roboto Font.

Copy Page as Markdown

Class	Properties
text-display-large	font-size: 3.5625rem (57px); font-weight: 400; line-height: 4rem (64px); letter-spacing: -0.015625rem (-0.25px);
text-display-medium	font-size: 2.8125rem (45px); font-weight: 400; line-height: 3.25rem (52px); letter-spacing: 0;
text-display-small	font-size: 2.25rem (36px); font-weight: 400; line-height: 2.75rem (44px); letter-spacing: 0;
text-headline-large	font-size: 2rem (32px); font-weight: 400; line-height: 2.5rem (40px); letter-spacing: 0;
text-headline-medium	font-size: 1.75rem (28px); font-weight: 400; line-height: 2.25rem (36px); letter-spacing: 0;
text-headline-small	font-size: 1.5rem (24px); font-weight: 400; line-height: 2rem (32px); letter-spacing: 0;
text-title-large	font-size: 1.375rem (22px); font-weight: 400; line-height: 1.75rem (28px); letter-spacing: 0;
text-title-medium	font-size: 1rem (16px); font-weight: 500; line-height: 1.5rem (24px); letter-spacing: 0.009375rem (0.15px);
text-title-small	font-size: 0.875rem (14px); font-weight: 500; line-height: 1.25rem (20px); letter-spacing: 0.00625rem (0.1px);
text-body-large	font-size: 1rem (16px); font-weight: 400; line-height: 1.5rem (24px); letter-spacing: 0.03125rem (0.5px);
text-body-medium	font-size: 0.875rem (14px); font-weight: 400; line-height: 1.25rem (20px); letter-spacing: 0.015625rem (0.25px);
text-body-small	font-size: 0.75rem (12px); font-weight: 400; line-height: 1rem (16px); letter-spacing: 0.025rem (0.4px);
text-label-large	font-size: 0.875rem (14px); font-weight: 500; line-height: 1.25rem (20px); letter-spacing: 0.00625rem (0.1px);
text-label-medium	font-size: 0.75rem (12px); font-weight: 500; line-height: 1rem (16px); letter-spacing: 0.03125rem (0.5px);
text-label-small	font-size: 0.6875rem (11px); font-weight: 500; line-height: 1rem (16px); letter-spacing: 0.03125rem (0.5px);
text-high-emphasis	color: rgba(var(–v-theme-on-background), var(–v-high-emphasis-opacity));
text-medium-emphasis	color: rgba(var(–v-theme-on-background), var(–v-medium-emphasis-opacity));
text-disabled	color: rgba(var(–v-theme-on-background), var(–v-disabled-opacity));
text-uppercase	text-transform: uppercase;
text-lowercase	text-transform: lowercase;
text-capitalize	text-transform: capitalize;
text-none	text-transform: none;
text-start	text-align: start;
text-center	text-align: center;
text-end	text-align: end;
text-justify	text-align: justify;
text-left	text-align: left;
text-right	text-align: right;
text-truncate	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-no-wrap	white-space: nowrap;
text-pre-wrap	white-space: pre-wrap;
text-break	overflow-wrap: break-word;
text-decoration-none	text-decoration: none;
text-decoration-overline	text-decoration: overline;
text-decoration-underline	text-decoration: underline;
text-decoration-line-through	text-decoration: line-through;
font-weight-black	font-weight: 900;
font-weight-bold	font-weight: 700;
font-weight-semibold	font-weight: 600;
font-weight-medium	font-weight: 500;
font-weight-regular	font-weight: 400;
font-weight-light	font-weight: 300;
font-weight-thin	font-weight: 100;
font-italic	font-style: italic;
text-{breakpoint}-display-large	Set the text-display-large style for the specified breakpoint.
text-{breakpoint}-display-medium	Set the text-display-medium style for the specified breakpoint.
text-{breakpoint}-display-small	Set the text-display-small style for the specified breakpoint.
text-{breakpoint}-headline-large	Set the text-headline-large style for the specified breakpoint.
text-{breakpoint}-headline-medium	Set the text-headline-medium style for the specified breakpoint.
text-{breakpoint}-headline-small	Set the text-headline-small style for the specified breakpoint.
text-{breakpoint}-title-large	Set the text-title-large style for the specified breakpoint.
text-{breakpoint}-title-medium	Set the text-title-medium style for the specified breakpoint.
text-{breakpoint}-title-small	Set the text-title-small style for the specified breakpoint.
text-{breakpoint}-body-large	Set the text-body-large style for the specified breakpoint.
text-{breakpoint}-body-medium	Set the text-body-medium style for the specified breakpoint.
text-{breakpoint}-body-small	Set the text-body-small style for the specified breakpoint.
text-{breakpoint}-label-large	Set the text-label-large style for the specified breakpoint.
text-{breakpoint}-label-medium	Set the text-label-medium style for the specified breakpoint.
text-{breakpoint}-label-small	Set the text-label-small style for the specified breakpoint.

ads via vuetify

Usage

Control the size and style of text using the Typography helper classes. These values are based upon the Material Design type specification.

Display Large

text-display-large

Display Medium

text-display-medium

Display Small

text-display-small

Headline Large

text-headline-large

Headline Medium

text-headline-medium

Headline Small

text-headline-small

Title Large

text-title-large

Title Medium

text-title-medium

Title Small

text-title-small

Body Large

text-body-large

Body Medium

text-body-medium

Body Small

text-body-small

Label Large

text-label-large

Label Medium

text-label-medium

Label Small

text-label-small

Breakpoints

All of the typography classes support the responsive breakpoints seen in other parts of the framework. The base class .text-{variant} corresponds to the xsAndUp breakpoint, while the classes .text-{breakpoint}-{variant} can be used for the rest of the breakpoints (sm, md, lg and xl).

The following example shows a slightly contrived example of how one can use the different classes to effect:

Title

Body text

Font emphasis

Material design, by default, supports 100, 300, 400, 500, 700, 900 font weights and italicized text.

Black text.

Bold text.

Semibold text.

Medium weight text.

Normal weight text.

Light weight text.

Thin weight text.

Italic text.

Text

Alignment

Alignment helper classes allow you to easily re-align text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The alignment classes also support responsive breakpoints.

Left aligned on all viewport sizes.

Center aligned on all viewport sizes.

Right aligned on all viewport sizes.

Left aligned on viewports SM (small) or wider.

Left aligned on viewports MD (medium) or wider.

Left aligned on viewports LG (large) or wider.

Left aligned on viewports XL (extra-large) or wider.

Decoration

Remove text decoration with the .text-decoration-none class or add an overline, underline or line-through by using .text-decoration-overline, .text-decoration-underline, and .text-decoration-line-through.

Non-underlined link

Line-through text

Overline text

Underline text

Opacity

Opacity helper classes allow you to easily adjust the emphasis of text. text-high-emphasis has the same opacity as default text. text-medium-emphasis is used for hints and helper text. De-emphasize text with text-disabled.

High-emphasis has an opacity of 87% in light theme and 100% in dark.

Medium-emphasis text and hint text have opacities of 60% in light theme and 70% in dark.

Disabled text has an opacity of 38% in light theme and 50% in dark.

Transform

Text can be transformed with text capitalization classes.

Lowercased text.

Uppercased text.

capitalized text.

Text breaking and the removal of text-transform is also possible. In the first example, the text-transform: uppercase custom class is overwritten and allows the text casing to remain. In the second example, we break up a longer word to fit the available space.

Random TEXT cApitaLization

SUBDERMATOGLYPHIC

Wrapping and overflow

You can prevent wrapping text with the .text-no-wrap utility class.

This text should overflow the parent.

Longer content can be truncated with a text ellipsis using the .text-truncate utility class.

Requires display: inline-block or display: block.

Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus.

Customizing Fonts

By default, Vuetify uses Roboto as font family for regular text and headings. You can customize the font-family by overriding the following SASS variables:

$body-font-family — Used for body text and most components
$heading-font-family — Used for headings. (defaults to $body-font-family)

Loading Custom Fonts

Before configuring Vuetify, ensure your chosen font is available in your application. There are several ways to load fonts:

Fonts from CDN — Add an @import in your CSS or a <link> tag in your HTML
Local font files — Use @font-face declarations
NPM packages — Install packages like @fontsource/open-sans

Configuring Vuetify

Ensure you have SASS Variables configured in your project, then set the font-family variables:

@use 'sass:string';
@use 'vuetify/settings' with (
  $body-font-family: string.unquote('"Open Sans", sans-serif'),
  $heading-font-family: string.unquote('"Montserrat", sans-serif')
);

Using CSS Variables

You can use CSS custom properties for font-family values, allowing runtime changes or integration with theming systems:

@use 'vuetify/settings' with (
  $body-font-family: var(--font-sans)
  // $heading-font-family inherits the same font in this example
);

RTL Alignment

When using RTL, you may want to keep the alignment regardless of current text direction. This can be achieved by setting the direction to either left or right.

If instead you want the alignment to respond to the current text direction, use start and end.

Agnostic RTL Alignment

Left aligned text, irrespective of RTL or LTR.

Right aligned text, irrespective of RTL or LTR.

Responsive RTL Alignment

Left aligned text on LTR and right aligned on RTL.

Right aligned text on LTR and left aligned on RTL.