How you do you usually set font sizes in CSS?

June 24, 2004 2:31 PM

How you do you usually set font sizes in CSS? [more inside]

I usually use the method describes in sane CSS font sizes (set body type to a percentage and use ems), which works fine except that it's tricky to set a size for smaller than normal type. I've also used keywords, which I don't like as much, mainly because I want medium to be my, you know, medium size, not x-small. I usually don't use pixels because of the inability to resize them in Windows IE.

posted by kirkaracha to Computers & Internet (10 answers total)

I would stick to pixels. They're the most uniform and give you standardization across browsers.

Any custom resizing by the client is their prerogative.
posted by linux at 2:39 PM on June 24, 2004

Depending on the font, I usually declare the size in keywords or em, and then percentage-change everything.

I don't like pixels, because it's not resizable in IE, and that makes stuff hard for the 50+ crowd to read (just recently found this out when my dad was saying he didn't like how small the font on my site looked).

On second thought, do we even know if users ever actually *use* the text-resize functions in IE? When I used IE, I almost never did.
posted by gramcracker at 2:48 PM on June 24, 2004

No! Don't use pixels! They may be uniform across browsers, but they are dodgy as fuck across different screen resolutions. I usually use 1280 x 1024, as all right-thinking people with large monitors do, and small pixel spec'ed fonts are a massive pain. And yeah, on desktops where I'm forced to use IE, I can't resize to spite you either.

One lovely option is to expose an interface that lets users pick their own size: see this site for an example.

I also second the call to respect the older use. Small fonts are very discriminatory. If you prevent people from resizing, that's even worse. And I can testify as an ex-desktop support person that people start noticing from about 40 onwards.
posted by i_am_joe's_spleen at 3:03 PM on June 24, 2004

Pizels are standardized and compliant browsers resize them. IE will, too, in the next version.
I'd rather be cross-browser uniform now and not mess with percentages and relative sizing than have to go through all of it again when IE finally fixes its mistakes... which will be.... oh.... next year.
posted by linux at 3:10 PM on June 24, 2004

... or whenever Longhorn comes out.
posted by linux at 3:15 PM on June 24, 2004

Recently I've been using keywords, but I've found them to be a bit limited. I used to use percentages and ems, but even that can result in large differences between machines/browsers.
posted by thebabelfish at 3:23 PM on June 24, 2004

I usually use percentages or ems for body text, but less important sections like footers and such I use pixels.
posted by brownpau at 3:48 PM on June 24, 2004

I define the BODY as "medium" and scale from there, usually in ems.

I redesigned one of my higher-traffic pages to use px once, and immediately got a chorus of complaints that the text was too small.
posted by adamrice at 4:09 PM on June 24, 2004

Except not all browsers treat "pixels" -- which you would think as an definable constant -- the same; according to that book of Zeldman's, Opera redefines a pixel (as a percentage of an angle of some arbitrary size or some crazy trigonometric shit like that), and as a result you can't count on them working as accurately on other browsers.

Not that you should use pixels anyway, since then users can't resize them using the built-in methods in IE (and you end up having to make a widget like joe's_spleen linked to above).

I seem to remember in the same book, JZ suggests using the larger/smaller/xx-small/xx-large tags but admits IE's support (I think) for these is a little bit shithouse.

Upshot: you might want to consider using em's, which aren't perfect, but are better supported than the alternatives.
posted by John Shaft at 7:55 PM on June 24, 2004

Sigh. Every time we think this debate is settled it pops up with the same arguments all over again.

px are fine for what they are, which is non-resizable units that are relative to other page elements that're sized in pixels, notably images. They're very useful for text that has to fit an image-related layout, but setting body text in them isn't always ideal.

That some browsers allow fonts set in pixels to be resized anyway is not something that the CSS standard endorses, and IE is not *wrong* to refuse to scale them, just inconvenient. Scaling px-text is a necessary feature in the face of idiot web designers who have set body text in very very small pixel sizes, that's all.

(Unfortunately it can also break layouts: if you set a block to 20px and a font size to 20px only one of them will scale even though they are apparently the same size. Opera's great whole-page-zoom feature is much more consistent in this regard.)

(There was a problem with older versions of Opera/Mac, but everywhere else px is consistent.)

Keywords are broken in IE5/Win, with the default being 'small' instead of 'medium'.

Ems are problematic in IE/Win in that if the user chooses a non-medium text size they get scaled too much. It is in my experience pretty common that a non-medium text size will be chosen; quite often this is on machines set at 120dpi: the user sets the default (small and in some cases not alterable) Windows fonts to 'Large', notices that web browser fonts are now too large in comparison, and sets them to 'Smaller'.

Percentages work well, unless you are particularly concerned about the '100%-is-one-pixel-off' bug in older Operas. The hack of setting body in percent and everything else in em also works fine.

If you are using table layouts - particularly nested ones - with inheriting font units like % and em, you'll want to use a CSS rule like 'table { font-size: 100% }' to allow them to inherit properly across browsers, or risk inconsistent results. This works in all browsers that suffer from the problem except for Netscape 4; in this case N4 is still an issue it may be best to stick with pixels.
posted by BobInce at 2:39 AM on June 25, 2004