CODEWITHSUNDEEP
css
Markus
Markus

Reputation: 1485

CSS: How could I deactivate kerning for my font?

How could I deactivate kerning for my font?

Upvotes: 2

Views: 3950

Answers (6)

Robert Máslo
Robert Máslo

Reputation: 458

You can insert Zero-width space between characters where you want to turn off kerning.

https://en.wikipedia.org/wiki/Zero-width_space

Upvotes: 0

Star Brilliant
Star Brilliant

Reputation: 3136

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.

Upvotes: 0

Peter Krauss
Peter Krauss

Reputation: 13982

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.

Upvotes: 14

rahul
rahul

Reputation: 187110

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>

Upvotes: 1

Brian Wigginton
Brian Wigginton

Reputation: 2652

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; }

Upvotes: 0

Ikke
Ikke

Reputation: 101261

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

Upvotes: 0

Related Questions