JSFiddle - React, Tailwind, and code Playground

by Fiddel

HTML

<p id="a">Hello</p>
<p id="b">Hello</p>
<p id="c">Hello</p>
<p id="d">Hello</p>
<p id="e">Hello</p>

<p id="a2">Hello</p>
<p id="b2">Hello</p>
<p id="c2">Hello</p>
<p id="d2">Hello</p>
<p id="e2">Hello</p>

<p id="results">Results:</p>
<img src="http://phrogz.net/tmp/SubPixelLetterSpacing.png">

CSS

body {font-size:2em;}


#a { letter-spacing:0 }
#b { letter-spacing:0.3px }
#c { letter-spacing:0.5px }
#d { letter-spacing:0.8px }
#e { letter-spacing:1px }

#a2 { letter-spacing:0; margin-top:2em }
#b2 { letter-spacing:0.02em }
#c2 { letter-spacing:0.04em }
#d2 { letter-spacing:0.06em }
#e2 { letter-spacing:0.08em }

#results { margin:1em 0 }