iOS word-spacing bug

The whole thing is Optima's fault really, but I also tried Optima Nova and that made no difference. Let's go...

Created a heading like so:

	<h1><a href="#">Clive Portman</a></h1>

Wanted a smaller spacing between the two words, so used:

	h1 { word-spacing: -2px; }

Then discovered that when using the font Optima, the R runs into some following letters, such as T and Y. To get around this, I did this:

	<h1><a href="#">Clive Po<span class=optimar>r</span>tman</a></h1>

and

	span.optimar { letter-spacing: 2px; }

While fixing the lack of a gap after the R, it also added a bigger gap before the R when viewed on iOS. Removing the letter-spacing property made no difference. Removed the word-spacing for the <h1> and the gap disappeared.

So, bug is: <span> elements within elements containing a word-spacing property can sometimes add a gap before the <span> element, when seen in iOS.

Got around it by removing the word-spacing property and putting another <span> around the space, then reducing its font-size. Final code:

	<h1><a href="#">Clive<span class=optimaspace> </span>Po<span class=optimar>r</span>tman</a></h1>

	h1 {}
	span.optimar { letter-spacing: 2px; }
	span.optimaspace { font-size: 0.5em; }