Adjusting Kerning in CSS

Question

Is it possible with CSS to adjust kerning in CSS? I\'d like to be able to kern a block of text such that it will actually look like a block of text (both left and right edge

Answer 1

Check out my project Jerning.com [see below] for kerning text.

Usage is very simple and is based of pairs of characters, for example:

<h1>Hello World</h1>

The W and o will look weird without kerning.

Simply do:

$('h1').jerning("Wo", -0.1);

which will apply kerning between all upper case Ws and lower case os in h1 tags.

---

I retired the Jerning project but please find the minified source code below for inclusion in your project if you wish:

(function(b){function e(a,c){var d;if(b.isPlainObject(a))d=a;else try{d=b.parseJSON(a)}catch(f){d=b.parseJSON('{"'+a+'":'+c+"}")}return d}function h(a,c){var d="";b(a).replaceWith(b.map(a.nodeValue.split("").reverse(),function(a,e){var g=a;b.each(c,function(c,e){d==c[1]&&a==c[0]&&(g=b.fn.wrapCharacter(a,e))});d=a;return g}).reverse().join(""))}b.fn.wrapCharacter=function(a,b){return'<span style="letter-spacing:'+b+'em">'+a+"</span>"};b.fn.jerning=function(a,c){var d=e(a,c),f=this.contents();b.each(f,
function(a,c){1==c.nodeType&&b(c).jerning(d);3==c.nodeType&&h(c,d)});return this}})(jQuery);

Unfortunately I don't have the non-minified version any more; the above comes with no guarantees of all cases working!

Answer 2

What seems to be required is dynamic kerning, because what the Thread Opener and also I am/is in need is this: justify does block alignment, as good as possible, by adding space between the words, which leaves "holes" in the text block. Now take instead the line with left align (so no added space), calculate it's physical width, compare with block width available, divide the diffrence trough the number of letters in that line, then use this value as the letterspace addition. This will look more like a newspaper layout than only a text-align:justify. I have to say tho, I am not sure whether the lines in a textblock can be accessed "by line number" in a dynamic page layout, can it? edit: I tried that yesterday. I use innerHTML to read the content of a text block, then I split and copy it to an array of which each entry/line gets its own DIV tag and id. Then I ajust letterspacing accordingly. Only few of the newest browsers support subpixel-letterspacing, so it works only with medium to big sized fonts. The problem I run into is: due to no Subpixelsupport it works only to some degree, although nice looking, so I tried to additionally justify the result with the text-align attribute, but it's not working after I altered letterspacing.. Left and right alignement works, but not "justify", this one works only before the addition of letterspacing. Could be an opera problem. If I can fix this then I'll post the code.

edit 2. it works now but for some reason I cannot post code here. that is from webkit 10.3.3.13 on mobile. Send me a message if you're interested in the code.

Answer 3

Kerning, letter-spacing (aka tracking) and justify blocks are three different typography properties.

The newest link I found about kerning is from TypeKit, with directions on how to enable the embedded kerning data with their webfonts. http://blog.typekit.com/2014/02/05/kerning-on-the-web/#comment-19916

Manual kerning - adjusting the space between each single letter in a word - will always be a matter of taste and preference. And can be achieved thru kern.js or kerning.js

What makes the TypeKit solution stand out to me, is it enables kerning for all body text automatically by utilizing the meta data in OpenType fonts. I just found it, and am pretty excited to use it in my next project!

For easy reference, the new css properties discussed in the link are:

text-rendering: optimizeLegibility;
font-feature-settings: "kern";
font-kerning: normal;

With prefixes for font-feature-settings including:

  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";

Answer 4

Typographic alignment both left and right is called justification. Kerning is more about the adjustment of spaces between letters, and doesn't have much to do with alignment (because justifying text is more adjustment of spaces between words than characters). Anyway, you want to set the text-align property to justify:

<p style="text-align: justify">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum tincidunt ante mollis ornare. Nulla id
    nulla justo. Mauris quis sapien ac orci consequat accumsan. Quisque iaculis ipsum ac nulla venenatis sagittis. Aliquam
    hendrerit mi a turpis malesuada nec dictum est vehicula. Curabitur quis dolor eu metus malesuada dictum adipiscing et
    risus. Aliquam erat volutpat. Aenean pharetra aliquam magna, fringilla tempus erat iaculis eu. Suspendisse potenti.
    Sed fringilla lobortis viverra.
</p>

Answer 5

Some control on kerning can be achieved in CSS using the letter-spacing attribute.

However, if all you need is to get "both left and right edges aligned", you might want to try using text-align: justify.

EDIT: CSS3 defines a font-kerning property that can be used to enable or disable kerning for specific elements.

Answer 6

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!).