Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adjusting Kerning in CSS

Tags:

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 edges are aligned).

EDIT: Using http://letteringjs.com/ in conjunction with http://www.kernjs.com/ makes for pretty good kerning. As for the original problem, http://fittextjs.com/ solves this nicely.

like image 449
Jeffrey Lo Avatar asked Oct 03 '10 05:10

Jeffrey Lo


People also ask

Can you kern in CSS?

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 .

How do I increase the gap between letters in CSS?

normal − The default spacing between letters is not changed. In practice, this is equivalent to setting the value to 0. length − This will add to the spacing between letters - the greater the length, the more space will be seen between letters. Negative values are permitted.


1 Answers

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

like image 125
4 revs, 2 users 93% Avatar answered Oct 23 '22 08:10

4 revs, 2 users 93%