Verdana font rendering problem for some sizes

Words containing "or" seem to have space inserted

[surfin2u]

Notice how a space seems to appear between the o and the r in some sizes when you view this code in a browser (I used IE 7 and Opera 9.21).

<font face=verdana size=1>performance tailored information tortured</font>
<br>
<font face=verdana size=2>performance tailored information tortured</font>
<br>
<font face=verdana size=3>performance tailored information tortured</font>
<br>
<font face=verdana size=4>performance tailored information tortured</font>
<br>
<font face=verdana size=5>performance tailored information tortured</font>
<br>
<font face=verdana size=6>performance tailored information tortured</font>
<br>
<hr>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
10;">
performance tailored information tortured</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
11;">
performance tailored information tortured</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
12;">
performance tailored information tortured</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
13;">
performance tailored information tortured</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
14;">
performance tailored information tortured</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
15;">
performance tailored information tortured
<b>(this is the size that I now use)</b>
</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
16;">
performance tailored information tortured</p>

[Marshall]

My question is font-size what? You don't specifiy em, %, px, or pt.

Marshall

[surfin2u]

Thanks for your question. I was relying on the default, so here's a more specific case to try in the third set using px --- looking forward to hearing your results:

<font face=verdana size=1>performance tailored information tortured</font>
<br>
<font face=verdana size=2>performance tailored information tortured</font>
<br>
<font face=verdana size=3>performance tailored information tortured</font>
<br>
<font face=verdana size=4>performance tailored information tortured</font>
<br>
<font face=verdana size=5>performance tailored information tortured</font>
<br>
<font face=verdana size=6>performance tailored information tortured</font>
<br>
<hr>default:
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
10;">
performance tailored information tortured</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
11;">
performance tailored information tortured</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
12;">
performance tailored information tortured</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
13;">
performance tailored information tortured</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
14;">
performance tailored information tortured</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
15;"> <b>This is the size that I now use</b>
performance tailored information tortured</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
16;">
performance tailored information tortured</p>
<hr>px:
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
10px;">
performance tailored information tortured</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
11px;">
performance tailored information tortured</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
12px;">
performance tailored information tortured</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
13px;">
performance tailored information tortured</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
14px;">
performance tailored information tortured</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
15px;"> <b>This is the size that I now use</b>
performance tailored information tortured</p>
<p style="font-family: verdana, helvetica, geneva, sans-serif; font-size:
16px;">
performance tailored information tortured</p>

[tedster]

It's not really a space, but it is a kerning problem with the font at that size. Browsers do not have all the elegance of word processing applications - and especially not those of typesetting applications.

I am a bit surprised at this particular example, given that Verdana was specifically created for the monitor. You should see some of the ugly typesetting issues with the Lucida family!

So you're not seeing things here, but I doubt that a fix is possible with today's technology. All CSS offers is letter-spacing which is not the same as kerning. Kerning can adjust specfic letter pairs, whereas letter-spacing is applied uniformly to all letter pairs.

[edited by: tedster at 7:03 pm (utc) on July 31, 2007]

[surfin2u]

Thanks, Tedster. I understand kerning and am aware that it is the cause and that there is no real space there. My advertising clients are not so understanding. They see a space and want it removed!

It is very disappointing that verdana font has developed this problem on newer computers...at least I think it was not a problem before...or maybe I just never noticed it. Verdana is supposed to be the "best" choice for a screen font.

Seems like my best option for now is to move to 14px from 15px which solves this specific problem, hopefully without introducing a whole host of new ones.