Typography

Font Size

Utilities for sets the font size.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
text-xs	font-size: .75rem	Text
text-sm	font-size: .875rem	Text
text-md	font-size: 1rem	Text
text-lg	font-size: 1.125rem	Text
text-xl-1	font-size: 1.25rem	Text
text-xl-2	font-size: 1.5rem	Text
text-xl-3	font-size: 1.875rem	Text
text-xl-4	font-size: 2.25rem	Text
text-xl-5	font-size: 3rem	Text
text-xl-6	font-size: 4rem	Text
text-xl-7	font-size: 5rem	Text
text-xl-8	font-size: 6rem	Text

Usage

Set font-size to an element.

<div class="text-md">
  ...
</div>

<span class="text-md">
  ...
</span>

HTML

.dummy {
  @extend
    text-md;
}

SCSS

Set default font-size with <body> tag.

<body class="text-md">
  ...
</body>

HTML

body {
  @extend
    .text-md;
}

SCSS