Quasar Typography Classes: text-h1 to text-caption

Quasar typography comes down to twelve classes, six font weights and a handful of text helpers. They are easy to use and easy to misuse: text-h1 is 96px, which is far too big for an app screen, and a plain <h1> in a Quasar app gets that same 96px. This post lists every class with its real size, shows the Sass variables behind them, and ends with a small type scale that reads well in a dashboard.

To see each class rendered next to its CSS, use the free Spacing & Typography Classes tool: search "caption" or "bold" and click a name to copy it.

The Quasar typography classes and their sizes

These are the defaults in Quasar 2.35.2, from $h1 to $caption in quasar/src/css/variables.sass. Pixel sizes assume the browser's default root font size of 16px.

Each class also sets a letter-spacing. The big headings are tightened slightly (text-h1 is -0.01562em) and text-overline is spread wide (0.16667em).

One surprise: text-overline does not set text-transform. If you want the usual all-caps overline, add text-uppercase:

<div class="text-overline text-uppercase text-grey-7">Revenue</div>
<div class="text-h4">$12,480</div>

Quasar text classes vs heading tags

Quasar also styles the h1 to h6 tags with the same values as text-h1 to text-h6. So an <h1> in a Quasar app is 96px with a light 300 weight, plus the browser's default margin.

That is why you will often see this pattern:

<h1 class="text-h5 text-weight-bold q-mt-none q-mb-sm">Invoices</h1>

The tag says what the element is: the page's main heading, which matters for screen readers and search engines. The class says how it looks. Keep one h1 per page and a heading order without gaps, then choose sizes with classes. Don't pick h4 because it "looks right"; pick h2 and add text-h6.

It works the other way too: a div with text-h6 looks like a heading but isn't one. That is fine for a card title that isn't part of the page outline. For a section heading, use a real heading tag.

Font weights: text-weight-bold and the rest

Six weight classes cover the full range:

There is also text-bold, which sets font-weight: bold (the same as 700 in practice). Prefer the text-weight-* names: they read as a scale and you can change them later in one place.

Weights only show up if the font has them. Quasar's default font is Roboto, which the docs say ships as a variable font, so any weight from 100 to 900 renders. If you swap in a font that only has 400 and 700, text-weight-medium falls back to one of those and text-weight-thin won't look thin.

Alignment, transform and truncation helpers

The rest of the text-* helpers are single properties:

• Alignment: text-left, text-center, text-right, text-justify (justify also turns on hyphens: auto).
• Transform: text-uppercase, text-lowercase, text-capitalize.
• Style: text-italic, text-strike (line-through), text-no-wrap (white-space: nowrap).

For text that must fit in a fixed space, Quasar has truncation classes outside the text- family:

<div class="ellipsis" style="max-width: 240px">
  A long project name that would otherwise wrap onto a second line
</div>

<p class="ellipsis-2-lines">
  A description that should show two lines at most and then end with an ellipsis.
</p>

ellipsis needs a width limit to cut against, either from its parent or its own max-width. In a flex row, give the truncated element col (or min-width: 0) so it can shrink below its content width.

The Sass variables behind Quasar typography

Every typography class reads from a Sass map, so you can change the scale for the whole app instead of overriding classes one by one. In a Quasar CLI app, override them in src/css/quasar.variables.scss; in Nuxt with nuxt-quasar-ui, in the file that the sassVariables option points to.

// Base text: Quasar's defaults are 14px and 1.5
$body-font-size: 14px;
$body-line-height: 1.5;

// The font stack used by body and every typography class
$typography-font-family: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;

// One heading: each is a map of size, line-height, letter-spacing and weight
$h1: (size: 3rem, line-height: 3.5rem, letter-spacing: -.01em, weight: 600);
$h5: (size: 1.375rem, line-height: 1.75rem, letter-spacing: normal, weight: 600);

// The weight scale
$text-weights: (thin: 100, light: 300, regular: 400, medium: 500, bold: 600, bolder: 800);

The heading maps ($h1 to $h6, $subtitle1, $subtitle2, $body1, $body2, $overline, $caption) are collected into $headings, and $h1 to $h6 also drive the heading tags. Override a whole map, not one key, since Sass replaces the map you assign.

Changing $typography-font-family only changes the stack; you still have to load the font. The Quasar typography docs show the usual @font-face setup, and extras: ['roboto-font'] in the Quasar config is the line to remove once Roboto is no longer used.

If you manage colors, spacing and type as tokens, the design tokens guide shows how to keep these variables in one place.

A readable type scale for dashboards

Quasar's scale comes from Material Design, which was built for content apps. For admin panels and SaaS dashboards, most of it is too large. A scale that works well without changing any variable:

Put together, a KPI card looks like this:

<q-card flat bordered>
  <q-card-section>
    <div class="text-overline text-uppercase text-grey-7">Active users</div>
    <div class="text-h4 text-weight-medium">1,284</div>
    <div class="text-caption text-grey-7">Last 30 days</div>
  </q-card-section>
</q-card>

Three sizes (text-h4, the 12px pair and the 14px body) carry the whole card. Most dashboard screens need four or five sizes at most. When a screen uses more, it usually means two elements of the same role ended up with different classes.

Common questions about Quasar typography

What font size is Quasar's body text? 14px with a line height of 1.5, from $body-font-size and $body-line-height. text-body2 matches it; text-body1 is the larger 16px.

Do the typography classes use rem or px? The headings and text classes use rem, so they scale with the root font size. The body size is set in px.

How do I make text bold in Quasar? text-weight-bold (700), or text-weight-medium (500) for a lighter emphasis.

How do I stop a heading from wrapping? text-no-wrap keeps it on one line; add ellipsis to cut it with "…" instead of overflowing.

Next step

Open the Spacing & Typography Classes tool and switch to the Typography and Font weight tabs. Every class is rendered live with its size, weight and line height, so you can compare text-h6 with text-subtitle1, which sit next to each other in the list, and copy the one you want.