Kerning is the spacing between letters. It's part of the font file.
It can make text easier and more pleasing to read.
The font-kerning
property enables kerning.
Two lines of text: one with and the other without font-kerning
.
Notice how the word 'Text' in the first line appears more balanced than the second line.
Text with font kerning.
Text without font kerning.
<style>
.kerning {
font-kerning: normal;
font-family: serif;
font-size: 50px;
}
.nokerning {
font-kerning: none;
font-family: serif;
font-size: 50px;
}
</style>
<p class="kerning">Text with font kerning.</p>
<p class="nokerning">Text without font kerning.</p>
font-kerning: auto | normal | none;
Values | Description |
---|---|
auto
|
Default. The browser determines whether font-kerning is beneficial or not. |
normal
|
Font-kerning is applied. |
none
|
Font-kerning is not applied. |
This table shows when font-kerning
support started for each browser.
Chrome
|
32.0 | Jan 2014 |
Firefox
|
34.0 | Dec 2014 |
IE/Edge
|
10.0 | Sep 2012 |
Safari
|
7.0 | Oct 2013 |