Typography

The design system provides typography classes through either the Tailwind plugin or CSS variables. These target the font shorthand property.

Note that the classes on this page are only available if you've installed and configured the @qualcomm-ui/tailwind-plugin package.

Example

Body large, primary color

Body large, secondary color (css variables)

<div class="font-body-lg text-neutral-secondary">
  Body large, primary color
</div>
<div
  [style]="{
    color: 'var(--color-text-neutral-secondary)',
    font: 'var(--font-static-body-lg-default)',
  }"
>
  Body large, secondary color (css variables)
</div>

Uncolored by default

Typography classes are not colored by default, which enables you to use them in any color context. For optimal results, pair them with a color class from our color palette.

Static Fonts

Static fonts maintain consistent sizing across all screen sizes.

Display

Display fonts are used for large, prominent headings and hero text.

Tailwind Class

font-display-lg

CSS Variable

--font-static-display-lg

Computed Value

Example

Tailwind Class

font-display-md

CSS Variable

--font-static-display-md

Computed Value

Example

Tailwind Class	CSS Variable	Computed Value	Example
font-display-lg	--font-static-display-lg		Aa
font-display-md	--font-static-display-md		Aa

Heading

Heading fonts provide a complete hierarchy for content structure.

Tailwind Class

font-heading-xxxl

CSS Variable

--font-static-heading-xxxl

Computed Value

Example

Tailwind Class

font-heading-xxl

CSS Variable

--font-static-heading-xxl

Computed Value

Example

Tailwind Class

font-heading-xl

CSS Variable

--font-static-heading-xl

Computed Value

Example

Tailwind Class

font-heading-lg

CSS Variable

--font-static-heading-lg-default

Computed Value

Example

Tailwind Class

font-heading-md

CSS Variable

--font-static-heading-md-default

Computed Value

Example

Tailwind Class

font-heading-sm

CSS Variable

--font-static-heading-sm-default

Computed Value

Example

Tailwind Class

font-heading-xs

CSS Variable

--font-static-heading-xs-default

Computed Value

Example

Tailwind Class

font-heading-xxs

CSS Variable

--font-static-heading-xxs-default

Computed Value

Example

Tailwind Class	CSS Variable	Example
font-heading-xxxl	--font-static-heading-xxxl	Aa
font-heading-xxl	--font-static-heading-xxl	Aa
font-heading-xl	--font-static-heading-xl	Aa
font-heading-lg	--font-static-heading-lg-default	Aa
font-heading-md	--font-static-heading-md-default	Aa
font-heading-sm	--font-static-heading-sm-default	Aa
font-heading-xs	--font-static-heading-xs-default	Aa
font-heading-xxs	--font-static-heading-xxs-default	Aa

Heading Bold

Bold variants of heading fonts for emphasis.

Tailwind Class

font-heading-lg-bold

CSS Variable

--font-static-heading-lg-bold

Computed Value

Example

Tailwind Class

font-heading-md-bold

CSS Variable

--font-static-heading-md-bold

Computed Value

Example

Tailwind Class

font-heading-sm-bold

CSS Variable

--font-static-heading-sm-bold

Computed Value

Example

Tailwind Class

font-heading-xs-bold

CSS Variable

--font-static-heading-xs-bold

Computed Value

Example

Tailwind Class

font-heading-xxs-bold

CSS Variable

--font-static-heading-xxs-bold

Computed Value

Example

Tailwind Class	CSS Variable	Example
font-heading-lg-bold	--font-static-heading-lg-bold	Aa
font-heading-md-bold	--font-static-heading-md-bold	Aa
font-heading-sm-bold	--font-static-heading-sm-bold	Aa
font-heading-xs-bold	--font-static-heading-xs-bold	Aa
font-heading-xxs-bold	--font-static-heading-xxs-bold	Aa

Body

Body fonts are used for standard text content.

Tailwind Class

font-body-xxl

CSS Variable

--font-static-body-xxl-default

Computed Value

Example

Tailwind Class

font-body-xl

CSS Variable

--font-static-body-xl-default

Computed Value

Example

Tailwind Class

font-body-lg

CSS Variable

--font-static-body-lg-default

Computed Value

Example

Tailwind Class

font-body-md

CSS Variable

--font-static-body-md-default

Computed Value

Example

Tailwind Class

font-body-sm

CSS Variable

--font-static-body-sm-default

Computed Value

Example

Tailwind Class

font-body-xs

CSS Variable

--font-static-body-xs-default

Computed Value

Example

Tailwind Class	CSS Variable	Example
font-body-xxl	--font-static-body-xxl-default	Aa
font-body-xl	--font-static-body-xl-default	Aa
font-body-lg	--font-static-body-lg-default	Aa
font-body-md	--font-static-body-md-default	Aa
font-body-sm	--font-static-body-sm-default	Aa
font-body-xs	--font-static-body-xs-default	Aa

Body Bold

Bold variants of body fonts for emphasis within content.

Tailwind Class

font-body-xxl-bold

CSS Variable

--font-static-body-xxl-bold

Computed Value

Example

Tailwind Class

font-body-xl-bold

CSS Variable

--font-static-body-xl-bold

Computed Value

Example

Tailwind Class

font-body-lg-bold

CSS Variable

--font-static-body-lg-bold

Computed Value

Example

Tailwind Class

font-body-md-bold

CSS Variable

--font-static-body-md-bold

Computed Value

Example

Tailwind Class

font-body-sm-bold

CSS Variable

--font-static-body-sm-bold

Computed Value

Example

Tailwind Class

font-body-xs-bold

CSS Variable

--font-static-body-xs-bold

Computed Value

Example

Tailwind Class	CSS Variable	Example
font-body-xxl-bold	--font-static-body-xxl-bold	Aa
font-body-xl-bold	--font-static-body-xl-bold	Aa
font-body-lg-bold	--font-static-body-lg-bold	Aa
font-body-md-bold	--font-static-body-md-bold	Aa
font-body-sm-bold	--font-static-body-sm-bold	Aa
font-body-xs-bold	--font-static-body-xs-bold	Aa

Code

Monospace fonts for code snippets and technical content.

Tailwind Class

font-code-xl

CSS Variable

--font-static-code-xl-default

Computed Value

Example

Tailwind Class

font-code-lg

CSS Variable

--font-static-code-lg-default

Computed Value

Example

Tailwind Class

font-code-md

CSS Variable

--font-static-code-md-default

Computed Value

Example

Tailwind Class

font-code-sm

CSS Variable

--font-static-code-sm-default

Computed Value

Example

Tailwind Class

font-code-xs

CSS Variable

--font-static-code-xs-default

Computed Value

Example

Tailwind Class	CSS Variable	Example
font-code-xl	--font-static-code-xl-default	Aa
font-code-lg	--font-static-code-lg-default	Aa
font-code-md	--font-static-code-md-default	Aa
font-code-sm	--font-static-code-sm-default	Aa
font-code-xs	--font-static-code-xs-default	Aa

Code Bold

Bold monospace fonts for emphasized code.

Tailwind Class

font-code-xl-bold

CSS Variable

--font-static-code-xl-bold

Computed Value

Example

Tailwind Class

font-code-lg-bold

CSS Variable

--font-static-code-lg-bold

Computed Value

Example

Tailwind Class

font-code-md-bold

CSS Variable

--font-static-code-md-bold

Computed Value

Example

Tailwind Class

font-code-sm-bold

CSS Variable

--font-static-code-sm-bold

Computed Value

Example

Tailwind Class

font-code-xs-bold

CSS Variable

--font-static-code-xs-bold

Computed Value

Example

Tailwind Class	CSS Variable	Example
font-code-xl-bold	--font-static-code-xl-bold	Aa
font-code-lg-bold	--font-static-code-lg-bold	Aa
font-code-md-bold	--font-static-code-md-bold	Aa
font-code-sm-bold	--font-static-code-sm-bold	Aa
font-code-xs-bold	--font-static-code-xs-bold	Aa

Dynamic Fonts

Dynamic fonts scale responsively based on viewport size, providing fluid typography that adapts to different screen dimensions.

Dynamic Display

Tailwind Class

font-dynamic-display-lg

CSS Variable

--font-dynamic-display-lg

Computed Value

Example

Tailwind Class

font-dynamic-display-md

CSS Variable

--font-dynamic-display-md

Computed Value

Example

Tailwind Class	CSS Variable	Computed Value	Example
font-dynamic-display-lg	--font-dynamic-display-lg		Aa
font-dynamic-display-md	--font-dynamic-display-md		Aa

Dynamic Heading

Tailwind Class

font-dynamic-heading-xxxl

CSS Variable

--font-dynamic-heading-xxxl

Computed Value

Example

Tailwind Class

font-dynamic-heading-xxl

CSS Variable

--font-dynamic-heading-xxl

Computed Value

Example

Tailwind Class

font-dynamic-heading-xl

CSS Variable

--font-dynamic-heading-xl

Computed Value

Example

Tailwind Class

font-dynamic-heading-lg

CSS Variable

--font-dynamic-heading-lg-default

Computed Value

Example

Tailwind Class	CSS Variable	Example
font-dynamic-heading-xxxl	--font-dynamic-heading-xxxl	Aa
font-dynamic-heading-xxl	--font-dynamic-heading-xxl	Aa
font-dynamic-heading-xl	--font-dynamic-heading-xl	Aa
font-dynamic-heading-lg	--font-dynamic-heading-lg-default	Aa

Dynamic Heading Bold

Tailwind Class

font-dynamic-heading-lg-bold

CSS Variable

--font-dynamic-heading-lg-bold

Computed Value

Example

Tailwind Class	CSS Variable	Computed Value	Example
font-dynamic-heading-lg-bold	--font-dynamic-heading-lg-bold		Aa

Spacing

Z-Index