467,925 Members | 1,701 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,925 developers. It's quick & easy.

Verdana and Georgia's families

I love Verdana and Georgia, because I can read them. I've read back
postings here on why the usual

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif

spec is less than ideal, because (as I understand it) e.g. "a" in 12pt
Verdana is actually a different real size than it is in 12-pt Arial.
That,
of course, is one reason I find Verdana especially legible and lovable.

So, if I want to spec Verdana & Georgia, what *do* I suggest as
alternates if not the usual suspects?

Mary Ellen
Doctor Science But Not Fonts, MA
Jul 20 '05 #1
  • viewed: 2927
Share:
13 Replies
Mary Ellen Curtin wrote:
I love Verdana and Georgia, because I can read them. I've read back
postings here on why the usual

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif

spec is less than ideal, because (as I understand it) e.g. "a" in 12pt
Verdana is actually a different real size than it is in 12-pt Arial.
That,
of course, is one reason I find Verdana especially legible and lovable.

So, if I want to spec Verdana & Georgia, what *do* I suggest as
alternates if not the usual suspects?


Since your decision to use Verdana is based on its size, then Arial and
sans-serif are perfectly adequate as alternates.

The problem with Verdana is when it is used at a below default size - then
when the alternates need to be used, they are too tiny to be read
comfortably. The one workaround for that is to leave the default size as is
- and I get the feeling that's what you want judging by the first line of
your post.
--
Iso.
FAQs: http://html-faq.com http://alt-html.org http://allmyfaqs.com/
Recommended Hosting: http://www.affordablehost.com/
Web Standards: http://www.webstandards.org/
Jul 20 '05 #2
Isofarro <sp*******@spamdetector.co.uk> wrote:
Since your decision to use Verdana is based on its size, then Arial
and sans-serif are perfectly adequate as alternates.
Well, _if_ Verdana is mentioned in an author style sheet, then
something like Arial, sans-serif should be listed after it.
The problem with Verdana is when it is used at a below default size


I'd say it's one of the problems. If an author does not set font size
at all (usually the best approach in general), then a user who has
Times New Roman as default font (the common default) has presumably
chosen the font size so that Times New Roman is well readable. And this
means that when the font is actually Verdana, it looks too big. This is
usually not very serious, unless the user gets too confused. But
neither is it very productive. Fixing this by font-size settings could
be worse than the disease - the browser might well ignore font-family
but apply font-size, resulting in too small font.

Regarding Georgia, I'd suggest

font-family: Georgia, "Bookman Old Style", "Book Antiqua",
"New Century Schoolbook", "Times New Roman", serif;

but you might find some other combination better - judging similarity
of fonts is partly quite subjective.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #3
"Mary Ellen Curtin" <me******@NOalumni.SPAMprinceton.HEREedu> wrote:
A lot of the more "artistic"
webpage designers seem to me to pick very small fonts and on dark ^^^^^^^^^^^^^^^^^ backgrounds, as though small font=elegance


They call 'em snowboarders.

--
Meanwhile at the Google Ranch ...
"I can't read this bloody site; it's all Falsh and JavaScrap."
"Forget it and move on! Still 2*718*281*828 pages to crawl."
Jul 20 '05 #4
In article <mj********************@news.netcarrier.net>,
"Mary Ellen Curtin" <me******@NOalumni.SPAMprinceton.HEREedu> wrote:
Now I wonder -- will setting the body font as Verdana make my pages look
dorky? (that's a technical design term*g*)
Maybe my taste is in my way, but i feel that Verdana gets less used more
and more. I don't see as many pages with it anymore as 2 years ago.
A lot of the more "artistic"
webpage designers seem to me to pick very small fonts and on dark
backgrounds, as though small font=elegance -- whereas I just find it
painful.


Those are not designers. Those are self-proclaimed artists. Designers
create things for use by people. Artists create things for art.

--
Kris
kr*******@xs4all.netherlands (nl)
"We called him Tortoise because he taught us" said the Mock Turtle.
Jul 20 '05 #5
"Mary Ellen Curtin" <me******@NOalumni.SPAMprinceton.HEREedu> wrote:
I normally don't spec a "body" font size,
OK.
and I use H1, H2, etc.
when I need font size to be "bigger than usual".
Do you really mean that? Those elements should be used for headings.
Usually we want to make headings big in visual appearance, but you
should not use H1, H2, etc. just for font size. For example, a summary
paragraph would often be best shown in larger font size, but it should
not be marked up as a heading but as a P element (using, say,
<p class="summary">...</p> and the selector p.summary in a CSS rule for
setting the size).
For "smaller than
usual" (e.g. in the copyright notice) I tend to use e.g. ".8em".
Fine.
Now I wonder -- will setting the body font as Verdana make my pages
look dorky?
Setting by whom? If the user has selected Verdana as the browser's
default font, then he should select the browser's default font size
accordingly. There's no point in our second-guessing e.g. some font
size reduction in an author style sheet - that way we would harm all
those users who _have_ done their part of the job.

But if the author sets font to Verdana in an author style sheet, then
the page will look dorky for all those people who have almost any other
font as default font and who have selected the default font size so
that it is suitable for _that_ font.
A lot of the more
"artistic" webpage designers seem to me to pick very small fonts
and on dark backgrounds, as though small font=elegance


That's all wrong, but it has a simple explanation, I think. When copy
text appears in a far larger font than necessary, most people think it
looks bad, primitive, dorky, whatever. Many designers are rather young
people with good eyesight and high-quality monitors, so they can read
fairly small print fluently, and consequently typical browser defaults
look far too big to them.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #6
Yucca wrote:

For example, a summary
paragraph would often be best shown in larger font size, but it should
not be marked up as a heading but as a P element (using, say,
<p class="summary">...</p> and the selector p.summary in a CSS rule for setting the size).


I guess I think of a summary paragraph as part of the outline, as
a "higher level" than the text proper. So:

<h1>title of scientific paper
<h2>methods section
<h3>summary of method
<p>actual description of method

Is this illogical/against spec/eeeevil&wrong?

Mary Ellen
Doctor Science, MA
Jul 20 '05 #7
Ian Rastall <id*******@earthlink.net> wrote:
I set my fonts according to percentage.
Pardon? (As usual, a URL would clarify.)
- - when the sans-serif defaults to
Arial, the font will be the same size that fonts normally are on
their machine.
You're missing the key point: font size is a technical concept, and
fonts of exactly the same size _look_ differently sized. And Verdana,
compared with almost anything else, is an extreme example of this.
I mean, the same thing can be said about the monospace fonts, which
are enjoying a vogue now.
They are? I suppose we'll soon see body { text-transform: uppercase; }
then. Primitiveness is fashionable at times.

Different monospace fonts have very different properties. Courier New
looks considerably bigger than Courier, and Lucida Console even bigger.
As long as a monospace <p> is set to 100%,
Why? Setting font-size: 100% is usually quite redundant.
or, say, an <h3> monospace set to
120%, what does it matter if it renders bigger on the screen than,
say, "times new roman"?
It looks worse. But why on &Planet; would you set 3rd level headings to
monospace? The real question is what to do when there is monospace text
_inside normal text_, as in

<h3>The <code>font-size</code> property</h3>
<p>You should set <code>font-size</code> only if you
understand well how sizes work in CSS. - -</p>

I just realized that although my

pre, code, samp, kbd, tt
{ font-family : Courier, monospace; }

mostly helps against <code> elements looking too big, it does not work
very well in headings, since browsers seem to have problems in
rendering Courier in large size. (At least IE/Win seems to apply some
algorithm that results in a matrix-printer like presentation.) So I
added the following:

h1 code, h2 code, h3 code, h4 code
{ font-family: "Courier New", Courier, monospace; }
I really am asking, in case I'm missing something here. I use
Georgia on my two main sites, and I've never heard anyone
complaining about the readability, or the usability, whether they
were seeing georgia or generic serif, or what have you.


As a rule, Web surfers don't complain to authors; they just go away if
they are not satisfied.

But in this case, there's nothing to be complained if you have just set
font-family: Georgia globally. Either the user sees the page in
Georgia, which is probably fine, or he sees it in his browser's default
font (which might be a sans-serif font or a serif font, probably the
latter), which is probably fine too - perhaps not optimal, but the user
won't know, unless he's so accustomed to visiting pages that _do_ set
the font that he gets disappointed when he sees what must be classified
as his very own choice: the browser's default font, as set by the user
either by doing nothing (i.e., accepting factory settings) or by
explicitly setting the default font.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #8
In article <Xn*****************************@193.229.0.31>, Jukka K.
Korpela wrote:
As long as a monospace <p> is set to 100%,
Why? Setting font-size: 100% is usually quite redundant.


And maybe even harmfull. Monospace is only case where bitmap fonts are
still in use. In Opera for example you can set monospace for certain
size, but when saying 100%, it will try use the size of parent element.
Usually this only results strange line-height, but also extreamily funny
text if difference is so big it decides to scale.

Courier is one of these bitmap fonts, I see you say that IE don't handle
it well.
or, say, an <h3> monospace set to
120%, what does it matter if it renders bigger on the screen than,
say, "times new roman"?
Remember that monospace fonts are very wide generally. And headings are
pretty big anyway. So you get wrapping heading pretty easily (same
applies to Verdana, which is also wide). And since they are so tall,
wrapping headings take lots of space. I think that in DTP they try to
avoid wrapping headings when they can.

The bigger problem is that the normal monospace fonts are ugly (IMHO).
And when someone¹ uses something that looks like Arial, but is only
available at 13px*6px, it certainly don't look good on headers, neither
in size intended, nor scaled bigger.
I really am asking, in case I'm missing something here. I use
Georgia on my two main sites


Georgia is good choise. Especially _whitout_ generic serif fallback.
As a rule, Web surfers don't complain to authors; they just go away if
they are not satisfied.


Yes. And there is good reasons behind this: most times complainments are
ignored, or answered something like "we don't support Opera (Mozilla,
IE5, ...)" or "No one has complained before, so we think it's OK"

Exeptions are usual, but the problem is, that in sites who respond to
complaints of user, aren't usually broken -> so people never learn that
complaining helps.

[1] me, for example, until I found out that somepeople use it for strange
things. Now I use this font and size with !important on every normally
monospace thing (unless I use Arial), and I think I set Courier New as
generic.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #9
On Sun, 27 Jul 2003 07:13:05 +0000 (UTC), "Jukka K. Korpela"
<jk******@cs.tut.fi> wrote:
Ian Rastall <id*******@earthlink.net> wrote:
I set my fonts according to percentage.
Pardon? (As usual, a URL would clarify.)


I'm not sure what you mean. I'm just saying that instead of ...

h4 {font-family: georgia, "times new roman", serif; font-size: 14pt;}

I would set it to (what I guess is) roughly the same:

h4 {font-family: georgia, "times new roman", serif; font-size: 110%;}

If you like, Bookstacks is done with fonts in percentage:

http://www.bookstacks.org/

The <h1>, for instance, is set to 200%. There is nothing set for the
<p>.
- - when the sans-serif defaults to
Arial, the font will be the same size that fonts normally are on
their machine.


You're missing the key point: font size is a technical concept, and
fonts of exactly the same size _look_ differently sized. And Verdana,
compared with almost anything else, is an extreme example of this.


I had often wondered this. But I guess that's what I'm saying. As long
as you're not setting font slightly smaller to accomodate Verdana,
than the user shouldn't be freaked out no matter which font she ends
up with.
I mean, the same thing can be said about the monospace fonts, which
are enjoying a vogue now.


They are? I suppose we'll soon see body { text-transform: uppercase; }
then. Primitiveness is fashionable at times.


Yes. It's an attempt at a "retro" look. It does look quite nice, to my
eyes.
As long as a monospace <p> is set to 100%,


Why? Setting font-size: 100% is usually quite redundant.


Yes it is. Don't know why I used to do it. Perhaps I was
superstitious. I've lost the habit these days.
why on &Planet; would you set 3rd level headings to
monospace?
I've seen it used that way, and it usually looks quite nice. Simply a
matter of personal opinion, although I think getting creative with our
<h1>s, rather than resorting to images to add the stylistic touch, is
a step in the right direction.
The real question is what to do when there is monospace text
_inside normal text_, as in

<h3>The <code>font-size</code> property</h3>
<p>You should set <code>font-size</code> only if you
understand well how sizes work in CSS. - -</p>
I would do the same thing.

code {font-family: courier, monospace;}

I wouldn't bother setting that for headers, because I would never
write:

<h1><code>This Is My Site</code></h1>
As a rule, Web surfers don't complain to authors; they just go away if
they are not satisfied.
Agreed. But my hits are going up, not down, so I take that as a good
sign.
But in this case, there's nothing to be complained if you have just set
font-family: Georgia globally. Either the user sees the page in
Georgia, which is probably fine, or he sees it in his browser's default
font (which might be a sans-serif font or a serif font, probably the
latter), which is probably fine too - perhaps not optimal, but the user
won't know, unless he's so accustomed to visiting pages that _do_ set
the font that he gets disappointed when he sees what must be classified
as his very own choice: the browser's default font, as set by the user
either by doing nothing (i.e., accepting factory settings) or by
explicitly setting the default font.


I usually set:

body {font-family: georgia, "times new roman", serif;}

The default serif might not be Times New Roman, so that seems to make
sense to me (whether or not it should.)

Ian
--
http://www.aspipes.org/
http://www.bookstacks.org/
Jul 20 '05 #10
In article <Xn*****************************@193.229.0.31>, Jukka K.
Korpela wrote:
Ian Rastall <id*******@earthlink.net> wrote:
As long as a monospace <p> is set to 100%,
Why? Setting font-size: 100% is usually quite redundant.


And maybe even harmfull. Monospace is only case where bitmap fonts are
still in use. In Opera for example you can set monospace for certain
size, but when saying 100%, it will try use the size of parent element.
Usually this only results strange line-height, but also extreamily funny
text if difference is so big it decides to scale.

Courier is one of these bitmap fonts, I see you say that IE don't handle
it well.
or, say, an <h3> monospace set to
120%, what does it matter if it renders bigger on the screen than,
say, "times new roman"?
Remember that monospace fonts are very wide generally. And headings are
pretty big anyway. So you get wrapping heading pretty easily (same
applies to Verdana, which is also wide). And since they are so tall,
wrapping headings take lots of space. I think that in DTP they try to
avoid wrapping headings when they can.

The bigger problem is that the normal monospace fonts are ugly (IMHO).
And when someone¹ uses something that looks like Arial, but is only
available at 13px*6px, it certainly don't look good on headers, neither
in size intended, nor scaled bigger.
I really am asking, in case I'm missing something here. I use
Georgia on my two main sites


Georgia is good choise. Especially _whitout_ generic serif fallback.
As a rule, Web surfers don't complain to authors; they just go away if
they are not satisfied.


Yes. And there is good reasons behind this: most times complainments are
ignored, or answered something like "we don't support Opera (Mozilla,
IE5, ...)" or "No one has complained before, so we think it's OK"

Exeptions are usual, but the problem is, that in sites who respond to
complaints of user, aren't usually broken -> so people never learn that
complaining helps.

[1] me, for example, until I found out that somepeople use it for strange
things. Now I use this font and size with !important on every normally
monospace thing (unless I use Arial), and I think I set Courier New as
generic.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #11
On Fri, 25 Jul 2003 20:35:50 +0000 (UTC), "Jukka K. Korpela"
<jk******@cs.tut.fi> wrote:
Regarding Georgia, I'd suggest

font-family: Georgia, "Bookman Old Style", "Book Antiqua",
"New Century Schoolbook", "Times New Roman", serif;

but you might find some other combination better - judging similarity
of fonts is partly quite subjective.


I've recently started using Georgia as my default browser font. It
perhaps looks just a little old-fashioned, but has the advantage of
being just about the same width as Arial, which makes for a bit more
consistency in appearance among pages with serif and sans-serif fonts.
(Times New Roman, which I used to use, is one of the narrowest fonts.)

I've just noticed something odd though. Some while ago I put together
some font samples to compare widths, and sorted them in order of width.
I did this in Microsoft Works. I've now copied the list to Word and
discovered that the relative widths of the fonts are different! For
example, Garamond is wider than Times New Roman in Works, but in Word
it's the other way around.

So I put together an HTML page with the same fonts and found that in
Opera they are different again. For example MS Mincho is wider than
Bookman Old Style in Opera, but narrower in Works and Word. So I tried
IE, and found the rendition is almost the same as Works - except for the
Trebuchet font, which is a lot narrower.

This seems mighty odd.

Yet another nail in the coffin of the "identical in all browsers"
brigade, anyway.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #12
On Sun, Jul 27, Ian Rastall inscribed on the eternal scroll:
On Sun, 27 Jul 2003 07:13:05 +0000 (UTC), "Jukka K. Korpela"
You're missing the key point: font size is a technical concept, and
fonts of exactly the same size _look_ differently sized. And Verdana,
compared with almost anything else, is an extreme example of this.


I had often wondered this. But I guess that's what I'm saying. As long
as you're not setting font slightly smaller to accomodate Verdana,
than the user shouldn't be freaked out no matter which font she ends
up with.


But this is exactly the problem. Authors tell us that they select
Verdana precisely because they reckon it's more readable at smaller
font sizes; but the other side of the same coin is that it "looks too
large" at a given nominal font size. So, either they leave its size
unaltered (and complain that it looks too large), or they try to scale
it down (and risk unreadability on a browser which applies the
scaling-down but uses a different font).

But there's no solution to this in CSS, at least none that can be used
by authors in a WWW context. (If font-size-adjust had been defined
somewhat differently, and if that definition had actually been
implemented widely, then there might have been a chance.)

See earlier discussions, it's been turned over so many times before.
<h3>The <code>font-size</code> property</h3>

code {font-family: courier, monospace;}

I wouldn't bother setting that for headers, because I would never
write:

<h1><code>This Is My Site</code></h1>


But see the example already given! There can be good reasons for
using such markups within headings.

cheers

--
"This is not rocket surgery" - Stan Brown
Jul 20 '05 #13
On Sun, 27 Jul 2003 11:58:37 +0200, "Alan J. Flavell"
<fl*****@mail.cern.ch> wrote:
Authors tell us that they select
Verdana precisely because they reckon it's more readable at smaller
font sizes; but the other side of the same coin is that it "looks too
large" at a given nominal font size. So, either they leave its size
unaltered (and complain that it looks too large), or they try to scale
it down (and risk unreadability on a browser which applies the
scaling-down but uses a different font).


I see what you're saying. Perhaps I don't notice these problems
because my screen is set to a rather low resolution. :-)

Ian
--
http://www.aspipes.org/
http://www.bookstacks.org/
Jul 20 '05 #14

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

75 posts views Thread by Karl Smith | last post: by
8 posts views Thread by kchayka | last post: by
300 posts views Thread by Ståle Sæbøe | last post: by
reply views Thread by MLM450 | last post: by
reply views Thread by MC | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.