Consistent Cross Browser Font Sizes

[Tim W]

Still puzzled by this. Not too sure what is wrong with specifying sizes
in px but often hear that relative % sizes are better. When I use % I am
getting a lot of variation from browser to browser which causes layout
problems in menu items, headings, tag lines etc.

What is the best way to handle these font sizes? Is it only paragraph
text that should be specified in % ?

Tim W

 

[Jukka K. Korpela]

Not too sure what is wrong with specifying sizes in px

They relate to the pixel, which is a mutable unit but varies by system,
not by user. One size does not fit all.

but often hear that relative % sizes are better.

For relative sizing, yes. For setting the overall size, setting nothing
is best, though for certain technical reasons, the logically redundant
setting body { font-size: 100% } is recommended.

If you cannot afford the best, e.g. because a pointy-haired boss or a
misguided customer requires otherwise, as it often happens, then use
pixels (px) or points (pt). It's not as bad as it used to be. There are
various schools on pixels vs. points, but the pointy-haired boss or
equivalent probably has made his or her mind anyway.

When I use % I am
getting a lot of variation from browser to browser

That's to be expected. That's part of the whole point. The size is
_expected_ to adapt to users' choices, if only by their choice of browser.

which causes layout
problems in menu items, headings, tag lines etc.

Then you should have designed the layout differently. You should not
have a fixed and rigid layout if you use relative or no font sizing,
thereby voting for flexibility.

 

[Gene Wirchenko]

Still puzzled by this. Not too sure what is wrong with specifying sizes
in px but often hear that relative % sizes are better. When I use % I am
getting a lot of variation from browser to browser which causes layout
problems in menu items, headings, tag lines etc.

The problem with fixed sized is that various users have different
screen sizes. I run with 1024x768. I have run across all too many
sites that assume a higher resolution. I do not like having to
horizontal scroll to read a page.

One annoying example can be seen here:
http://discuss.techinterview.org/
Look at the top right. On my system, it is clipped partway through
the S in "Register". It is not as if there is no space to the left. I
am more understanding when there is a lot of data being presented, but
that is definitely not the case here.

Of course you get variation. That is the point. Browsers will
render to suit the individual systems.

[snip]

Sincerely,

Gene Wirchenko

 

[Lewis]

The problem with fixed sized is that various users have different
screen sizes. I run with 1024x768.

Which puts you in the bottom 5%-10% of web traffic (and shrinking daily).

Sites often have to assume a minimum width, and 1280px is a safe
assumption, *if* you need the space. However, if you don't need the space,
there's no reason to go to 1280.

One annoying example can be seen here:
http://discuss.techinterview.org/

That is an annoying example because there is no reason for it other than
the web-monkey decided to make the minimum width much larger than
necessary.

But in general, if you need the space, you can justify a 1280 pixel
minimum as long as you keep in mind that sites like Youtube, Google,
Amazon, and many others get by just fine with minimums under 1024px.

--
'But look,' said Ponder, 'the graveyards are full of people who rushed
in bravely but unwisely.' 'Ook.' 'What did he say?' said the Bursar. 'I
think he said, "Sooner or later the graveyards are full of everybody".'
The trouble with witches is that they'll never run away from things they
really hate. And the trouble with small furry animals in a corner is
that, just occasionally, one of them's a mongoose. --Witches Abroad

 

[Jonathan N. Little]

Which puts you in the bottom 5%-10% of web traffic (and shrinking daily).

That's a garbage statistic. They are making a bad assumption that
monitor resolution == browser window dims. Wrong! Not everyone runs
their browser maximized! My desktop width is 3200 pixels and I never run
my browser maximized...hint, 2 monitors....

Sites often have to assume a minimum width, and 1280px is a safe
assumption, *if* you need the space. However, if you don't need the space,
there's no reason to go to 1280.

And how is "1280px is a safe" on a handheld device? Not that folks ever
view websites with phones these days, right?

That is an annoying example because there is no reason for it other than
the web-monkey decided to make the minimum width much larger than
necessary.
True.


But in general, if you need the space, you can justify a 1280 pixel
minimum as long as you keep in mind that sites like Youtube, Google,
Amazon, and many others get by just fine with minimums under 1024px.

Disagree, I think your site should adjust for much less...

 

[Gene Wirchenko]

Which puts you in the bottom 5%-10% of web traffic (and shrinking daily).

Sites often have to assume a minimum width, and 1280px is a safe
assumption, *if* you need the space. However, if you don't need the space,
there's no reason to go to 1280.

No, it is not a safe assumption. It is wrong on my system. It
is wrong on mobile systems. Given the latter, 5-10% and shrinking
does not seem at all accurate.

That is an annoying example because there is no reason for it other than
the web-monkey decided to make the minimum width much larger than
necessary.
Quite.

But in general, if you need the space, you can justify a 1280 pixel
minimum as long as you keep in mind that sites like Youtube, Google,
Amazon, and many others get by just fine with minimums under 1024px.

And I can skip such sites and have done so.

Sincerely,

Gene Wirchenko

 

[Lewis]

Disagree, I think your site should adjust for much less...

I think you should have a mobile version of the site, as long as you
give the user the option to view the full site if they wish.

I detest sites that force a mobile view on me and tend to leave them as
quickly as possible.

 

[Jonathan N. Little]

I think you should have a mobile version of the site, as long as you
give the user the option to view the full site if they wish.

I detest sites that force a mobile view on me and tend to leave them as
quickly as possible.

I agree. But what I meant was not to *impose* a mobile view either, but
allow flexibly for both if possible. I cannot stand the 500px ribbon
site, usually centered with equal left and right margins of empty wasted
space.

 

[Allodoxaphobia]

I agree. But what I meant was not to *impose* a mobile view either, but
allow flexibly for both if possible. I cannot stand the 500px ribbon
site, usually centered with equal left and right margins of empty wasted
space.

+1 !

Jonesy