Verdana

[Tim W]

I am making a site for a small business. They already have a logo and
letterhead which uses Verdana, so I should use it on the site really.

A quick web search to get the right font-family declarations threw up:

1 statements that Verdana is designed for onscreen use and is totally
readable and suitable.
2 statements that Verdana is no good as a web font because of size
issues eg it is bigger than most fonts
3 advice to not mix it with other fonts
4 advice to mix it with other fonts using it say, only for headings but
not for paras

As usual we struggle in the deluge of poor quality information off of
the internet. What are the problems with Verdana in practice?

Tim w

 

[Jukka K. Korpela]

I am making a site for a small business. They already have a logo and
letterhead which uses Verdana, so I should use it on the site really.

A logo that uses Verdana? Not very imaginative. A logo is a specific
typographic form of a name or an abbreviation. How specific can Verdana be?

Just because a logo and a letterhead use Verdana doesn't mean that copy
text needs to use it.

A quick web search to get the right font-family declarations threw up:

1 statements that Verdana is designed for onscreen use and is totally
readable and suitable.

The first part is correct. The second part is partly subjective, partly
technology-dependent. Perhaps most importantly, Verdana looks good in
some sizes only.

2 statements that Verdana is no good as a web font because of size
issues eg it is bigger than most fonts

That's basically correct.

3 advice to not mix it with other fonts

Debatable. Large-size Verdana in headings could be mixed with just about
anything.

4 advice to mix it with other fonts using it say, only for headings
but not for paras
Yeah.

As usual we struggle in the deluge of poor quality information off of
the internet. What are the problems with Verdana in practice?

It wins virtually nothing in comparison with Arial. So how many
disadvantages you need?

 

[dorayme]

I am making a site for a small business. They already have a logo and
letterhead which uses Verdana, so I should use it on the site really.

A quick web search to get the right font-family declarations threw up:

1 statements that Verdana is designed for onscreen use and is totally
readable and suitable.
2 statements that Verdana is no good as a web font because of size
issues eg it is bigger than most fonts

If you need to use Verdana for a heading, go ahead. There are no
disasters awaiting you. The problems come mainly with body text. There
is no end to past discussions. Many come to mind.

<http://sbpoley.home.xs4all.nl/webmatters/verdana.html>

It is very readable and appealing enough in small screen print, there
is more spacing between the letters than many other fonts.

 

[Jonathan N. Little]

I am making a site for a small business. They already have a logo and
letterhead which uses Verdana, so I should use it on the site really.

A quick web search to get the right font-family declarations threw up:

1 statements that Verdana is designed for onscreen use and is totally
readable and suitable.
2 statements that Verdana is no good as a web font because of size
issues eg it is bigger than most fonts
3 advice to not mix it with other fonts
4 advice to mix it with other fonts using it say, only for headings
but not for paras

As usual we struggle in the deluge of poor quality information off of
the internet. What are the problems with Verdana in practice?

As others have said, the "crime" is using it and then compensating for
Verdana oversize appearance by doing:


body {
font-size: 75%; ...

because if the user does not have Verdana on their system that have to
deal with a page with microfont. A page can still be read if the font is
larger, but the reverse is not always true! I suggest selecting fonts
that are similar in appearance when selecting alternatives and ones most
users are most likely to have installed.

If downloadable fonts ever become standardize than maybe this issue will
be moot.

 

[Andreas Prilop]

What are the problems with Verdana in practice?

The main problem is something like

body {font-family: Verdana; font-size: 80%}

Do not specify a font-size for BODY or P.

 

[Joy Beeson]

Do not specify a font-size for BODY or P.

And whatever you do, don't let the site go live until you've clicked
ctl+ at least five times on each page.

Not everybody with money to spend has perfect eyesight. And not
everybody with perfect eyesight likes to hunch up close to the
monitor.

 

[dorayme]

And whatever you do, don't let the site go live until you've clicked
ctl+ at least five times on each page.

Don't forget the much sidelined ctrl-, some surprises can appear!

Anyway, there is a distinction between what happens when you zoom
under Zoom Text Only and when not under. It is amazing how often even
quite otherwise competent authors almost seem unaware of the
distinction. It is not a distinction that is evident in all browsers.

 

[Beauregard T. Shagnasty]

I don't know. My site uses verdana.

http://sbpoley.home.xs4all.nl/webmatters/verdana.html

Your site also forces a too-small-for-me font size. You should use
percentages for body and content fonts: 100 of them.

http://sbpoley.home.xs4all.nl/webmatters/fontsize.html

 

[Jukka K. Korpela]

I don't know. My site uses verdana.

Your site http://www.molon.de/ is a good demonstration of the problems
of typical use of Verdana:
1) font set to small, fixed sizes (13px, 10px), obviusly because Verdana
looks bad in common default font sizes
2) too small line height (especially for overly long lines)
3) poor color contrast in light on dark texts (presumably caused by
author's wrong assumptions about Verdana as very readable)
4) paragraphs justified on both sides (though _this_ mistake might be
independent of Verdana).

 

[Jukka K. Korpela]

It's as big as the fonts on most sites in the web.

Most sites do foolish things, with fonts too.

There is no line-height parameter in CSS

You mean you don't even try to set line height, thereby accepting
whatever is the default for Verdana. And it's too small, especially for
long lines.

Again please be more specific and explain where you see the poor colour
contrast? When my font was #fff I received complaints that the contrast
was too strong,

That's because people did not understand why they are having problems.
This is understandable. But _authors_ should know better. Light-color
text on dark background for copy text is simply a bad idea with bad
consequences.

That's a design choice, not a mistake.

A wrong choice, thereby a mistake.

 

[Jukka K. Korpela]

Please be specific with your criticism. Broad statements unfortunately
do not help.

I am not giving you criticism; I am merely pointing out some of the
reasons why Verdana should not be used, illustrating them with your
site, which you presented as an example of Verdana use.

Criticism of web sites is seldom useful. People responsible for sites
usually strongly resist criticism - they may ask for criticism, but what
they really want is appraisal plus some minor fixes that they can
understand and implement without thinking much and without even
considering any real change of the design.

But people who are just planning sites can learn from other people's
mistakes, if they are pointed out strong enough. Admittedly, I was much
too smooth and soft here, as usual, but I was focusing on a relatively
isolated problem, Verdana.

 

[dorayme]

Please be specific with your criticism. Broad statements unfortunately
do not help.

There is not a lot of merely continuous body text on your site (at a
casual glance) so the sky is not going to fall in if you use Verdana
and all your less than white on almost black and justify your text and
so on and so on. Your site is an interesting framework for showing
your pictures.

But my sympathies are with the comments made by others so far in the
thread in that they are saying what is a good idea or not a good idea
in general, what is good practice, what is not.

For what it is worth, and specifically, I generally have to click up
at least one notch of text size to feel comfortable noting points of
interest (not even continuous reading) on your pages. If the text was
#fff it would be better for me (given that black on white, my
favourite is not on offer). The more you grey the text on black, the
more the black seems to bleed into it, #ccc on almost #000 is really
simply too risky and probably based obn too small a sample of your
feedback.

btw:

body {background-color: #002; margin: 0;}
body, table, tr, th, td, p, blockquote, li, ul, div { font-size: 13px;
color: #ccc; font-family: Verdana, Arial, Helvetica, sans-serif; }

The margin of zero on BODY as a separate listing is understandable but
why background colour, why not put this latter along with the
foreground colour in the comma separated listing? Good practice is to
put color and background-color in pairs.

Anyway, nice website, all in all, so don't worry too much.

 

[Tim Streater]

Again please be more specific and explain where you see the poor colour
contrast? When my font was #fff I received complaints that the contrast
was too strong, so I set it to #ccc which is more pleasing for the eye.

Personally I dislike light text on a dark background.

 

[dorayme]

As a weakness of Verdana you have claimed that the font on my site is
too small. But the font on my site is in fact quite big.

I assume you are talking to one J.Korpela. I know his habits, this is
the time he goes down into his killfile and distributes coffee and
cakes to the inmates, he is soft that way, he often stops to have a
chat with some of them.

Anyway, while he is down there, one of the main criticisms of Verdana
is that it is a big font and authors therefore tend to set it smaller
for aesthetic purposes. When someone does not have that font, as you
have seen in this thread, a font that is more compact gets
substituted. But this more compact font is then reduced by your CSS
(which was aimed at Verdana) thus increasing the risk of being far too
small.

 

[Jonathan N. Little]

As a weakness of Verdana you have claimed that the font on my site is
too small. But the font on my site is in fact quite big.

What you seem not to understand is the font is "quite big" for *you*
because *you* have the oversize Verdana installed on your system. So
when your compensate bay making less than 100% it looks just right for
*you.* But if a visitor does not have Verdana installed on their
system, then the non-oversize font will also be reduced and then be too
small for *them.* It is not like you can fork:

Got Verdana?
Then body { font-size: 80%; }
else
body { font-size: 100%; }

Cannot do this in CSS

 

[dorayme]

Ok, so it's not too terrible if I use verdana... Note however that the
travelogues have more text (http://www.molon.de/travelogues/ ).

And regarding the interesting framework: a friend of mine switched a
year ago or so from a self-designed site to a wordpress-based one. He
cited as reasons that his focus is on photography and not web
programming. He is fully right, but his new wordpress-based site now
looks like one of those zillion other websites using wordpress. It has
lost its individuality.

I understand. But even with content management sites, if you put in
the hard yards, you can get an individual look. The temptation not to
is great though with these sites!

....

Finally some more detailed feedback. I do understand your point - the
moment you start fiddling with the fonts, Verdana has a small problem.
However most people never ever touch their browser font settings.
As for #ccc or #fff for the text, I don't know. I got that feedback I
wrote about. So you would use #fff for the text?

No question about it, yes! I would be unlikely to use black background
for so much text, but that is another issue. It is more undersatndable
on a photographic site.

 

[dorayme]

I know the argument, but I remember a statistic showing that 95% or 99%
of all web surfers have Verdana. I could dig out the link if you are
interested.

Given the wide availability of Verdana there are only problems with this
font if somebody changes the default font settings on his browser. I
have no statistics for this, but I guess the percentage of people who do
so is negligibly small.

For all that matters, for the overwhelming majority of web surfers
Verdana is not a problem.

It might even be the case that the sort of people who don't have
Verdana are the geeky sort that would not know a good picture from an
ear of corn! <g>

Still, given that there are some problems and for some people, there
are a lot of other fonts that look nice that do not have these
problems. Up to you.

 

[Beauregard T. Shagnasty]

Over 95% of people have Verdana:
http://www.redalto.com.au/support/web_safe_fonts_in_website_design.html
(on Windows systems > 99%)

Sometimes I wonder how 'they' know that. What code do they use to find out
what fonts are installed on my computer? I've certainly never told anyone
what I chose to install, or not install, or delete...

BTW, your cited 'reference' is another hard-to-read site like yours. It
has a tiny grey font on white. Poor contrast. I had to press Ctrl-Plus
three times so I could read it. See its CSS:

body{
font-family:Arial, sans-serif;
font-size:11px;
color:#1f3a51;
}

 

[Lewis]

It's as big as the fonts on most sites in the web. Most websites have a
font size smaller or as big as mine. A size larger than 13px would start
looking huge.

You should *never* specify fonts in absolute sizes. Period. You are
simply being hostile to your potential viewers. The fact that other
webmonkeys are fucking morons is not an excuse.

 

[Lewis]

Personally I dislike light text on a dark background.

I like white text on black (it is how I have my terminal set, and how I
read news), but it doesn't work on webpages. What I really hate is the
fascination with grey text on white. So many sites do this, and it is
asinine.