title: Is it possible to have different letter-spacing between characters in the same word? Can this be accomplished with CSS only?
body: <p>I've done some research, and I'm aware of the letter-spacing CSS property, but is it possible to have different characters within the same word spaced differently?</p>
  
  <p>I wouldn't be skipping any layers, so I couldn't accomplish this with using span tags every two letters.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ex      { letter-spacing: -2.0px }
  .am      { letter-spacing: -1.5px }
  .pl      { letter-spacing: -1.0px }
  .e       { letter-spacing: -0.5px }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="ex"&gt;Ex&lt;/span&gt;&lt;span class="am"&gt;am&lt;/span&gt;&lt;span class="pl"&gt;pl&lt;/span&gt;&lt;span class="e"&gt;e&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The functionality I'm looking for would be more like this, but I'm not sure it's possible:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ex      { letter-spacing: -2.0px }
  .am      { letter-spacing: -1.5px }
  .pl      { letter-spacing: -1.0px }
  .e       { letter-spacing: -0.5px }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;kern class="1"&gt;E&lt;kern2 class="2"&gt;x&lt;/kern&gt;&lt;kern3 class="3"&gt;a&lt;/kern2&gt;&lt;kern4 class="4"&gt;m&lt;/kern3&gt;&lt;kern5 class="5"&gt;p&lt;/kern4&gt;&lt;kern6 class="6"&gt;l&lt;/kern5&gt;e&lt;/kern6&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I appreciate any feedback, thanks!</p>