2

How could I deactivate kerning for my font?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Markus
  • 1,465
  • 4
  • 18
  • 29

5 Answers5

14

See the kerning concept at Wikipedia.

Kerning is not controlled by letter-spacing, and there are no font-kerning for CSS1 or CSS2. The new specification, CSS3, has not been approved as a standard (W3C Recommendation), but there are a property proposed for font-kerning, see 2012 draft,

http://www.w3.org/TR/css3-fonts/#font-kerning-prop

Only specific fonts, like OpenFonts, have this property.

Even with no kerning control, the use of a non-zero letter-spacing can change the "human kerning perception", producing a "deactivate kerning" effect. Example: enhance kerning with letter-spacing:-0.1em and lost with letter-spacing:0.5em.

With CSS1 letter-spacing property you can lost or enhance kerning perception, and into a "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>

See the above example here.

Peter Krauss
  • 13,174
  • 24
  • 167
  • 304
  • 1
    This answer is the only correct one. `letter-spacing` does not influence kerning, but the *relative* distances between the characters (*after* kerning has been applied). – Pekka Nov 01 '10 at 17:42
  • But the disadvantage of this technique (the only I could find so far) is that it interferes with the general spacing of a text so that if you have i.g. wide set capitals and you use „kerning“ for some letter pairs it does not „add“ a kerning (subtract) to the pair but set a complete new spacing to it which is not the same. So you would have to recalculate every kerning pair depending on a particular spacing of text zone. A real font kerning does not do this. It adds (subtracts) space to a pair independent of general rhythm. – Garavani Aug 24 '16 at 05:41
  • Hi @Garavani, [this *kerning illusion*](http://jsfiddle.net/32EQy/1/) is only for very specific "illusionist effects" (eg. at covers and outdoors). The real *kerning* need better typographic tools (ex. better typesetting in EPUB), and I think that is evolving with the [replacement of old technologies by CSS3-page](http://stackoverflow.com/a/21345708/287948). It is a big ecossystem of [open standards](https://en.wikipedia.org/wiki/Open_format) and need lot of time to be stable and useful... someday perhaps you see webpages using kerning. Check the use of "HTML to PDF" to the nowadays. – Peter Krauss Aug 24 '16 at 06:01
1

Use 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>
rahul
  • 184,426
  • 49
  • 232
  • 263
0

I don't know if this is exactly possible, but you could try to look at the letter-spacing property.

Ikke
  • 99,403
  • 23
  • 97
  • 120
0

CSS controls kerning with the letter-spacing attribute. Try setting it to 0 to return the font to it's normal kerning.

p { letter-spacing: 0; }
Brian Wigginton
  • 2,632
  • 3
  • 21
  • 28
  • CSS **not** "controls kerning", but if using non-zero letter-spacing the "_human kerning perception_" is lost. Example: enhance kerning with `letter-spacing:-0.1em` and lost with `letter-spacing:0.5em`. – Peter Krauss May 08 '12 at 12:38
  • 1
    This answer should be deprecated. See below for a better answer. – Brian Wigginton Sep 19 '12 at 18:46
0

Try text-rendering: optimizeSpeed, this disables kerning at least on my browser.

That is to say, "VA".width == "V".width + "A".width.

letter-spacing does not disable kerning, "VA" is still shorter than "V" + "A".

So, try text-rendering. Though it gets a worse text rendering, it does disable kerning.

Star Brilliant
  • 2,916
  • 24
  • 32