Typography

Font Kerning v1.1.1

Utilities for removing spacing for specific pairs of letters automatically.

Class

classcss
font-kerning-autofont-kerning: auto
font-kerning-normalfont-kerning: normal
font-kerning-nonefont-kerning: none
Note: Your browser does not currently support the utilities.Note: Utility customizing is unavailable.See Letter Spacing for more manual control over letter spacing.

Usage

There are 5 types of letters that could be effectively kerning:

  • Rectangular: M, H, N (have vertical elements on both sides)
  • Rounded: O
  • Half-rounded: B, D
  • Half-Opened: L, E, C, K, J
  • Opened: X, T, W

Set a typo element to removing space in between each letter if any spaces are left.

LOREMKerning: autoLOREMKerning: none
<!-- Example -->
<y class="font-kerning-none">
  ...
</y>

Variant

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-visible
focus-within
active
visited
checked
disabled