Verdana and other web fonts -- opinions sought

[Jim Royal]

I've been looking at web fonts lately, trying to decide whether I
should drop Verdana from my personal site in favor of some other
typeface. Despite the fact that it is a very readable font, I know that
there are valid technical reasons to not use Verdana as a default font.


There's also a good argument for not setting a font family at all
(other than serif/san-serif). But that's a little too extreme for me.

If I'm going to design a page, I want to actually design it. Which
leaves open the question of picking a font that is nice and readable.

Lucida is a good-looking font that is installed by default on a fairly
large number of computers. It doesn't have the chunky child-handwriting
look that some of the glyphs in Verdana has. It looks pretty good on OS
X. But on Windows...

<http://www.jimroyal.com/fonts/fonts_macos.html>

<http://www.jimroyal.com/fonts/fonts_windows.html>

These screen shots were taken on Jaguar and Win2K.

Fact is, just about every font except Arial and Verdana looks less than
optimal on Windows, when compared to OS X. It pains me to pick a font
that doesn't look great on both platforms. But the choices are so few.

So the question is... What do you think of Lucida on OS X? And is it
minimally acceptable on Windows, compared to Verdana?

And here's another thought: What about giving Mac users Lucida and
Windows users Verdana?

All opinions are most welcome.

Jim Royal <[email protected]>
"Understanding is a three-edged sword"
Calendar: http://jimroyal.com/calendar
Visit http://jimroyal.com

 

[Augustus]

<http://www.jimroyal.com/fonts/fonts_macos.html>

<http://www.jimroyal.com/fonts/fonts_windows.html>

The difference is that on the mac the font is bold and on windows its not

If you like the bold font then you can just add font-weight:bold; to
your CSS
(for the mac, it looks like its defaulting to bold)

 

[Headless]

There's also a good argument for not setting a font family at all
(other than serif/san-serif).

Setting serif/sans-serif can also get you into trouble. The large
x-height issue that is a big part of why Verdana is considered a poor
choice as an author specified font is a common feature of sans-serif
fonts in general.

Specifying fonts for me is damned if you do, damned if you don't. If I
want to be a choirboy then I specify Arial and I don't go <90%. If I
decide to be naughty I use Verdana.


Headless

 

[Jim Royal]

The difference is that on the mac the font is bold and on windows its not
(for the mac, it looks like its defaulting to bold)

Actually, it is not:

<http://www.jimroyal.com/fonts/verdana.gif>

The Mac OS simply antialiases the fonts differently.

 

[Jim Royal]

Setting serif/sans-serif can also get you into trouble.

Often, you have no choice. When making a complex document, a mixture of
serif and sans serif is often necessary for good reabability.

Specifying fonts for me is damned if you do, damned if you don't. If I
want to be a choirboy then I specify Arial and I don't go <90%. If I
decide to be naughty I use Verdana.

Arial. Ick. (Pardon me, but really. Ick.)

 

[EightNineThree]

Often, you have no choice. When making a complex document, a mixture of
serif and sans serif is often necessary for good reabability.

This has not been proven by any reading performance study I've seen.

 

[Dylan Parry]

The Mac OS simply antialiases the fonts differently.

Are we talking OSX here? If so, then having not used it myself, I think
that it most likely does it the same way that a lot of Linux systems do
it, so you'll get similar results on a Linux machine like mine )

I have actually gotten used to this "chunky" way of anti-aliasing and the
rare times that I use a Windows browser, I feel like the fonts are kind of
naked and are missing something!

 

[Sean Jorden]

Are we talking OSX here? If so, then having not used it myself, I
think that it most likely does it the same way that a lot of Linux
systems do it, so you'll get similar results on a Linux machine like
mine )

I have OSX and Win2K side by side on my desktop and the Mac has beautiful
anti-aliasing (I'm looking at a web page with Verdana fonts), noticeably
smoother than my Win2K box, I'd say. BTW, OSX has practically nothing in
common with Linux at the graphical display level.

 

[Headless]

Often, you have no choice.

You always have a choice.

When making a complex document, a mixture of
serif and sans serif is often necessary for good reabability.

Imo serif fonts are poorly suited for body text for screen media, but a
serif font is the default font in every web browser I have (because
specifying a sans serif font as the default user font normally results
in encountering lots of micro fonts).

Arial. Ick. (Pardon me, but really. Ick.)

On screen media there is little difference between the various sans
serif fonts for normal body size text. I use Arial because it's x-height
causes slightly less problems than other sans serif fonts.


Headless

 

[andy johnson]

On screen media there is little difference between the various sans
serif fonts for normal body size text. I use Arial because it's x-height
causes slightly less problems than other sans serif fonts.


Headless

So if you are designing a web site and want to select 4 or so fonts
for headers divs bodys etc., what would use? Would you use different
fonts for lists? What about Tahoma? Is that an acceptable font?

A Johnson

"There would be a lot more civility in this world if people
didn't take that as an invitation to walk all over you"
- (Calvin and Hobbes)

 

[Jim Royal]

Are we talking OSX here? If so, then having not used it myself, I think
that it most likely does it the same way that a lot of Linux systems do
it, so you'll get similar results on a Linux machine like mine )

Yes, it is Mac OS X. The graphics engine (called Quartz) is a distant
relative of Display PostScript. It uses PDF as its lingua franca.

 

[Jim Royal]

This has not been proven by any reading performance study I've seen.

Typeography 101. It is often made a document much easier to scan if
headers and body text are in entirely different typefaces. In print,
this is usually san serif for headers and serif for body text. On
screen, I usually reverse them.

 

[Jim Royal]

Imo serif fonts are poorly suited for body text for screen media
Agreed.

, but a
serif font is the default font in every web browser I have (because
specifying a sans serif font as the default user font normally results
in encountering lots of micro fonts).


On screen media there is little difference between the various sans
serif fonts for normal body size text. I use Arial because it's x-height
causes slightly less problems than other sans serif fonts.

I understand. Arial is a readable font. It' just that I have spent so
much time looking at Microsoft Outlook (and before that, Microsoft
Mail), that to me, Arial practically screams: "Corporate Email!"

It's usually last on my compatibility list.

 

[EightNineThree]

Typeography 101. It is often made a document much easier to scan if
headers and body text are in entirely different typefaces. In print,
this is usually san serif for headers and serif for body text. On
screen, I usually reverse them.

It might be typography 101, but it isn't Web Usability 101.

For the last week or so, I've been pouring over actual usability studies on
fonts and reading performance and not one supports what you say.

 

[Nick Theodorakis]

[...]

Fact is, just about every font except Arial and Verdana looks less than
optimal on Windows, when compared to OS X.

Unfortunately true.

It pains me to pick a font
that doesn't look great on both platforms. But the choices are so few.

So the question is... What do you think of Lucida on OS X? And is it
minimally acceptable on Windows, compared to Verdana?

On my PC, a font called "Lucida Sans" displays pretty well on IE and
Mozilla. If a similar font on OS X is called "Lucida" perhaps you can
specify both.

IMO, although Helvetica is a great looking font on paper[1], on my PC
IE does a poor job rendering it, and Mozilla doesn't even try (it
substitutes Arial).

And here's another thought: What about giving Mac users Lucida and
Windows users Verdana?

It's an opinion, but at 1em I would actually rather have Arial than
Verdana on a PC.

Nick

[1] see:

<http://www.theonion.com/onion3730/helvetica_sweeps_fontys.html>

 

[Jim Royal]

For the last week or so, I've been pouring over actual usability studies on
fonts and reading performance and not one supports what you say.

Do any of them say the opposite, i.e., that a mono-typeface approach is
best for complex documents online? Remember, I'm not talking about a
blog entry. I'm talking about large documents, like technical manuals.

 

[Jim Royal]

On my PC, a font called "Lucida Sans" displays pretty well on IE and
Mozilla. If a similar font on OS X is called "Lucida" perhaps you can
specify both.

This is what I'm considering. Win2K and up comes with Lucida Sans, and
Mac OS X comes with Lucida Grande. I can simply specify both in the
style sheet.

Glad to know at least someone likes the way it looks on Windows.

IMO, although Helvetica is a great looking font on paper[1], on my PC
IE does a poor job rendering it

So I have noted.

<http://www.theonion.com/onion3730/helvetica_sweeps_fontys.html>

Now this was a great read. Personally, I was pretty cheesed off that
Garamond Light Condensed didn't even get a nomination! I think there
may be collusion among the academy members.

Thanks for the feedback.

 

[Nick Theodorakis]

This is what I'm considering. Win2K and up comes with Lucida Sans, and
Mac OS X comes with Lucida Grande. I can simply specify both in the
style sheet.

Lucida Sans is even on my Win98 PC. At least I think so. I suppose it
could be susbstituting a look-alike, but it does resemble the font in:

<http://www.identifont.com/show?QY>

(I can send you some PC screen shots, if you like)

Now this was a great read. Personally, I was pretty cheesed off that
Garamond Light Condensed didn't even get a nomination! I think there
may be collusion among the academy members.

If you like font humor, then check out:

<http://www.ms-studio.com/typecasting.html>

Nick

 

[Phrederik]

I've been looking at web fonts lately, trying to decide whether I
should drop Verdana from my personal site in favor of some other
typeface. Despite the fact that it is a very readable font, I know that
there are valid technical reasons to not use Verdana as a default font.

<http://www.jimroyal.com/fonts/fonts_macos.html>

<http://www.jimroyal.com/fonts/fonts_windows.html>

What resolution, etc. were you running on the Win2K box?

www.jimroyal.com looks fine on my Windows XP PC. Of course I run at
1600x1200 on my desktop to ensure smooth anti-aliasing.

My big beef is that you set the font size statically, so I can't make it big
enough to actually read. For example, default text size is "16px". That
doesn't help me on my screen.

 

[Headless]

So if you are designing a web site and want to select 4 or so fonts
for headers divs bodys etc., what would use?

I would suggest choosing 2; one font for all headings, and one for body
size text, you can add one more if you want to make something stand out
a bit, but 4 is a lot imo.

I use the fonts that are generally installed on a clean W95/W98 install,
so that leaves little choice. The font I use for heading depends on the
content (formal, informal), my choice for author specified body font is
Arial (choirboy) or Verdana (naughty mode).

Would you use different fonts for lists?

I would use the same font as for body text.

What about Tahoma? Is that an acceptable font?

Again, with a few exceptions ("tw cen mt" for example) there is imo
little difference between the various sans serif fonts for body size
text. Tahoma is slightly less risky than Verdana (x-height) and slightly
riskier than Arial imo. But again, the differences are minimal imo.


Headless