Calgarypuck Forums - The Unofficial Calgary Flames Fan Community - View Single Post

getbak · 10-22-2008, 02:35 PM

You really shouldn't use point size for web display fonts.

As stated, "point" is a print size, so how it displays on one monitor can be different from another monitor depending on so many factors, including what operating system the person is using, and what screen resolution their monitor is set at.

If you are using fixed sizes for your page fonts, using "px" or pixels is preferable, but using fixed font sizes is not preferable (although a ridiculously high number of high-profile websites do it anyway).

When you specify a fixed font size, either points or pixels, you're making a choice for the person that's visiting your site that they don't want you to make.

Some people have poor eyesight, and like their fonts to be very large. Some people want as much on the screen as possible, and set their fonts very small. Then, they come to your page, and the font is whatever size you tell them it'll be.

You may think that you're just controlling the look of your website, to ensure consistency, but with so many variables in play, you can never ensure consistency, and you can only do so much to ensure that your website looks the way you want it to.

Anytime someone views your website, they are viewing it through a completely different set of variables that anyone else who views your website. If you print a brochure to hand out to potential customers, you know that everyone who gets that brochure will get the exact same content in the exact same format. With a website, you do not have any such control over the content, and you shouldn't try to exert too much control, or you risk alienating and annoying your visitors.

It is much better to use relative font sizes that use the individual computer's core browser settings as a baseline.

You can use %, where 100% is the user's base font size, so, if you want a headline font, you set it to 120-150%, if you have a copyright notice or something that you want to be smaller than the rest of the text, you can set it to 75% or so. This way, the fonts will be sized how you want them to be relative to each other, but they will be sized the way the user wants them to be as well.

You can also use "em" as your font size. A font size of 1em is the same as a font size of 100%; 1.5em is the same as 150%, and so on. The advantage of using "em"s is that it allows you to lay out all of the elements of your page using the same unit of measure. If, for example, you want the spacing between paragraphs to be 150% of the height of a line of text, you can set the padding-bottom of your paragraphs to "1.5em" and the spacing between paragraphs will always be 150% of the line height, whether the user's line height is 12 pixels or 18 pixels, or anything else.

Here's what the W3C has to say about it: http://www.w3.org/QA/Tips/font-size

Here's another site with visual examples: http://www.thesug.org/blogs/kyles/Li...248e6c69&ID=22

10-22-2008, 02:35 PM	#8
getbak Franchise Player Join Date: Feb 2006 Location: Calgary, AB Exp:	You really shouldn't use point size for web display fonts. As stated, "point" is a print size, so how it displays on one monitor can be different from another monitor depending on so many factors, including what operating system the person is using, and what screen resolution their monitor is set at. If you are using fixed sizes for your page fonts, using "px" or pixels is preferable, but using fixed font sizes is not preferable (although a ridiculously high number of high-profile websites do it anyway). When you specify a fixed font size, either points or pixels, you're making a choice for the person that's visiting your site that they don't want you to make. Some people have poor eyesight, and like their fonts to be very large. Some people want as much on the screen as possible, and set their fonts very small. Then, they come to your page, and the font is whatever size you tell them it'll be. You may think that you're just controlling the look of your website, to ensure consistency, but with so many variables in play, you can never ensure consistency, and you can only do so much to ensure that your website looks the way you want it to. Anytime someone views your website, they are viewing it through a completely different set of variables that anyone else who views your website. If you print a brochure to hand out to potential customers, you know that everyone who gets that brochure will get the exact same content in the exact same format. With a website, you do not have any such control over the content, and you shouldn't try to exert too much control, or you risk alienating and annoying your visitors. It is much better to use relative font sizes that use the individual computer's core browser settings as a baseline. You can use %, where 100% is the user's base font size, so, if you want a headline font, you set it to 120-150%, if you have a copyright notice or something that you want to be smaller than the rest of the text, you can set it to 75% or so. This way, the fonts will be sized how you want them to be relative to each other, but they will be sized the way the user wants them to be as well. You can also use "em" as your font size. A font size of 1em is the same as a font size of 100%; 1.5em is the same as 150%, and so on. The advantage of using "em"s is that it allows you to lay out all of the elements of your page using the same unit of measure. If, for example, you want the spacing between paragraphs to be 150% of the height of a line of text, you can set the padding-bottom of your paragraphs to "1.5em" and the spacing between paragraphs will always be 150% of the line height, whether the user's line height is 12 pixels or 18 pixels, or anything else. Here's what the W3C has to say about it: http://www.w3.org/QA/Tips/font-size Here's another site with visual examples: http://www.thesug.org/blogs/kyles/Li...248e6c69&ID=22 __________________ Turn up the good, turn down the suck!