Welcome to WebmasterWorld Guest from 54.158.36.59

Forum Moderators: incrediBILL

Message Too Old, No Replies

Verdana font rendering problem for some sizes

Words containing "or" seem to have space inserted

     
1:26 pm on Jul 31, 2007 (gmt 0)

10+ Year Member



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>

2:58 pm on Jul 31, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

Marshall

4:29 pm on Jul 31, 2007 (gmt 0)

10+ Year Member



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>

6:39 pm on Jul 31, 2007 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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]

7:00 pm on Jul 31, 2007 (gmt 0)

10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month