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.
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 .
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.
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!).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With