Typography

A set of global utility classes for text: standard roles (headings, body, captions), weight, alignment, transformation and truncation. All classes use the .s-text-* prefix, are built on design tokens (--s-font-size-*, --s-font-weight-*, --s-line-height-*) and are available wherever @smalt-ui/core/styles.css is loaded, without wrapping anything in a component.

Families

The library ships the Inter font. Headings have their own token but use the same font as body text by default:

Token	Font	Used for
--s-font-sans	Inter	everything except headings
--s-font-heading	var(--s-font-sans)	.s-text-h1…h6 and component titles (dialogs, cards, steps)
--s-font-mono	JetBrains Mono + system	monospaced values

Font files are loaded through a separate entry, @smalt-ui/core/fonts.css; how to replace them or serve them yourself is described in Theming.

Scale

The roles follow the Material typography set (h1…h6, subtitle, body, caption, overline), but the values are adapted to Smalt UI tokens. Each class sets font-size, font-weight, line-height and letter-spacing at once.

Heading

Heading 1Inter.s-text-h1

Heading

Heading 2Inter.s-text-h2

Heading

Heading 3Inter.s-text-h3

Heading

Heading 4Inter.s-text-h4

Heading

Heading 5Inter.s-text-h5

Heading

Heading 6Inter.s-text-h6

Subtitle

Subtitle 1Inter.s-text-subtitle1

Subtitle

Subtitle 2Inter.s-text-subtitle2

Paragraph body text

Body 1Inter.s-text-body1

Paragraph body text

Body 2Inter.s-text-body2

Element caption

CaptionInter.s-text-caption

Overline text

OverlineInter.s-text-overline

Heading 1

Heading 3

Heading 5

Subtitle 1

Body 1: paragraph body text.

Caption: element caption

Overline

<template>
  <h1 class="s-text-h1">Heading 1</h1>
  <p class="s-text-body1">Body 1: paragraph body text.</p>
  <span class="s-text-caption">Caption: element caption</span>
  <span class="s-text-overline">Overline</span>
</template>

Class	Size	Weight
.s-text-h1	3.75rem	300
.s-text-h2	3rem	300
.s-text-h3	2.25rem	400
.s-text-h4	1.875rem	400
.s-text-h5	1.5rem	400
.s-text-h6	1.25rem	500
.s-text-subtitle1	1rem	400
.s-text-subtitle2	0.875rem	500
.s-text-body1	1rem	400
.s-text-body2	0.875rem	400
.s-text-caption	0.75rem	400
.s-text-overline	0.75rem	500 (uppercase)

Weight

The .s-text-weight-* classes change only font-weight and combine with any role.

Thin (100)Light (300)Normal (400)Medium (500)Semibold (600)Bold (700)Black (900)

<template>
  <span class="s-text-weight-light">Light</span>
  <span class="s-text-weight-medium">Medium</span>
  <span class="s-text-weight-bold">Bold</span>
</template>

Class	font-weight
.s-text-weight-thin	100
.s-text-weight-light	300
.s-text-weight-normal	400
.s-text-weight-medium	500
.s-text-weight-semibold	600
.s-text-weight-bold	700
.s-text-weight-black	900

Alignment

Left

Center

Right

Justified: the line stretches to both edges of the block, with hyphenation (hyphens).

<template>
  <p class="s-text-left">Left</p>
  <p class="s-text-center">Center</p>
  <p class="s-text-right">Right</p>
  <p class="s-text-justify">Justified</p>
</template>

Class	Effect
.s-text-left	text-align: left
.s-text-center	text-align: center
.s-text-right	text-align: right
.s-text-justify	text-align: justify + hyphens: auto

Transformation and decoration

uppercaseLOWERCASEevery word capitalizeditalicstrikethrough

<template>
  <span class="s-text-uppercase">uppercase</span>
  <span class="s-text-capitalize">every word capitalized</span>
  <span class="s-text-italic">italic</span>
  <span class="s-text-strike">strikethrough</span>
</template>

Class	Effect
.s-text-uppercase	text-transform: uppercase
.s-text-lowercase	text-transform: lowercase
.s-text-capitalize	text-transform: capitalize
.s-text-italic	font-style: italic
.s-text-no-wrap	white-space: nowrap
.s-text-strike	text-decoration: line-through

Truncation

.s-text-truncate cuts a single line with an ellipsis; .s-text-truncate-2 / -3 cut at 2 and 3 lines respectively.

A single line that will not fit into a narrow container and gets cut with an ellipsis.

Two lines: long text wraps, and whatever does not fit into the two allotted lines is hidden behind an ellipsis at the end.

<template>
  <div class="s-text-truncate">A single line…</div>
  <div class="s-text-truncate-2">Two lines at most…</div>
</template>

Class	Effect
.s-text-truncate	single-line ellipsis truncation
.s-text-truncate-2	truncation to 2 lines (line-clamp)
.s-text-truncate-3	truncation to 3 lines (line-clamp)

Customization

Scale values are build-time SASS maps with !default, which can be overridden before @use:

• $typography: roles (h1…overline), as (size, weight, leading, tracking) objects;
• $font-size: font sizes (xs…6xl), $font-weight: weights (thin…black);
• $font-sans / $font-heading / $font-mono: families.

Sizes and weights refer to the --s-font-size-* / --s-font-weight-* CSS variables, so individual scale values can also be changed at runtime by overriding the relevant variable.