CSS Kerning for Large Numbers

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

Remove white space above and below large text in an inline-block element

It appears as though you need to explicitly set a font, and change the line-height and height as needed. Assuming 'Times New Roman' is your browser's default font:

span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
  /*new:*/
  font-family: 'Times New Roman';
  line-height: 34px;
  height: 35px;
}

<span>
    BIG TEXT
</span>

Pure CSS to make font-size responsive based on dynamic amount of characters

Note: This solution changes based on viewport size and not the amount of content

I just found out that this is possible using VW units. They're the units associated with setting the viewport width. There are some drawbacks, such as lack of legacy browser support, but this is definitely something to seriously consider using. Plus you can still provide fallbacks for older browsers like so:

p {
    font-size: 30px;
    font-size: 3.5vw;
}

http://css-tricks.com/viewport-sized-typography/
and
https://medium.com/design-ux/66bddb327bb1

Letter-spacing wrong text center alignment

It seems you need to indent the text by the same amount as the letter-spacing. The first letter does not have the spacing applied to the left side

div {  width: 400px;  height: 400px;  background-color: #3b0d3b;  text-align: center;  margin: auto;}
p {  color: #fff;  background: black;  text-align: center;  font-size: 1.2em;  padding: 0;  margin: 0;}
.spacing {  letter-spacing: .4em;}
.spacing-large {  letter-spacing: 0.9em;  text-align: center;  text-indent: 0.9em;}

<div>  <p>- Foo Bar Zan -</p>  <p class="spacing">- Foo Bar Zan -</p>  <p class="spacing-large">- Foo Bar Zan -</p></div>

---

Related Topics