<div class="container">
  <p>The spacing between the individual letters is <em>increased</em> by <code>1em</code>. When you hover over the text container, the spacing will transition back to its normal default value. <code>letter-spacing</code> is transitionable so the spacing will change smoothly if you define a <code>transition</code></p>
  <div class="words">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil.
    </p>
    <h4>Since letter spacing is inherited, the letter spacing on this child element will also change as it does on the parent, unless you specify otherwise (spacing has been reset on this title)</h4>
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, facilis, sed, consectetur incidunt quia sint accusamus obcaecati quisquam asperiores officiis mollitia explicabo est ratione. Qui id ipsa ratione inventore nam!
    </div>
  </div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.25em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  max-width: 800px;
  margin: 50px auto;
}

.words {
  background-color: #0099cc;
  color: white;
  padding: 1em;
  letter-spacing: .5em;
  -webkit-transition: letter-spacing .6s ease;
  transition: letter-spacing .6s ease;
}

.words:hover {
  letter-spacing: normal;
}

.inner {
  background-color: #eee;
  color: #333;
  padding: 1em;
}

h4 {
  letter-spacing: normal;
}