Text

The text utility classes help manage the font properties and text alignment of an element. These classes allow you to control the text properties easily.

Font Family

Class	Description
ff:sans	font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
ff:serif	font-family: Times, 'Times New Roman', Georgia, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
ff:monospace	font-family: 'Lucida Console', Courier, monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
ff:cursive	font-family: cursive
ff:fantasy	font-family: fantasy
ff:emoji	font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', emoji
ff:math	font-family: math
ff:fangsong	font-family: fangsong

ff:sans

The .ff:sans class sets the font family to a sans-serif typeface.

Sans-Serif Font

<div class="ff:sans">
  Sans-Serif Font
</div>

ff:serif

The .ff:serif class sets the font family to a serif typeface.

Serif Font

<div class="ff:serif">
  Serif Font
</div>

ff:monospace

The .ff:monospace class sets the font family to a monospace typeface.

Monospace Font

<div class="ff:monospace">
  Monospace Font
</div>

ff:cursive

The .ff:cursive class sets the font family to a cursive typeface.

Cursive Font

<div class="ff:cursive">
  Cursive Font
</div>

ff:fantasy

The .ff:fantasy class sets the font family to a fantasy typeface.

Fantasy Font

<div class="ff:fantasy">
  Fantasy Font
</div>

ff:emoji

The .ff:emoji class sets the font family to an emoji typeface.

Emoji Font

<div class="ff:emoji">
  Emoji Font
</div>

ff:math

The .ff:math class sets the font family to a math typeface.

Math Font

<div class="ff:math">
  Math Font
</div>

ff:fangsong

The .ff:fangsong class sets the font family to a fangsong typeface.

Fangsong Font

<div class="ff:fangsong">
  Fangsong Font
</div>

Font Weight

Class	Description
fw	font-weight: var(--sf-fw) 400
fw:i	font-weight: inherit
fw:b	font-weight: var(--sf-fw-bold) 600
fw:s	font-weight: var(--sf-fw-small) 300

Font Weight 400

<div class="fw">
  Font Weight 400
</div>

Font Weight inherit

<div class="fw:i">
  Font Weight inherit
</div>

Font Weight bold (600)

<div class="fw:b">
  Font Weight bold (600)
</div>

Font Weight small (300)

<div class="fw:s">
  Font Weight small (300)
</div>

Class	Description
fw:1	font-weight: 100
fw:2	font-weight: 200
fw:3	font-weight: 300
fw:4	font-weight: 400
fw:5	font-weight: 500
fw:6	font-weight: 600
fw:7	font-weight: 700
fw:8	font-weight: 800
fw:9	font-weight: 900

fw:1 to fw:9

These classes set the font weight from 100 to 900.

Font Weight 100

<div class="fw:1">
  Font Weight 100
</div>

Font Weight 200

<div class="fw:2">
  Font Weight 200
</div>

Font Weight 300

<div class="fw:3">
  Font Weight 300
</div>

Font Weight 400

<div class="fw:4">
  Font Weight 400
</div>

Font Weight 500

<div class="fw:5">
  Font Weight 500
</div>

Font Weight 600

<div class="fw:6">
  Font Weight 600
</div>

Font Weight 700

<div class="fw:7">
  Font Weight 700
</div>

Font Weight 800

<div class="fw:8">
  Font Weight 800
</div>

Font Weight 900

<div class="fw:9">
  Font Weight 900
</div>

Named Font Weight Classes

These classes set the font weight using named values.

INFO

These classes are static / not change

Class	Description
fw:thin	font-weight: 100
fw:extra-light / fw:ultra-light	font-weight: 200
fw:light	font-weight: 300
fw:normal	font-weight: 400
fw:medium	font-weight: 500
fw:semi-bold / fw:demi-bold	font-weight: 600
fw:bold	font-weight: 700
fw:extra-bold / fw:ultra-bold	font-weight: 800
fw:black / fw:heavy	font-weight: 900

Thin

<div class="fw:thin">
  Thin
</div>

Extra-light

<div class="fw:extra-light">
  Extra-light
</div>

Light

<div class="fw:light">
  Light
</div>

Normal

<div class="fw:normal">
  Normal
</div>

Medium

<div class="fw:medium">
  Medium
</div>

Semi-Bold

<div class="fw:semi-bold">
  Semi-Bold
</div>

Bold

<div class="fw:bold">
  Bold
</div>

Extra-Bold

<div class="fw:extra-bold">
  Extra-Bold
</div>

Black

<div class="fw:black">
  Black
</div>

Font Size

Class	Description
fz:h1	font-size: var(--sf-h1); 3rem font-weight: 700;
fz:h2	font-size: var(--sf-h2); 2.5rem font-weight: 700;
fz:h3	font-size: var(--sf-h3); 2rem font-weight: 600;
fz:h4	font-size: var(--sf-h4); 1.5rem font-weight: 600;
fz:h5	font-size: var(--sf-h5); 1.25rem font-weight: 500;
fz:h6	font-size: var(--sf-h6); 1rem font-weight: 500;
fz:i	font-size: inherit;
fz	font-size: var(--sf-fz); 1rem font-weight: 400;
fz:s	font-size: var(--sf-fz-small); 0.75rem font-weight: 300;

H1

<div class="fz:h1">
  H1
</div>

H2

<div class="fz:h2">
  H2
</div>

H3

<div class="fz:h3">
  H3
</div>

H4

<div class="fz:h4">
  H4
</div>

H5

<div class="fz:h5">
  H5
</div>

H6

<div class="fz:h6">
  H6
</div>

Inherit

<div class="fz:i">
  Inherit
</div>

Normal

<div class="fz">
  Normal
</div>

Small

<div class="fz:s">
  Small
</div>

Text Align

Class	Description
ta:c	text-align: center
ta:e	text-align: end
ta:j	text-align: justify
ta:l	text-align: left
ta:r	text-align: right
ta:s	text-align: start

center

<div class="ta:c">
  center
</div>

end

<div class="ta:e">
  end
</div>

justify

<div class="ta:j">
  justify
</div>

left

<div class="ta:l">
  left
</div>

right

<div class="ta:r">
  right
</div>

start

<div class="ta:s">
  start
</div>

White-space

Class	Description
whs:n	white-space: normal
whs:nw	white-space: nowrap
whs:p	white-space: pre
whs:pl	white-space: pre-line
whs:pw	white-space: pre-wrap

normal

<div class="whs:n">
  normal
</div>

nowrap

<div class="whs:nw">
  nowrap
</div>

pre

<div class="whs:p">
  pre
</div>

pre-line

<div class="whs:pl">
  pre-line
</div>

pre-wrap

<div class="whs:pw">
  pre-wrap
</div>

Line-height

Class	Description
lh	line-height: var(--sf-lh) 0.8 tags: All
lh:1	line-height: 1 tags: None
lh:i	line-height: inherit tags: None
lh:n	line-height: normal tags: None
lh:t	line-height: var(--sf-lh-txt) 1.5 tags: address, blockquote, dd, dt, li, p

line-height

<div class="lh">
  line-height
</div>

line-height: 1

<div class="lh:1">
  line-height: 1
</div>

line-height (inherit)

<div class="lh:i">
  line-height (inherit)
</div>

line-height (normal)

<div class="lh:n">
  line-height (normal)
</div>

line-height (text)

<div class="lh:t">
  line-height (text)
</div>