Skip to content

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

ClassDescription
ff:sansfont-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
ff:seriffont-family: Times, 'Times New Roman', Georgia, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
ff:monospacefont-family: 'Lucida Console', Courier, monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
ff:cursivefont-family: cursive
ff:fantasyfont-family: fantasy
ff:emojifont-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', emoji
ff:mathfont-family: math
ff:fangsongfont-family: fangsong

ff:sans

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

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

ff:serif

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

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

ff:monospace

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

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

ff:cursive

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

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

ff:fantasy

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

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

ff:emoji

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

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

ff:math

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

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

ff:fangsong

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

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

Font Weight

ClassDescription
fwfont-weight: var(--sf-fw) 400
fw:ifont-weight: inherit
fw:bfont-weight: var(--sf-fw-bold) 600
fw:sfont-weight: var(--sf-fw-small) 300
Font Weight 400
html
<div class="fw">
  Font Weight 400
</div>
Font Weight inherit
html
<div class="fw:i">
  Font Weight inherit
</div>
Font Weight bold (600)
html
<div class="fw:b">
  Font Weight bold (600)
</div>
Font Weight small (300)
html
<div class="fw:s">
  Font Weight small (300)
</div>
ClassDescription
fw:1font-weight: 100
fw:2font-weight: 200
fw:3font-weight: 300
fw:4font-weight: 400
fw:5font-weight: 500
fw:6font-weight: 600
fw:7font-weight: 700
fw:8font-weight: 800
fw:9font-weight: 900

fw:1 to fw:9

These classes set the font weight from 100 to 900.

Font Weight 100
html
<div class="fw:1">
  Font Weight 100
</div>
Font Weight 200
html
<div class="fw:2">
  Font Weight 200
</div>
Font Weight 300
html
<div class="fw:3">
  Font Weight 300
</div>
Font Weight 400
html
<div class="fw:4">
  Font Weight 400
</div>
Font Weight 500
html
<div class="fw:5">
  Font Weight 500
</div>
Font Weight 600
html
<div class="fw:6">
  Font Weight 600
</div>
Font Weight 700
html
<div class="fw:7">
  Font Weight 700
</div>
Font Weight 800
html
<div class="fw:8">
  Font Weight 800
</div>
Font Weight 900
html
<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

ClassDescription
fw:thinfont-weight: 100
fw:extra-light / fw:ultra-lightfont-weight: 200
fw:lightfont-weight: 300
fw:normalfont-weight: 400
fw:mediumfont-weight: 500
fw:semi-bold / fw:demi-boldfont-weight: 600
fw:boldfont-weight: 700
fw:extra-bold / fw:ultra-boldfont-weight: 800
fw:black / fw:heavyfont-weight: 900
Thin
html
<div class="fw:thin">
  Thin
</div>
Extra-light
html
<div class="fw:extra-light">
  Extra-light
</div>
Light
html
<div class="fw:light">
  Light
</div>
Normal
html
<div class="fw:normal">
  Normal
</div>
Medium
html
<div class="fw:medium">
  Medium
</div>
Semi-Bold
html
<div class="fw:semi-bold">
  Semi-Bold
</div>
Bold
html
<div class="fw:bold">
  Bold
</div>
Extra-Bold
html
<div class="fw:extra-bold">
  Extra-Bold
</div>
Black
html
<div class="fw:black">
  Black
</div>

Font Size

ClassDescription
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
html
<div class="fz:h1">
  H1
</div>
H2
html
<div class="fz:h2">
  H2
</div>
H3
html
<div class="fz:h3">
  H3
</div>
H4
html
<div class="fz:h4">
  H4
</div>
H5
html
<div class="fz:h5">
  H5
</div>
H6
html
<div class="fz:h6">
  H6
</div>
Inherit
html
<div class="fz:i">
  Inherit
</div>
Normal
html
<div class="fz">
  Normal
</div>
Small
html
<div class="fz:s">
  Small
</div>

Text Align

ClassDescription
ta:ctext-align: center
ta:etext-align: end
ta:jtext-align: justify
ta:ltext-align: left
ta:rtext-align: right
ta:stext-align: start
center
html
<div class="ta:c">
  center
</div>
end
html
<div class="ta:e">
  end
</div>
justify
html
<div class="ta:j">
  justify
</div>
left
html
<div class="ta:l">
  left
</div>
right
html
<div class="ta:r">
  right
</div>
start
html
<div class="ta:s">
  start
</div>

White-space

ClassDescription
whs:nwhite-space: normal
whs:nwwhite-space: nowrap
whs:pwhite-space: pre
whs:plwhite-space: pre-line
whs:pwwhite-space: pre-wrap
normal
html
<div class="whs:n">
  normal
</div>
nowrap
html
<div class="whs:nw">
  nowrap
</div>
pre
html
<div class="whs:p">
  pre
</div>
pre-line
html
<div class="whs:pl">
  pre-line
</div>
pre-wrap
html
<div class="whs:pw">
  pre-wrap
</div>

Line-height

ClassDescription
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
html
<div class="lh">
  line-height
</div>
line-height: 1
html
<div class="lh:1">
  line-height: 1
</div>
line-height (inherit)
html
<div class="lh:i">
  line-height (inherit)
</div>
line-height (normal)
html
<div class="lh:n">
  line-height (normal)
</div>
line-height (text)
html
<div class="lh:t">
  line-height (text)
</div>

Released under the MIT License