Can I use decimal for ems (font size) setting in style sheet?

Hello.

I’m trying to figure out the proper way to set the size for the font on a website.

// Dreamweaver (ver. 3.0) does it this way.
// Using the point won't override monitor text size set in Control Panel.
<head>
<style type="text/css">
a.navLink:hover {  color: #00CC00}
.navLink {   font-family: Arial, Helvetica, sans-serif; font-size: 10pt}
</style>
</head>

Is there anything wrong with using a decimal for the ems setting?

// Dreamweaver (ver. 3.0) does it this way.
// Using ems overrides monitor text size in control panel but lets user override text size using View > Text Size drop down in both Internet Explorer and FireFox.
<head>
<style type="text/css">
a.navLink:hover {  color: #00CC00}
.navLink {  font-family: Arial, Helvetica, sans-serif; font-size: .75em}
</style>
</head>

I noticed that SitePoint’s website overrides the monitor font size but will let the user change the font size using the View drop down menu in the browser(s).

I hacked my way into SitePoint’s style sheet:

Using x-small and xx-small for the ems setting, like SitePoint does, for some reason still results in font sizes that are too large. Doing something like x-small/140% has no effect on the font size.

It appears that my only option, in achieving my objective, is to use the decimal.

Is it ok if I use a decimal for the font size or is there a better way? or Can somebody tell me how SitePoint gets it (the ems technique xx-small, x-small/140%) to work?

Thanks.

:rofl: I wouldnt really call that hacking!!!

You are using dreamweaver 3?? Thats old, probably has some old style.

Why dont use just define the font size in PX or EM?
Thats the easiest way, Ive never used PT, or “xx-small”.

EMs vary according to the font size, the default size (maybe 12px I dunno) would be .font1 {font-size: 1em;}
you can use decimals such as .8em and lower.

Personally I prefer px sizes.
You can resize fonts in any browser, I dont see the dilemma in using px personally unless someone could really show me a problem it would cause.

.small {font-size: 9px;}
.regular {font-size: 12px;}
.large {font-size: 16px;}
.xlarge {font-size: 24px;}
Thats just an example of what you can do with px.

note: youd want to assign the font you want for the majority of your content in your body{} section.

You can use a decimal for ems, or for points and pixels as well. But not all browsers interperet these the same way. I find that in IE, a font-size of .95 em is the same as 1 em, but .9 is much smaller.

You can take a look at the Yahoo UI font package. It contains code that sets all fonts in all browsers to the same size and then you can just use %'s to control font-size and it should look the same across all modern browsers. The url is at http://developer.yahoo.com/yui/

@Lostseed: The problem with using px is that it does not scale up with resolution, so someone on a 20’’ monitor at a high resolution won’t be able to read a 12px font. And you can’t adjust font size in the browser(or at least not in IE) if it is set in px. % or em is the most user-friendly way to do it.

Yeah the browsers have different rounding. Sometimes you just have to play around until you get something that’s close to what you want in all browsers.

lostseed, valinorbob, Tyssen;

Thanks for the help. The information’s got me up and running. Thanks again.

Volitics

You might like to try one of the following techniques and see if it helps.

body { font-size: small; }
h1 {font-size: 180%;}
p.footer {font-size: 90%:}

or

body { font-size: 90%; }
h1 {font-size: 1.5em;}
p.footer {font-size: 0.9em:}

Should produce a similar value in most browsers?

good luck. :slight_smile:

One more question. What does “ems” or “em” stand for?

Yes you can :wink: A bit long winded to get to, but the people that need to increase the text size know how to do it pretty quickly.

Nadia

It’s the width of the letter “m”. This article may be of some help:

Nadia

An EM originally referred to the width of the Capital letter M and has been used in print for quite awhile. Since not all fonts have the letter M, for web usage it’s now really referring to the overall height of the font.
http://www.w3.org/WAI/GL/css2em.htm

EX units are the height of the lower case x and are also valid with CSS, though I can’t think of a case where I’ve seen them used on the web. I’m thinking that not all browsers support them, but this is just a guess and I could very well be wrong.

The best way to set font sizes for the web is to not set the font size. Design your pages so they work with a wide range of sizes and leave it up to the users preference, on the main body text at the least. Changing the sizes of headings etc. (relative to the base font size), is perfectly acceptable in my opinion.

Top Ten Web Design Mistakes of 2005
Let Users Control Font Size
Web Browser Default Text Size

There are basically three types of users:

  1. Those that don’t care about text size as long as it’s legible.
  2. Those that prefer (or require) a certain size and know how to set it.
  3. Those that prefer a certain size but don’t know how to set it.

Leaving the users preferred setting alone will make no difference to #1, please #2 like you wouldn’t believe, and give #3 a size that is familiar and at least usable.

Well, I guess there’s a fourth type… Designers who either don’t know, don’t care, or are forced by clients to overlook basic usability in favor of looks (I’ve been in all three positions myself).

Those of us that really do insist on a larger sizes, are going to get our larger text whether you like it or not.

There are differences in the way browsers handle the forced minimum font sizes. In Opera and Firefox, for example, the forced minimum will actually be larger than what is being forced, leading to easier breaking of your layout and very often overlapping text, not to mention that it’s still not my preferred size (although too large is better than too small IMO).
accessible font-size conundrum
Working Example

It all boils down to having text that is readable, with the least hassle on your visitors. If your text isn’t readable, I’m either going to figure out a way to re-size it or leave - for most users it’s far simpler to leave.

That Yahoo User Interface link has got lots of good information.

Thanks.

That is due to incorrect browser implementation though. A pixel is a pixel - you can’t resize a pixel without changing the resolution. It is an absolute way of measuring sizes.

Setting no size at all - I don’t agree. Just use relative sizing on everything, and the user will be able to resize at will. What’s the problem there?

They will scale differently based on the font being used, the browser that is rendering the page, and the dpi settings of the monitor. 1em Verdana in FireFox (which uses 16px) on 92dpi is not the same as 1em Verdana in FireFox (again, 16px) on 120dpi. Don’t even get started on Internet Explorer, Opera, Konqueror or Safari either.

And that’s just one font at the default font size. Wait until you try resizing the font size in the browser.

The best way to test against fonts and font-metrics (and sizes) is to use the Lucida Console font for your testing. Once your layout looks the way you want it to, replace Lucida Console with the font you want (I prefer Tahoma for body copy and Georgia for headings), but – and this is VERY important – do NOT change the EM values.