views:

1156

answers:

9

My main browsers (FF and Chrome) are both configured for a 12 point font. In both browsers the font picker shows a font preview, and in both they are the same size and a comfortable size for reading web sites. My IE doesn't allow me to set font size, but seems to default to something a little bit larger than Chrome.

On my personal website, I use XHTML & CSS and have designated the page font as "medium", and use that font size for all of the principle text (the "content" text). When I view the site in IE 7, FF 3 and Chrome 0.4 the font displays as expected and matches the font pickers (except in IE where it's a little larger).

BUT, I go to nearly any other website (Google, StackOverflow, The DailyWTF, CodingHorror, Microsoft, Sourceforge, even W3C, etc) and they all display in tiny little microscopic fonts - what I estimate is 5 - 7 point.

This is true on 3 different computers, with 2 different O/S (Vista and XP) and 4 different monitors (laptop, CRT, and brand new WS LCD).

What's up with that? Am I overlooking something fundamental about web site design that I need to know? Or is it just that all these web sites do dumb things like setting the font to 50%, or 0.5 em, or x-small??? Why can't web site designers honor my font selection for the content text (I understand that side-bars, and footers and such might reasonably be small or x-small).

I would be tempted to think it's just uninformed web site designers, but, heck!, these are some big name sites!!

EDIT: To be clear I am not saying using em or % is dumb, I am wondering why many sites seem to use about 50% of my configured size. Surely my configured size is the size I would like to see text in.

EDIT: From W3C's CSS spec: "The following table provides user agent guidelines for the absolute-size mapping to HTML heading and absolute font-sizes. The 'medium' value is the user's preferred font size and is used as the reference middle value." - emphasis mine.


There's a consensus coming through that web sites base relative font sizes on the typical browser default of 16pt, which is unfortunate but "that's life". But what about other systems - can we expect all browsers to so default?

At least I understand the problem now.

I want to leave this question open for a while to see if others have differing views, before I select a final answer.


Conclusion: I have reset all my browsers to 16pt (18pt on my 125 DPI machines), and set my website to use font-size: 90%. This is giving a good display size and, of course, all my favorite sites are now readable. Thanks for all the constructive answers and the lively to and fro.

This is a great community.

A: 

Setting a font to a % or an em measurement is not a dumb thing, in fact it is W3C recommended!

adam
Read my post - I am not say using em or % is bad.
Software Monkey
Read my answer, then read your post again. You implied using them was a dumb thing :p
adam
Font's too small... are they setting 50%... this seems dumb. Ergo, % is not dumb, rather 50% of my *preferred* size is dumb.
Software Monkey
+6  A: 

Most browsers - if not all of them - set the default font size to 16px. Many websites use relative font sizing too. This will cause you a problem if your browser's font size is lower than this.

Consider the case where you have a default font size of 16px in your browser. When the website font is 1.0em, it will display as 16px. Some other text maybe be 0.7em though, so that'll be smaller. However, if your default browser font size is 12px, 1.0em will be 12px and 0.7em will be unreadable because it will be so small.

The solution is to keep your default browser font size to 16px, which will give you a realistic view of what others see when they view your site. Oh, and using relative font sizing is best-practice, not a mistake.

Philip Morton
Should not the web site designer assume that *medium* is my *preferred* font size? The CSS spec certainly states that it is.
Software Monkey
welcome to the whim of the artist, designers are not engineers, they don't think about pragmatism in most cases, unless they are industrial designers, in which case, they may not even understand font scaling and just use px. instead of pt or % or em.
DevelopingChris
+1. But you must remember that it can be a good thing that artist are not engineers. It it good sometimes to have a beautifull design, yet less usable. You will feel better using it, no matter how harder to use it is. It's how the human brain works : balance between what he imagines and likes to do.
e-satis
+2  A: 

In most modern browsers the %age allows for dynamic rendering. Ctrl- and Ctrl+ are your friends.

At least most developers have realised that setting a fixed size font is bad.

Unsliced
I know about CTL+ and CTL-, but it's annoying to have to do that on nearly every tab I open. And how is telling my browser to display the main page text at 50% of my chosen size a good thing to do?
Software Monkey
A: 
  • Use css to manipulate the font size
  • Give font size in em
  • Use cheat codes (e.g # , _ ) for different browsers if fonts render in different sizes on different browsers.
Samiksha
+1  A: 

I've had this problem with Chrome, but not to the extent that you are talking about. Some pages however display really tiny fonts that looks ok in other browsers. In some forums the font actually gets smaller for each post - so I normally can read the first post and maybe the second, but the rest is just pixels :)

Torbjørn
I suspect that the diminishing blog font problem is because they are including the responses server-side with the style font:80% in *nested* divs, not realizing the 80% applies to the font size of the parent.
Software Monkey
A: 

To answer your EDIT: the reason is self-evident. The designer of a page needs to convey a set of information with varying properties and varying the realtive sizes of the fonts is one of (the earliest) tools in typography and layout available to him.

You as the viewer are allowed to define a comfortable baseline for yourself, but if the designer wishes to stress or destress the importance of a section of text that's up to him and is for your benefit. You should no more begrudge him 50% heights than you should #999 or italic.

All of this is subject to the designer being worth his salt and not abusing it which can sadly happen.

annakata
Yes, but why set the size of the content of you page to 1/2 of the size in which I would *prefer* to see the content of any given page.
Software Monkey
If you're saying the font-size on a root like "body" is set to 50% well yeah that sounds a little abusive. There are aesthetic arguments for ~80% or >100% but as described it sounds unreasonable.
annakata
addendum: SO's base font is "100%", google's is "medium" or "small", W3's is "inherit" - you can see all this in firebug. The problem may be your own.
annakata
@annakata - thanks I will look closer using firebug. FTR, I don't know that it's the "root" element font size; I rather suspect it's the font size for the principle text (e.g for <p> in the SO questions) that's been reduced.
Software Monkey
@annakata - SO sets the body font to 80%, so doesn't that mean the page's base font from that point on becomes 80% of what the browser has configured, or 9.6pt from my configured 12pt? In effect, SO has decided to display everything at 80% of my preferred size, which is tiny??
Software Monkey
+2  A: 

I don't care what size a font is, as long as I can change it. Thats the biggest reason I hate flash sites. I was looking at the careers page for a certain large company not too long ago and the font was TINY. My instinctual reaction is to hit Ctrl-+ (in firefox) but the text, rendered in flash, could not be resized! I immediately left the site. I don't have the best eyesight, so I need to be able to make small text bigger.

Another problem I often encounter is fixed width websites. I use high resolution monitors (1600x1200, 1280x800 or higher) and theres nothing I hate more than having over half my screen space blank. Worse yet, some websites, the fixed width does not get larger when I make the fonts larger! Once I was trying to read an article after having made the text larger and it had THREE WORDS PER LINE and a LOAD of blank screen space to the right...

Dan
Yeah, I encounter that all the time too. Pisses me off. What pisses me off more is when I'm left with 3 words per line, and adverts are taking up the rest of the real estate.
Software Monkey
Ahhh nooo don't remind me of adverts.. pain!
Dan
+1  A: 

Software Monkey set out to fight the whole world. He totally disagrees with the way browsers render font sizes, the major web sites and the way they set their font sizes, and tries to enter into hot arguments with every single poster of this thread.

I have a simple guideline in life. When you think everybody else is wrong you might not be right.

Furthermore even if you are right it's often smarter to go along with the world around you rather that fight each and all.

Here is a thought. If you are a web designer and know that over 99% of visitors are not going to tinker with their default browser sizes then you most certainly want to make your site look well for that majority. That pragmatism explains the current situation.

Anyway good luck in your quest.

allesklar
My "quest" is to get to the root of what I need to do in my website. Should I cater to the documented and spec'd definition of preferred size, or should I cater to the browser default (which hadn't occurred to me when I posted).
Software Monkey
W3C haven't specified that relative font sizes are relative to 16pt, they have specified that they are relative to the user's preferred size - I do take you point that for most users that's the browser default - and it's unfortunate that the browers default to overly large size (rather than 12-14)
Software Monkey
A: 

I would say that since there are different standards for each browser that there are going to be different rendering modes for fonts.