Griping on CSS Sizing

This is getting so freaking annoying. Barely ANYONE uses proper font sizes on the website. That probably includes you!

The proper way is to use relative font-sizes in your CSS (small, x-small, large, x-large, etc) or the appropriate HTML tag (H1, H2, BIG, etc).

So many site designers are using either an exact font size (8pt, 15px, etc) or worse yet, a mix of relative and exact font sizes. As a result, when you use Ctrl+Wheel to adjust the font sizes, either nothing happens or some stuff grows and some does not.

I especially notice it, since I'm running in 1900x1200 resolution. Even when using Large Fonts (130% normal size (125 dpi)), on many sites I still have to strain.

Another annoying thing is JavaScript popups that aren't resizable... especially when they contain a form and lots of content. A bunch of MT blogs appear to have this problem.

Let the USER choose what font size he wants! Keep things flexible and generic, to maximize the accessilbity and usability of your content!

<end_rant />

On that note, I've modified the style sheet for this site (yet again). I've disabled custom fonts, custom font decorations & styles (that disabled link underlining), and so on. The problem with using "font-style: verdana,arial,sans-serif" is that verdana is a bigger font then the default times new roman. That's the 369th revision to the template.

Let me know of any comments you might have...

Care to list the offending sites?

All looks good in IE, damm sister's machine only having IE

-- fozbaca

Sites that are ok:,,,,,, (except for nav links),,

Sites that are almost ok: (fonts resize ok, but left div overlaps the text in the right div when fonts are big), (same problem), ...

Sites that don't resize: (only one or two styles resize),,, ...

A lot of sites have the problem where a couple of the styles (eg titles and headings) will resize, but not the body text. With some sites, only the footer is resizing, causing the scrollbar to jump around. It appears to be really hard to have it so that with big font sizes, no text is getting cut off. comes pretty close to looking good with big fonts, however, the links in the beige bar at top are way to close to the bottom of that area.


em sizing works just fine -- that's what I'm using for speakeasy. Font sizing really is a relative thing though; what's just right for one person is ridiculously huge (or ridiculously small) for another. Often, a designer will just make a best judgement call, taking the client's advice, and choose a font size that best complements the site design as a whole (font size can make a very big difference in the look and feel of a site).


Yep... resizes nicely for me, using with Ctrl+Wheel in IE6. I'll have to go through your stylesheet line by line... I see you're using a mix of px and em. --Wim

there may be some deprecated rules in there. ;)


See also DHTML