Css: How Could I Deactivate Kerning for My Font

CSS: How could I deactivate kerning for my font?

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

Adjusting Kerning in CSS

As user Typeoneerror answered, letter-spacing does not influence kerning.
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,

https://www.w3.org/TR/css-fonts-3/#font-kerning-prop

Only specific fonts, like OpenFonts, have this property.

CSS not "controls kerning", but if using non-zero letter-spacing the "human kerning perception" can be lost. 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.

---

EDIT 2014: I not changed the original text above today, I am opening the answer for your changes (Wiki mode), for proofreading and updates. At the moment this is the most voted answer (21 vs 10) and HTML5 will be a recommendation... Please, help to improve this text (and/or the Wikipedia's linked text!).

How to control the font kerning for Canvas fillText() in Chrome?

From W3 CSS3 Fonts:

To explicitly turn on the font-kerning you need to set the font-kerning property to normal,

canvas{
    font-kerning : normal;
}

Check this JSFiddle

Based on this article on Cross-browser kerning pairs & ligatures, Alternatively you can use the optimizeLegibility like this,

canvas{
     text-rendering: optimizeLegibility;
}

Check this JSFiddle

The declaration is currently supported by: Safari 5, The Webkit
Nightlies & Chrome.

Firefox already uses optimizeLegibility by default for text sizes
above 20px.

Tighten the kerning for a particular pair?

I just created this project for exactly this purpose:

Jerning.com

Usage is simple - so for your example you would do the following:

$('p').jerning("VA", -0.1);

Which means you don't have to do manual editing of spans for large bodies of text.

Kerning on font between chrome and firefox

A quick dirty solution is

#menu{
  white-space: nowrap;
  overflow: hidden; /* means you don't get a dirty edge, but the last link may be smaller on the right */
}

Ideally though, you shouldn't be relying on the width of the font to make your menu look right.
If you have the time, give each of these links a class, and a custom width.
Or even better, use a list with links in each item, to get greater control.

For example, if you add:

.item{
  padding: 0;
  width: 16.66%; /* assuming you always have 6 links */
}

...they will always fit, but some will look rubbish.
For the most professional-looking finish, you'll want to give each a class and custom width.

How can I remove letter-spacing for the last letter of an element in CSS?

You can set your element to have a right margin of -1.2em, which would counteract the letter spacing.

e.g.

.menu-header-selector {
  display:block;
  letter-spacing:1.2em;
  margin-right:-1.2em;
  text-align:right;
}

To answer your question regarding pseudo-selector, there isn't a per character pseudo-selector as far as I'm aware. (EDIT: Scratch that, there's the :First-Letter selector, which Jonas G. Drange pointed out).

EDIT: You can find a basic sample here: http://jsfiddle.net/teUxQ/

@font-face and wrong letter tracking/spacing

I've had similar problems with fonts I converted on font-squirrel. One of those times, going back to the generator and playing on the expert options, notably "Remove Kerning" solved it.

---

Related Topics