Calgarypuck Forums - The Unofficial Calgary Flames Fan Community
Old 10-22-2008, 11:15 AM   #1
Russic
Dances with Wolves
 
Russic's Avatar
 
Join Date: Jun 2006
Location: Section 304
Exp:
Default Font Size Question

Greetings. I'm hoping some of the more skilled designers in the crowd can help me out with this one. I'm not sure where on the spectrum of dumb questions this is, so I figure I'll just spit it out and deal with the ridicule if it's deserved. I'd like to be more of a font guru but I've unfortunately never sat down to really learn the basics. I managed to get a question from a superior at work and I'm rather stumped at how to answer it.

He thinks the fonts are too small on our webpage, so he asked me what they are. A quick tour through css land confirmed for me that the fonts are 11-12 point depending on what area of the page they are in. I managed to confirm this by a very unscientific test in photoshop as well.

After informing him of this, he writes back with a word document example saying "take a look here though - it's obvious the fonts are 8-9 point". He seems to be correct. 12 point font in word does not look like a 12 point font in a web browser. Would someone be so kind as to enlighten me on why this is?
Russic is offline   Reply With Quote
Old 10-22-2008, 11:17 AM   #2
ok, ok,....I get it
Lifetime Suspension
 
Join Date: Sep 2008
Location: , location, location....
Exp:
Default

huh?
ok, ok,....I get it is offline   Reply With Quote
Old 10-22-2008, 11:20 AM   #3
Russic
Dances with Wolves
 
Russic's Avatar
 
Join Date: Jun 2006
Location: Section 304
Exp:
Default

Okeedokee here's the abridged version:

What is a 12 point font size on the web closely matches a 9 point font size in word and I'm trying to figure out why.
Russic is offline   Reply With Quote
Old 10-22-2008, 11:27 AM   #4
Nancy
Powerplay Quarterback
 
Nancy's Avatar
 
Join Date: Feb 2006
Location: Sunnyvale nursing home
Exp:
Default

For starters:

- When you specify a font size in word, you are specifying a printed font size, not a screen font size.

- For a browser to accurately render a font as a point size, it would need to accurately know the metrics of the physical display monitor, which may not always be the case. e.g. You have a 19" monitor but it assumes you have a 15" monitor because you don't have the proper driver for your monitor.
Nancy is offline   Reply With Quote
Old 10-22-2008, 11:38 AM   #5
Russic
Dances with Wolves
 
Russic's Avatar
 
Join Date: Jun 2006
Location: Section 304
Exp:
Default

Quote:
Originally Posted by Nancy View Post
For starters:

- When you specify a font size in word, you are specifying a printed font size, not a screen font size.

- For a browser to accurately render a font as a point size, it would need to accurately know the metrics of the physical display monitor, which may not always be the case. e.g. You have a 19" monitor but it assumes you have a 15" monitor because you don't have the proper driver for your monitor.
Thank you very much! I assumed it was something along these lines but I didn't understand fully.
Russic is offline   Reply With Quote
Old 10-22-2008, 12:36 PM   #6
Barnes
Franchise Player
 
Barnes's Avatar
 
Join Date: Aug 2005
Location: Violating Copyrights
Exp:
Default

Also, make sure you are comparing the exact same font.

CalgaryPuck
CalgaryPuck
CalgaryPuck
CalgaryPuck

These are the same font sizes but appear different.
Barnes is offline   Reply With Quote
Old 10-22-2008, 12:40 PM   #7
Phaneuf3
First Line Centre
 
Join Date: Oct 2005
Exp:
Default

in your browser window hold your control key and start playing with your mouse wheel.
Phaneuf3 is offline   Reply With Quote
Old 10-22-2008, 02:35 PM   #8
getbak
Franchise Player
 
getbak's Avatar
 
Join Date: Feb 2006
Location: Calgary, AB
Exp:
Default

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!
getbak is online now   Reply With Quote
Old 10-22-2008, 04:03 PM   #9
Russic
Dances with Wolves
 
Russic's Avatar
 
Join Date: Jun 2006
Location: Section 304
Exp:
Default

extremely informative getback, thanks to you and everyone else who dropped by.
Russic is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -6. The time now is 06:01 PM.

Calgary Flames
2023-24




Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright Calgarypuck 2021