11 replies [Last post]
garetcarrot
Offline
newbie
USA
Last seen: 17 years 17 weeks ago
USA
Joined: 2003-06-25
Posts: 9
Points: 0

Mmmkay...I'm fanatical about being close as possible to standards. When I was going through w3.org, I saw something about a standard CSS font size, it was in em units or something. Gah...but w3c makes my head hurt. Smile Does anyone know the deal with thiiiiis?? Thankness...

Daniel
Daniel's picture
Offline
Enthusiast
Last seen: 45 weeks 2 days ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 76
Points: 0

CSS Standard Font Size?

Okay... I think I have this right.

Em's are used to specify the font size in relation to the base size specified in the 'body' of the page. For example, if you set the font-size for the body element to 'small', then 1 em would be equal to the size 'small'. If you don't set the font-size for the body element, it will just get set to the browser default.

There are some issues with inconsistency across browsers, though. Have a look here or here for more info.

Hope this helps!

stu20001
stu20001's picture
Offline
Regular
Last seen: 13 years 28 weeks ago
Joined: 2003-06-23
Posts: 30
Points: 0

CSS Standard Font Size?

I think thats nearly right but something I read suggested using em will specify the font-size in relation to any parent element (not just the body). So if you set <P> as small, and <b> as 1.5em then any Bold text will appear as 1.5 x small

As with anything CSS related there are browser inconsistencies though and you may find that this doesn't always work.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

CSS Standard Font Size?

Yeah EM's are a bit like percentage values... 1em is equal to 100% of the parent font size; 1.5em is 150%, etc.

Where they are useful is in padding - you may want one lines' worth of padding, so you do padding-bottom : 1em and voila! Should the text shrink or grow, so will the padding.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Daniel
Daniel's picture
Offline
Enthusiast
Last seen: 45 weeks 2 days ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 76
Points: 0

CSS Standard Font Size?

I was so close! You're right, though. It is based on the parent element.

garetcarrot
Offline
newbie
USA
Last seen: 17 years 17 weeks ago
USA
Joined: 2003-06-25
Posts: 9
Points: 0

CSS Standard Font Size?

Thanks! That helps a lot...I'd rather just use pt or px, sometime's the W3C's standards don't make ANY sense...like em for example. Thank you again...-Maggie

Hawk
Offline
Regular
Soton, UK
Last seen: 17 years 13 weeks ago
Soton, UK
Joined: 2003-07-29
Posts: 7
Points: 0

CSS Standard Font Size?

garetcarrot wrote:
Thanks! That helps a lot...I'd rather just use pt or px, sometime's the W3C's standards don't make ANY sense...like em for example. Thank you again...-Maggie

use ems !!!!!!!!!

Basically, if user changes font size, or if you want to make a parent lement bigger ... then everything else will rescale appropriately ... with pxs everything is just a nightmare and is not the slightest but user friendly !!!!

d3signmonk3y
d3signmonk3y's picture
Offline
Enthusiast
Toledo, Ohio
Last seen: 17 years 13 weeks ago
Toledo, Ohio
Timezone: GMT-4
Joined: 2003-07-29
Posts: 59
Points: 0

CSS Standard Font Size?

Quote:

use ems !!!!!!!!!

If only it were that simple. ems and percantage based measurements are a nightmare from browser to browser. DWWS has a good discussion of how current browsers handle the different methods of text sizing and offers a workaround using keywords as their recomendation I think, unfortunately I loaned my copy to my creative director. Does anybody else have a copy they could look it up in?

Sorry I'm new to forums and don't know how to properly quote a previous post. Crying

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 7 years 23 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

CSS Standard Font Size?

For all those who think ems are good, read this article: http://www.alistapart.com/stories/fear4/

@ d3signmonk3y ... to make a quote from a previous post, just click the quote button on the top right corner of the post. The textarea will then be populated with the previous post contents and its authors name attached to it.

http//melbourne.ug.php.net

d3signmonk3y
d3signmonk3y's picture
Offline
Enthusiast
Toledo, Ohio
Last seen: 17 years 13 weeks ago
Toledo, Ohio
Timezone: GMT-4
Joined: 2003-07-29
Posts: 59
Points: 0

CSS Standard Font Size?

paCkeTroUTer wrote:

@ d3signmonk3y ... to make a quote from a previous post, just click the quote button on the top right corner of the post. The textarea will then be populated with the previous post contents and its authors name attached to it.

Well looky there. Thanks pT. And thanks for the link to the article, I hadn't seen that one. It seems a little more dated than the recommendation from Designing with Web Standards though.

DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 17 years 31 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

CSS Standard Font Size?

FYI: If you don't specify a point size, the standard text size on pretty much all browsers is 16pt.

YA FYI: Before Safari's 1.0 release, all the beta versions previous to that were stuck on 14pt, making accessibility-conscious designers mad... but when Dave Hyatt, Safari developer was bombarded with pleading designers, he fixed it promptly Wink

Mike

</twocents>

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 13 years 20 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

CSS Standard Font Size?

For the sake of accessibility, I've generally encouraged the use of the keywords, and I take issue with one of the points in that article. The problem as discussed there is that different browsers treat different keywords as different sizes, to the extent that in some browsers, text will be rendered illegibly.

Now, while this is a valid point, the thing to remember is that these keywords specify relative sizes, and that the user can increase or decrease the actual size of the text using browser controls, even in the older browsers. If we use pixel sizing, the user can't do that.

That said, the option of not specifying a size at all is still probably the best option. Nobody ever complains that they can't read a document marked up with only Hx and P tags...