Sans-serif for the web

[Dirk Kruisheer]

In designing a new website I should like to include names of the standard
(screen proof) sans-serif fonts of Apple and Linux as well. So would anybody
help me complete the following specification?

font-family: verdana, xxx, yyy, sans-serif;

Many thanks in advance,

Dirk

 

[Dirk Kruisheer]

Dirk Kruisheer pounced upon this pigeonhole and pronounced:

This is what I use, in part:

body {
font-family: sans-serif;
font-size: 100%; /* redundant, but makes your point */
}

No worries about what fonts your visitor has. Verdana is too wide. Google
for hundreds of discussions about why this is not a good font to use.

That makes sense, thank you.
Dirk

 

[Jukka K. Korpela]

body {
font-family: sans-serif;
font-size: 100%; /* redundant, but makes your point */
}

Setting font-family to sans-serif would work in an ideal world, but
browsers actually implement the generic font names rather poorly, mapping
them to relatively odd actual fonts, in part.

If you wish to suggest a sans-serif font for your document,

body { font-family: Arial; }

is a simple approach. It will work in most browsing situations, and few
people have serious dislike for Arial. The text may look larger than the
user wants, since he may well have tuned the font size according to the
properties of Times New Roman, but this is tolerable. Opinions differ on
the question whether you should mention sans-serif as the second option.

No worries about what fonts your visitor has.

Well, the problem is that you don't know what they have as the browser's
interpretation of sans-serif either.

Verdana is too wide.

Wide? I would say that it has a large x-height and other properties that
make it too different from other fonts, so that if the user's font size is
suitable for his default font, it's too big for Verdana.

Google for hundreds of discussions about why this is not a good font
to use.

Right. I just tried to summarize the key point. There's nothing wrong with
making Verdana the _browser's_ default font, if the user likes it. But
authors should think twice before suggesting it in an author style sheet.

 

[Toby A Inkster]

If you wish to suggest a sans-serif font for your document,

body { font-family: Arial; }

is a simple approach. It will work in most browsing situations, and few
people have serious dislike for Arial.

Yes, but some might not have it. *Always* include a fall-back generic
font, eg:

body { font-family: Arial, sans-serif; }

 

[Lauri Raittila]

No worries about what fonts your visitor has. Verdana is too wide. Google
for hundreds of discussions about why this is not a good font to use.

Some links:

http://www.xs4all.nl/~sbpoley/webmatters/fontsize.html
http://ppewww.ph.gla.ac.uk/~flavell/charset/fontface-harmful.html

 

[Jukka K. Korpela]

Yes, but some might not have it.

So what? They will get the default font of their browser, which is, for
all that we can know, the font they have selected. Maybe it's not very
exciting, but readable - if it isn't readable, the user will have hard
times on _many_ pages.

*Always* include a fall-back generic font

Actually, that's the advice I explicitly stated as debatable.

 

[Lauri Raittila]

Yes, but some might not have it. *Always* include a fall-back generic
font, eg:

Why? Users default font is practically always good enaugh. If you fall-
back, be sure to have reason. Sans-serif is usually pretty safe choise
for fallback, but all other generic font families are not. See discussion
about week back:
http://groups.google.com/groups?th=9e544f20ec642c36

 

[Jukka K. Korpela]

But weren't you just arguing that fallback fonts were crap?

No, I wrote, "browsers actually implement the generic font names rather
poorly". You seem to confuse generic font names with browser's default
font.

No, the advice you explicitly stated as debatable was setting the
font-family to a generic font family, such as sans-serif. My advice
was to set it to a specific font with a generic fallback.

I wrote exactly this: "Opinions differ on the question whether you should
mention sans-serif as the second option."

 

[C A Upsdell]

In designing a new website I should like to include names of the standard
(screen proof) sans-serif fonts of Apple and Linux as well. So would anybody
help me complete the following specification?

font-family: verdana, xxx, yyy, sans-serif;

Many thanks in advance,

See http://www.upsdell.com/BrowserNews/res_fonts.htm

 

[Jukka K. Korpela]

I'm one of those that has a "serious dislike" for Arial - I'm so sick of
seeing it on web pages that I've seriously considered expunging it from
my system. I removed Verdana some time ago.

Well, if it's _that_ serious, removing it from the system would solve the
problem, and font-family: Arial on Web pages would effectively get ignored
(and the browser's default font used instead) on your browser.

The only serious problem I've heard about with generic font families is
the IE/serif size bug.

There are some others listed on the page
http://css.nu/pointers/bugs-nn.html
which is pretty old now, but partly still relevant. For Netscape 4, it
reports:
- generic Cursive or Fantasy won't show
- generic 'sans-serif' mapped to illegible font

I have never seen or heard of any issues with
generic sans-serif.

In addition to bugs, there's the choice of the actual font, which is a
quality issue. In particular, my IE 6 seems to use a sans-serif font with
characteristics between Arial and Verdana, roughly speaking, and it seems
to be a typical compromise that combines the drawbacks of both
alternatives. This is of course largely subjective, but objectively, there
does not seem to be any way to change the interpretation of sans-serif
on IE.

 

[Toby A Inkster]

In particular, my IE 6 seems to use a sans-serif font with
characteristics between Arial and Verdana, roughly speaking, and it seems
to be a typical compromise that combines the drawbacks of both
alternatives. This is of course largely subjective, but objectively, there
does not seem to be any way to change the interpretation of sans-serif
on IE.

Sounds like Tahoma. If you were to delete the font, I guess your problem
would be solved.