Controlling Type Size

I'm trying to force FF2 and IE7 to display H1 text in the same size on
my monitor. One book suggests first equalizing the sizes, and then
using relative units to fix the desired size. So I wound up with:

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif !important;
font-weight: bold;
line-height: 120%;
}

h1 { font-size: 2em; }

These rules give me the size I want in FF2, but in IE7 the H1 text is
almost 50% larger ... so much for books! Does anyone know a way to
make these user agents reproduce H1 elements at the same size? I know
it can be done because tons of sites look exactly the same in both
browsers, netflix.com and wired.com to cite just 2 examples.

My thanks to those who reply.

On 13 Feb, 18:51, whitesmith <apasse... (AT) hushmail (DOT) com> wrote:

I'm trying to force FF2 and IE7 to display H1 text in the same size on
my monitor.

It's your monitor, so adjust your browser default sizes to match. This
is the appropriate way to do it.

You will find that IE gets it too big on a high-res monitor (small
pixels) set to use "Large Fonts" in the Windows Desktop. This is a bug
in IE - it applies the same scaling correction twice.

For WWWeb design, don't impose your monitor limits on other people.
Leave font-size: 100%; and don't mess with it.



line-height: 120%;
would also be better as
line-height: 1.2;
or even
line-height: 1.3;

1.2 here is _not_ the same as 120%.

whitesmith wrote:

I'm trying to force FF2 and IE7 to display H1 text in the same size on
my monitor.

So use View | Text Size in one browser or the other to adjust it to the
size you want it to be.

One book suggests first equalizing the sizes, and then

using relative units to fix the desired size. So I wound up with:

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif !important;
font-weight: bold;
line-height: 120%;
}

h1 { font-size: 2em; }

These rules give me the size I want in FF2, but in IE7 the H1 text is
almost 50% larger ... so much for books!

You're using relative units. They're relative to the default size set in
your browser. Which is a good thing--it's the whole point of using
relative sizes instead of sizes hard-coded as pixels.

Does anyone know a way to
make these user agents reproduce H1 elements at the same size? I know
it can be done because tons of sites look exactly the same in both
browsers, netflix.com and wired.com to cite just 2 examples.

How do you know what font size is best for your users?

whitesmith wrote:

h1 { font-size: 2em; }

These rules give me the size I want in FF2, but in IE7 the H1 text is
almost 50% larger

Could be running into the well-known bug IE has with scaling em units.
Using % units instead avoids the problem.

Other than that, there's no reason to fret over minor display
differences between browsers. Nobody else will even notice.

--
Berg

Beauregard T. Shagnasty wrote:

whitesmith wrote:

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif !important;
font-weight: bold;
line-height: 120%;

Drop Verdana

Why? ;-) Verdana is good font and possible +70% of users are running Windows
and already have Verdana font installed.
--
Petr Vileta, Czech republic
(My server rejects all messages from Yahoo and Hotmail. Send me your
mail from another non-spammer site please.)

Please reply to <petr AT practisoft DOT cz>

On Thu, 14 Feb 2008 12:23:47 +0100, Petr Vileta <stoupa (AT) practisoft (DOT) cz>
wrote:

Beauregard T. Shagnasty wrote:
whitesmith wrote:

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif !important;
font-weight: bold;
line-height: 120%;

Drop Verdana

Why? ;-) Verdana is good font and possible +70% of users are running
Windows and already have Verdana font installed.

Uhoh, that old discussion again...

Google for the pro's and con's, it's a well known argument.

I myself have no preference either way, but I'll set this thread to ignore
now just in case it once again gets out of hand...
--
Rik Wasmus

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> writes:

Petr Vileta wrote:
Beauregard T. Shagnasty wrote:
whitesmith wrote:
h1, h2, h3, h4, h5, h6
{
font-size: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif !important;
font-weight: bold;
line-height: 120%;

Drop Verdana

Why? ;-) Verdana is good font

Did you read my page? Verdana is an overly-large font.
http://k75s.home.att.net/fontsize.html

Does that matter here?

and possible +70% of users are running
Windows and already have Verdana font installed.

So would you rather annoy the other 30% of your visitors? That is a
large percentage...

I'm really not sure that the general good advice against using Verdana
applies to that snippet:
- there are fallbacks to other reasonable and common fonts and a
font-family default
- the font-size property is not set < 100%
- it's only being applied to headings
If you don't care about things being pixel-perfect it shouldn't matter
that much. I really can't imagine being annoyed by that rule any more
or less whether or not I had Verdana installed.

Much less importantly, it's going to be - for most sites - closer to
95%+ of users running windows, and the Verdana font is freely
available for other systems via msttcorefonts. Given the points above
I think it's a safe suggestion to make to the browser.

That said, I would be concerned for a different reason: having h1->h6
all looking identical. The browser defaults can be terrible
(especially for h4->h6) but at least provide some distinctions.

--
Chris

Thu, 14 Feb 2008 12:23:47 +0100 from Petr Vileta
<stoupa (AT) practisoft (DOT) cz>:

Beauregard T. Shagnasty wrote:

Drop Verdana

Why? ;-) Verdana is good font and possible +70% of users are running Windows
and already have Verdana font installed.

Arrrrrgggggghhhhhhh! Read the archives, please.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you