Adjusting Kerning in CSS

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

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.

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

CSS: adjusting spacing between letter according to container width?

...somewhere, in a javascript file far far away...

$(".container").each(function(idx, el) {
    $(el).css("letter-spacing", calculateSpacing(el, $(el).height()));        
});

You can use the plugin found here, which contains the calculateSpacing function, albeit it works on width, not height (so some modification may be necessary):

http://heychinaski.com/jquery/js/jquery.charjustify.js

CSS scaling letter spacing proportionally to fluid font size

Try using em units to control the the spacing.

here is a possible reference: https://cssreference.io/property/letter-spacing/

CSS text justify with letter spacing

Here's a script which can do it. It isn't pretty, but maybe you can hack it to meet your needs. (Updated to handle resizing)

function SplitText(node) {

  var text = node.nodeValue.replace(/^\s*|\s(?=\s)|\s*$/g, "");

  for (var i = 0; i < text.length; i++) {

    var letter = document.createElement("span");

    letter.style.display = "inline-block";

    letter.style.position = "absolute";

    letter.appendChild(document.createTextNode(text.charAt(i)));

    node.parentNode.insertBefore(letter, node);

    var positionRatio = i / (text.length - 1);

    var textWidth = letter.clientWidth;

    var indent = 100 * positionRatio;

    var offset = -textWidth * positionRatio;

    letter.style.left = indent + "%";

    letter.style.marginLeft = offset + "px";

    //console.log("Letter ", text[i], ", Index ", i, ", Width ", textWidth, ", Indent ", indent, ", Offset ", offset);

  }

  node.parentNode.removeChild(node);

}

function Justify() {

  var TEXT_NODE = 3;

  var elem = document.getElementById("character_justify");

  elem = elem.firstChild;

  while (elem) {

    var nextElem = elem.nextSibling;

    if (elem.nodeType == TEXT_NODE)

      SplitText(elem);

    elem = nextElem;

  }

}

#character_justify {

  position: relative;

  width: 40%;

  border: 1px solid red;

  font-size: 32pt;

  margin: 0;

  padding: 0;

}

#character_justify * {

  margin: 0;

  padding: 0;

  border: none;

}

<body onload="Justify()">

  <p id="character_justify">

    Something<br/> Like

    <br/> This

  </p>

</body>

How to do letter spacing every two letters with CSS only?

For a CSS only solution, without an nth-letter selector you're going to be dealing with workarounds. There is no nth-letter currently (although CSSWG is discussing it) as you'll no doubt know, so here's a possible workaround albeit an ugly one.

If you're happy to tweak for each instance of .number then you could use the following approach based on splitting the pairs of numbers using columns. Works pretty well for the given example:

.number {
    width: 8em;
    display: block;
    word-wrap: break-word;
    columns: 5;
    column-gap: 0.2em;
}

See: http://jsfiddle.net/WgRs6/

The width, columns and column-gap values will need to be tweaked depending on the numbers in the markup as well as the chosen font size. You'd also need to tweak them to change the space between the columns. Unfortunately, this would certainly break if there are numbers with different amount of digits (e.g. 1, 200, 3, 9000, 42, 100000). You asked for splitting between two numbers so hopefully that shouldn't be an issue for you.

Ideally you'd be able to use lettering.js, or any JavaScript which would split your letters into distinct span elements that you could then combine with .number span:nth-child(2n) to add your desired spacing. See: http://jsfiddle.net/SSq7M/

---

Related Topics