Welcome to WebmasterWorld Guest from 54.146.201.80

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)

Preferred Member

10+ Year Member

joined:Mar 19, 2004
posts:394
votes: 0


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 July 31, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts: 2143
votes: 7


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

Marshall

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

Preferred Member

10+ Year Member

joined:Mar 19, 2004
posts:394
votes: 0


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 July 31, 2007 (gmt 0)

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 0


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 July 31, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Mar 19, 2004
posts:394
votes: 0


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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members