Bug with Trebuchet MS

"letter-spacing: -0.31em;" is not enough when used with "Trebuchet MS" or "Verdana" and body font-size of 12px

by oilvier

HTML

<div class="grid">
<div class="grid__cell unit-1-2"><div class="box">1</div></div>
<div class="grid__cell unit-1-2"><div class="box">2</div></div>
</div>

<div class="with-font">
    <div class="grid">
    <div class="grid__cell unit-1-2"><div class="box">1</div></div>
    <div class="grid__cell unit-1-2"><div class="box">2</div></div>
    </div>
</div>

CSS

/* =============================================================================
   Grid
   ========================================================================== */
/*
 * Example uses:
 *
 * <div class="grid">
 *     <div class="grid__cell unit-1-2"></div>
 *     <div class="grid__cell unit-1-2"></div>
 *     <div class="grid__cell unit-1-3"></div>
 *     <div class="grid__cell unit-1-3 before-1-3"></div>
 * </div>
 *
 * <div class="grid grid--center">
 *     <div class="grid__cell unit-1-3"></div>
 *     <div class="grid__cell unit-1-3"></div>
 * </div>
 */
/* Grid core
   ========================================================================== */
/*
 * Grid container
 * Must only contain `.grid` or `.grid__cell` components as children.
 */
.grid {
  display: block;
  padding: 0;
  margin: 0 -10px;
  /* Ensure consistent default alignment */
  text-align: left;
  /* Remove inter-unit whitespace for all non-monospace font-families
   * If you're using a monospace base font, you will need to set the `grid`
   * font-family to `sans-serif` and then redeclare the monospace font on
   * the `grid__cell` objects.
   */
  letter-spacing: -0.31em;
  /* Protect against WebKit bug with optimizelegibility */
  text-rendering: optimizespeed;
}

/*
 * Child `grid` object adjustments
 * Used for more complex fixed-fluid hybrid grids
 */
.grid > .grid {
  overflow: hidden;
  margin-right: 0;
  margin-left: 0;
}

/*
 * Grid units
 * No explicit width by default. Apply `.unit-x-y` classes.
 */
.grid__cell {
  width: 100%;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0 10px;
  /* controls vertical positioning of units */
  vertical-align: top;
  /* keeps unit content correctly aligned */
  text-align: left;
  /* reset text defaults */
  letter-spacing: normal;
  word-spacing: normal;
  text-rendering: auto;
}

/*
 * Modifier: horizontally center all grid units
 * Allows for...

JavaScript

/* 

"letter-spacing: -0.31em;" is not enough when used with "Trebuchet MS" or "Verdana" and body font-size of 12px

*/