CSS: How can I turn off kerning for my font?
See Wikipedia kerning concept .
Kerning is not controlled by letter spacing, and for CSS1 or CSS2 it is not font-kerning
. The new specification, CSS3, has not been approved as a standard (W3C Recommendation), but there is a property proposed for font-kerning
, see 2012 draft.
http://www.w3.org/TR/css3-fonts/#font-kerning-prop
Only special fonts such as OpenFonts have this property .
Even with control kerning is not the use of a non-zero distance between the letters can change the "perception of human kerning", creating the effect of "deactivate kerning". Example: Increase kerning with letter-spacing:-0.1em
and lose with letter-spacing:0.5em
.
With the CSS1 property letter-spacing
you can lose or improve the perception of kerning , and in "letter-spaced text" you can simulate kerning:
<div style="font-size:20pt;background-color:#bcd">
VAST <small>(normal)</small>
<br/>
<span style="letter-spacing:-0.1em">VAST</span>
<small>(enhance perception)</small>
<br/>
<span style="letter-spacing:0.5em">VAST</span>
<small>(lost perception)</small>
<br/>
<!-- SIMULATE KERNING AT SPACED TEXT -->
<div style="letter-spacing:6pt">
SIMULATE: <span style="letter-spacing:4pt">VA</span>ST TEXT
</div>
</div>
Below is an example.
source to share
Use the letter-spacing property
<style>
.kern
{
letter-spacing: 10px;
}
.nokern
{
letter-spacing: 0px;
}
</style>
<div id="div1" class="kern">
test test test test
</div>
<div id="div2" class="nokern">
test test test test
</div>
source to share
Try it text-rendering: optimizeSpeed
, this will disable kerning, at least in my browser.
That is "VA".width == "V".width + "A".width
.
letter-spacing
does not disable kerning, "VA" is still shorter than "V" + "A".
So give it a try text-rendering
. While this degrades text rendering, it disables kerning.
source to share