Font size, my discovery...

Henry · Oct 14, 2004

G'day...

I was fighting with font sizes in css for hours and finally I've
discovered, what is going on.

Check simple code.

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Let's try some text in Times New Roman </title>
</head>

<body>

Let's try some text in Times New Roman 12pt.
And now the same text in Arial.
And now the same text in Tahoma.
And now the same text in Verdana.
 
 

</body>

</html>

I was trying to avoid to set font sizes because I've never liked Times
New Roman.

And other fonts, 12pt, are definitely bigger than Times New Roman.

IMHO, fonts comfortable for reading is the font of your menus and your
environment. Everybody are setting their screen sizes that way, so
everything has right, comfortable sizes.

When Arial, Tahoma or Verdana is used on web pages, they are bigger that
Times New Roman and that's why most designers are forced to change sizes.

These fonts are right size in 10pt if compare to Times New Roman.

I don't think that many people are adjusting size of letters in the
browser, because their browsers are set up that way, that menus and text
is in the comfortable size anyway. If fonts are 2 points bigger than
menu's fonts, that the size is perfectly OK.

Or... somewhere I'm terribly wrong.

rf · Oct 14, 2004

Henry said:
G'day...
G'day.

I was fighting with font sizes in css for hours and finally I've
discovered, what is going on.

Why? Just leave it out completely and your viewer will get exactly what she
has set up her browser for, being what she is most comfortable with.

If you choose to change it in any way you will only be changing it away from
your viewers preferences. You don't see (or rather hear) radio stations
adjusting the volume of the music for us do you?

Let's try some text in Times New Roman 12pt.

The font element has been deprecicated for years. You should be using CSS
these days.

Never specify font size in pt or px. The most used browser has bugs wherein
doing so means your viewer cannot change her font size without resorting to
the accessibility options to ignore your font specifications.

Use em of %.

And now the same text in Arial.
And now the same text in Tahoma.
And now the same text in Verdana.

Don't use verdana. All opinion I have seen is that it is unsuitable for the
net. It is too large. This induces authors to reduce the font size to
something like 80%. The text then becomes way too small if your viewer does
not have verdana

I was trying to avoid to set font sizes because I've never liked Times
New Roman.

If you don't like it then don't use it

. My preference is not times new
roman for non-monospaced fonts as well.

And other fonts, 12pt, are definitely bigger than Times New Roman.

Sure you weren't looking at verdana?

I don't think that many people are adjusting size of letters in the
browser,

Er, how do you know?

Or... somewhere I'm terribly wrong.

Nope. This subject is almost continuousle discussed. Opinions vary either
way. My opinion leans towards the viewer setting the font size, not the
author.

brucie · Oct 14, 2004

In alt.html Henry said:

And now the same text in Arial.

the element was deprecated just over 7 years ago in the first
html4 working draft.
http://www.w3.org/TR/WD-html40-970708/present/graphics.html#edef-FONT

please try to keep up.

Owen Jacobson · Oct 14, 2004

If you choose to change it in any way you will only be changing it away from
your viewers preferences. You don't see (or rather hear) radio stations
adjusting the volume of the music for us do you?

As a matter of fact, I do. Or, advertisers do, anyways.

I'll leave the parallels as an exercise. Cheers!

rf · Oct 14, 2004

Owen Jacobson

As a matter of fact, I do. Or, advertisers do, anyways.

I'll leave the parallels as an exercise. Cheers!

I guess the adverts correspond to those in-your-face popups

Toby Inkster · Oct 14, 2004

rf said:
You don't see (or rather hear) radio stations adjusting the volume of
the music for us do you?

Though in fact they probably ought to do so. Much modern music is mixed in
such a way to reduce the overall dynamics of the sound, allowing the
mixers to maximise the volume without clipping.

If you listen to an older recording (e.g. The Beatles - Sgt Pepper's) and
a newer one (e.g. Coldplay - Rush of Bood) back to back without adjusting
the volume in between, you'll notice that the newer one sounds a bit
louder.

Henry · Oct 14, 2004

brucie said:
In alt.html Henry said:

the element was deprecated just over 7 years ago in the first
html4 working draft.
http://www.w3.org/TR/WD-html40-970708/present/graphics.html#edef-FONT

please try to keep up.

I meant, when I used css to make fonts, their colours, types and sizes.

As soon as I removed the font size while using font Verdana, my were
much to big.

p {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.8em;
margin: 8px;
padding: 8px;
text-align: center;
}

Changing to Tahoma or Arial didn't make to much difference and I don't
like other fonts.

I was trying to avoid font-size as many here has suggested, but... I've
decided to use it anyway because that size sux IMHO so I'm forced to use
font-size.

I think it sux in a big way that different fonts have different sizes
while the same font size.

But I've checked the page I've made and IE6 and latest Firefox do allow
an user to change font' size.

http://www.touchofeternity.com/home.htm

So... what the fuss about not using a font-size?

I don't think that is possible to make *everybody* happy.

Philip Ronan · Oct 14, 2004

Henry said:
I was trying to avoid font-size as many here has suggested, but... I've
decided to use it anyway because that size sux IMHO so I'm forced to use
font-size.

So let's get this straight...

You've set up your browser so that your default font size is too large and
it "sux". So instead of changing your own browser settings, you've decided
it's a better idea to provide fonts at 80% of the default size for everyone
else.

Is that right?

SpaceGirl · Oct 14, 2004

rf said:
If you choose to change it in any way you will only be changing it away from
your viewers preferences. You don't see (or rather hear) radio stations
adjusting the volume of the music for us do you?

Nor can you increase the size of the text on your morning newspaper, or
the size of subtitles on your fave movie.

Er, how do you know?

How do you know they do?

Nope. This subject is almost continuousle discussed. Opinions vary either
way. My opinion leans towards the viewer setting the font size, not the
author.

Agreed, but there are no hard and fast rules.

--

x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #

Henry · Oct 14, 2004

Philip Ronan wrote:

Henry wrote:

So let's get this straight...

You've set up your browser so that your default font size is too large and
it "sux".

Default size of Times New Roman is correct or... acceptable for me.
others like Tahoma, Verdana and Arial are not the same in their default
sizes and that sux.

So instead of changing your own browser settings, you've decided
it's a better idea to provide fonts at 80% of the default size for everyone
else.

Of course!!! If I would change my own browser settings, fonts size would
not change for the user. I would cheat myself.

Is that not logical? ;-P

Is that right?

Absolutely correct.

When I browse on the net, majority fonts are in size of Times New Roman
and that is IMHO right size.

So, to force Tahoma, Arial or Verdana to be displayed in the same size
as Times NR I've decided to use size 0.8em.

That way Verdana size 0.8em looks the same size as Times New Roman in 100%.

Also, some smart css guys have decided that font-size is needed and
should be used.

So... where you see the problem?

Philip Ronan · Oct 14, 2004

Henry said:
So... where you see the problem?

Somewhere between your keyboard and your chair.

This issue has already been discussed at length elsewhere, so I won't bother
continuing this discussion.

It's your site. Do whatever the hell you like with it.

Neal · Oct 14, 2004

Of course!!! If I would change my own browser settings, fonts size would
not change for the user. I would cheat myself.

Is that not logical? ;-P

It's not.

Think about it.

Each user's browser is set up to render text at a particular size if not
told to do otherwise. At least some users have set that size to their
preferred size. The others either have no problem reading at that size, or
they have difficulties reading many, many sites.

If you serve text at their preferred size, then most users will be able to
read it, with the exception of those few who have it set to smaller than
they would prefer.

If you set it smaller, then more and more users cannot read the text as
served. This necessitates more and more users to take an extra step to
resize your page, and that's a barrier to your content you don't need.

Now, what's the default font used in browsers? It can vary, but normally
it's TNR. One important facet of readability is aspect - the comparison of
the x-height to the total font height. TNR is about .5 and you'll find
that nost fonts used as a default are about .5 as well.

This is critical, because if the font you prefer is NOT on the system,
that's what will be used. So let's say you use Verdana, with an aspect of
about .8 . At the same font-size, it looks bigger because of the large
x-height. So authors commonly serve it at 80%. BUT - what happens when TNR
or Arial is replaced for it due to it not being available? Yep, it's TNR
or Arial served at 80% - too small.

Therefore, to ensure you are serving fonts and sizes that are readable:

1) Whenever possible, do not defeat the user's preferred font size. Doing
nothing is best, if you must make changes somewhere setting body
{font-size: 100%} is recommended (by me and others).

2) If you want to suggest a font, compare it to the default fonts and be
sure the aspect is about .5 - otherwise, the font will not appear
readable. Avoid fonts with large x-heights, and if you use them, never
serve them below 100%.

3) Accept that a .5 font at 100% is what the user prefers. You can change
the font, but not the aspect. So only use fonts which are about .5 and
serve them at an appropriate size.

That way Verdana size 0.8em looks the same size as Times New Roman in
100%.

But what many users will end up with is TNR at 80%. See the problem? You
can't set a different font-size based on the font. So you're stuck with
your current thinking.

Neal · Oct 14, 2004

Though in fact they probably ought to do so. Much modern music is mixed
in
such a way to reduce the overall dynamics of the sound, allowing the
mixers to maximise the volume without clipping.

One issue we are neglecting is that devices used to playback recordings or
display broadcasts have easy-to-use volume controls which can be set
perfectly. We're actually discussing rendering visual content in browsers
which cannot so simply set the perfect size, as it's done incrementally,
not linearly.

A better analogy - what if every record was pressed with a different
turntable speed? Some are 30, some are 35, some are 40. You have a switch
which allows 16. 33.3, 45 and 78. None are correct to playback the record
correctly. You may have a fine-tuner, but isn't it simpler to press the
record so that it can be played back at a standard speed?

Wÿrm · Oct 14, 2004

So, to force Tahoma, Arial or Verdana to be displayed in the same size
as Times NR I've decided to use size 0.8em.

That way Verdana size 0.8em looks the same size as Times New Roman in

100%.

Anda do YOU have any idea what size they do look in my 10.4" 1280x1024
resolution laptop? Or someones 21" monitor with 800x600 resolution (he has
bad sight)?

Also, some smart css guys have decided that font-size is needed and
should be used.

And some smart guy assumes each of us use same size screen and tries to
judge what is "proper" size for us?

David Dorward · Oct 14, 2004

Nor can you increase the size of the text on your morning newspaper, or
the size of subtitles on your fave movie.

Actually I can, since I read my morning newspaper online and rip the
subtitles off DVD.

However, you can't (unless you stand outside the print room) receive a
newspaper within a minute of it being printed, but do online new services
delay putting content online to simulate that? One media having a
limitation is not a good reason to artificially impose the same limitation
on another media.

Henry · Oct 15, 2004

Neal wrote:

But what many users will end up with is TNR at 80%. See the problem? You
can't set a different font-size based on the font. So you're stuck with
your current thinking.

Many thanks Neal. Now I do understand the whole issue. So Verdana is not
the best font to use for the web, because the way is displayed.

But... I'm a little smart cookie and my line of thinking is such.

I'll follow the biggest and the most popular web page in whole world and
that way I can't go wrong, correct?

So I've checked source of... Google.

Here we are.... (after typing something in search field)

<style>
body,td,div,.p,a{font-family:arial,sans-serif }
div,td{color:#000}
..f,.fl:link{color:#6f6f6f}
a:link,.w,a.w:link,.w a:link{color:#00c}
a:visited,.fl:visited{color:#551a8b}
a:active,.fl:active{color:#f00}
..t a:link,.t a:active,.t a:visited,.t{color:#000}
..t{background-color:#e5ecf9}
..k{background-color:#36c}
..j{width:34em}
..h{color:#36c}
..i,.i:link{color:#a90a08}
..a,.a:link{color:#008000}
..z{display:none}
div.n {margin-top: 1ex}
..n a{font-size:10pt; color:#000}
..n .i{font-size:10pt; font-weight:bold}
..q a:visited,.q a:link,.q a:active,.q {color: #00c; }
..b{font-size: 12pt; color:#00c; font-weight:bold}
..ch{cursor

ointer;cursor:hand}
..e{margin-top: .75em; margin-bottom: .75em}
..g{margin-top: 1em; margin-bottom: 1em}
//-->
</style>

I think that Google is the most popular page in the whole world and have
to be displayed properly in... every possible browser in the world and
possible in every OS from Win 3.11 to Longhorn, Linux and many others.

I figure that if I'll follow their setup, I would be safe.

And they are not using Verdana.

Neal · Oct 15, 2004

So I've checked source of... Google.

Oh no.

Here we are.... (after typing something in search field)

Holy crap. Don't emulate them too much.

div.n {margin-top: 1ex}
.n a{font-size:10pt; color:#000}
.n .i{font-size:10pt; font-weight:bold}
.q a:visited,.q a:link,.q a:active,.q {color: #00c; }
.b{font-size: 12pt; color:#00c; font-weight:bold}

Try to resize the page in IE, see what happens to text in div classed "n"
and when classed "b". I could point out other problems, such as not using
color without background-color, but I'm tired.

I think that Google is the most popular page in the whole world and have
to be displayed properly in... every possible browser in the world and
possible in every OS from Win 3.11 to Longhorn, Linux and many others.

Well, guess again. Popular != good. Look at McDonald's. You'd similarly
think their food must be the best of all restaurants.

Google and McDonald's offer services that are in high demand. They don't
need to be good.

I figure that if I'll follow their setup, I would be safe.
Eee.

And they are not using Verdana.

Thank goodness for that!

Neal · Oct 15, 2004

Try to resize the page in IE, see what happens to text in div classed "n"

Example: the bit that goes "Result Page: 1 2 3 4 5 6 7 8 9 10 Next".
Won't change size, it's class=n.

Mr Bean · Oct 15, 2004

Neal said:
Example: the bit that goes "Result Page: 1 2 3 4 5 6 7 8 9 10 Next".
Won't change size, it's class=n.

I've checked Google on IE6 Firefox 1.00 and Opera and I can resize fonts
any way I want.

However, IE6.0 is set up with msn.com as home page.

I've tried running IE401 and on some links is showing TNR fonts and they
are unreadable!!! Mainly in MNS news links.

Exactly as you have described!

M$ sux!!!!!

Their own page in their own older browser is unreadable...

Hahahahahahahahaha...

Andy Dingley · Oct 15, 2004

the element was deprecated just over 7 years ago in the first
html4 working draft.

As Henry's example has skipped any doctype, then he's using HTML 2.0.
In such a case, is perfectly correct.

HTML 2.0 is certainly obsolete, but was it (or HTML 3.2) ever formally
deprecated ?

Help with my responsive home page	2	Dec 14, 2022
I need help fixing my website	2	Oct 15, 2023
How can I arrange a series of radio buttons?	2	Jan 25, 2024
Font size problem	20	Oct 19, 2007
Where does this SRC come from?	2	Dec 22, 2005
How can I add arrows to my FAQ	0	Aug 9, 2023
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Closing an overlay outside the overlay as well	1	Dec 11, 2022

Font size, my discovery...

Henry

rf

brucie

Owen Jacobson

rf

Toby Inkster

Henry

Philip Ronan

SpaceGirl

Henry

Philip Ronan

Neal

Neal

Wÿrm

David Dorward

Henry

Neal

Neal

Mr Bean

Andy Dingley

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads