font-variant
Controls small-caps and kerning. Use fvsc to apply small-caps to decorative headings or labels.
Class List
| Class | CSS | Description |
|---|---|---|
fvn | font-variant: normal | Default. No special variants |
fvsc | font-variant: small-caps | Converts lowercase to small capitals |
fvasc | font-variant: all-small-caps | Converts both cases to small capitals |
fka | font-kerning: auto | Browser auto kerning decision |
fkn | font-kerning: none | Disables kerning |
fknl | font-kerning: normal | Always applies kerning |
Visual Comparison
Compares the effect of font-variant and font-kerning on text.
Normal — fvn
The Quick Brown Fox Jumps Over The Lazy Dog
Small Caps — fvsc
The Quick Brown Fox Jumps Over The Lazy Dog
All Small Caps — fvasc
The Quick Brown Fox Jumps Over The Lazy Dog
Kerning None — fkn
The Quick Brown Fox Jumps Over The Lazy Dog
Kerning Normal — fknl
The Quick Brown Fox Jumps Over The Lazy Dog
Class Details
fvnfont-variant: normal
Default value. Removes special variants such as small-caps.
<!-- Reset small caps -->
<div class="fvsc">
<p>Text with small caps applied</p>
<p class="fvn">Back to normal text</p>
</div>fvscfont-variant: small-caps
Converts lowercase to small capitals. Suitable for decorative headings, labels, and abbreviation displays.
<!-- Decorative heading -->
<h2 class="fvsc fs2-4rem fw700 cFAFAFA ls0-05em">
Section Title
</h2>
<!-- Abbreviation label -->
<span class="fvsc fs14px cA1A1AA ls0-05em">html / css / javascript</span>fvascfont-variant: all-small-caps
Converts both uppercase and lowercase to small-caps. Used when uniformly sized uppercase text is needed.
<!-- Uniform small caps -->
<p class="fvasc fs16px cFAFAFA ls0-05em">
All Letters Become Small Caps
</p>fkafont-kerning: auto
Browser automatically determines whether to apply kerning. Sufficient as default in most cases.
<!-- Auto kerning -->
<p class="fka fs2rem cFAFAFA">AVATAR Typography WAR</p>fknfont-kerning: none
Disables kerning. Used when fixed-width letter spacing or performance optimization is needed.
<!-- Disable kerning -->
<p class="fkn fs2rem cFAFAFA">AVATAR Typography WAR</p>fknlfont-kerning: normal
Always applies the kerning information included in the font. Used to explicitly ensure typography quality.
<!-- Force kerning -->
<p class="fknl fs2rem cFAFAFA">AVATAR Typography WAR</p>Tips & Notes
small-caps vs text-transform: uppercase
fvsc converts lowercase to small capitals, while ttu converts all to same-sized capitals. Use small-caps when visual hierarchy is needed.
Kerning varies by font
In fonts without kerning information, there may be no difference between fknl and fkn.