•  22-07-2019
  •  | 
  •  

Question

My main browsers (FF and Chrome) are both configured for a 12 pixel 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 pixels.

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 16px, 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 16px (18px 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.

Was it helpful?

Solution

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.

OTHER TIPS

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.

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...

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.

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 :)

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

  • 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.

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.

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top