Units for font-size.

em's or percentages
15% (2 votes)
px
62% (8 votes)
pt
23% (3 votes)
Total votes: 13
Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

I think you're just having us on, Niqueco...

They have: 3 posts

Joined: May 2002

"

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

I agree, the users are the most important, and least considered. Poo!

I've always gone for big pixels... heh!

They have: 48 posts

Joined: May 2002

Quote: Originally posted by Suzanne
Go big, or go pixels, I suppose.

Unfortunately, you're probably right Smiling

Pity Zeldman didn't mention Users in his comment

Quote: Most designers (and most clients) favor smaller type

- might also be relevant what they favor Wink

Got to say I don't think much of Brigg's comment

Quote: I can't tell you in calm language how moronic I think putting a font sizing widgit on a page is. I can't think of anything that better screams 'designer failure' and 'this medium is not ready for prime time'

- smacks of 'control freak' to me Smiling

My monitor has brightness & contrast knobs;
My sound system has a volume-control knob;
My windows have adjustable drapes;
Some of my lights have dimmer switches.

Are these also designer failures? I think not.

It's a pity that there seems to be biases in most of the "expert" commentary I've read on this topic. Either a bais towards control [eg Briggs] or a bias against aesthetics [eg Nielsen].

Oh well - it's no-win for now, got to make the best of it Smiling

Mike

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

[url=http://www.zeldman.com/daily/0502c.html#purtypink
]Zeldman[/url] and Owen Briggs discuss the pain of using em. And why px are still the best option out there if you want to use undersized text.

Go big, or go pixels, I suppose.

Smiling Suzanne

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

I'll ask again, Niqueco, what browsers are you using that are rendering pixel units so badly? What size is your monitor that you have at 1280x1024?

I disagree that px are the worst, but we've been there.

They have: 3 posts

Joined: May 2002

If all browsers implemented CSS2 correctly, from worst to best:

  • px
  • pt/cm
  • em - percentage
  • medium/large

But Explorer 4 and 5 defined "medium" as , so they destroyed the posibility of using them. Units pt/cm have a great thing in favor, they adapt to the display. I use a 1280x1024 display, it has a resolution of 100dpi. A pt specified font-size will ignore my settings, but at least it will be shown as the author intended, not as an ilegible spot of tiny pixels. But Windows and Mac, instead of using the real dpi value they use an invented one, which is different for Macs and PCs. This reduces the niceness of these units. So em's and percentages are IMO the best option.

For those who speak in favor of forcing absolute pixel sizes to the users and say that relative=too hard, the old was a relative measure, very similar to the "medium", "large" keywords.

nicora's picture

He has: 267 posts

Joined: Nov 2001

I only read the first post...

My opinion, 11px

Why?

compatible in NS 4+ and IE+

I like 'em little Smiling

Somebody told me 8pt doesn't work, they were right...

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Quote: Originally posted by Mike Feury
You mean it's not like standard page zooms where everything gets enlarged? If only the characters get enlarged, whoa!

Mind you, it might force the correction of a flaw [IMO] in many web pages - insufficient white space. Too many large blocks of text, all jammed up against the margins.

I use line-height: 150%; for most. I suppose I could use line-height: 1.5em;, which I used to do and I don't remember why I stopped. I think because I went to using px for line-height, then found the zoom problem, and then went to percentages, leaving em behind in the dust.

I change it depending on the size of the text I'm dealing with (default) as well.

If you use px for line-height, when someone zooms the text in Mozilla or N6, the text overlaps as the line-height remains unaffected by the text zoom.

Smiling S

They have: 48 posts

Joined: May 2002

Wow, you're on the ball Suzanne - replied before I had my next post done. You'll definitely outplay also ... Laughing out loud

Quote: Does that alleviate the text zoom issue for IE 5/PC?

I have no idea. Still just learning this stuff, haven't got to that whole zoom thing in any depth yet.

Quote: the text zoom will have catastrophic effects on line height as it gets bigger (text overlap).

You mean it's not like standard page zooms where everything gets enlarged? If only the characters get enlarged, whoa!

Mind you, it might force the correction of a flaw [IMO] in many web pages - insufficient white space. Too many large blocks of text, all jammed up against the margins.

Quote: I'm glad you clarified em instead of percentages for text.

I'm not at all familiar with the detailed quirks like you are, but I've read that percent for font is less robust than em - so since they mean the same thing, I'll go with em.

It's mainly an organizational thing for me. I'd surely confuse myself using percent for both font & layout, plus using different units should speed debugging too.

Mike

They have: 48 posts

Joined: May 2002

Quote: Originally posted by Suzanne
Points are a print measure, like em, and as such, are included for the printing stylesheet (though some would argue about the whole em being for print only, read above).

Hi Suzanne,

Reading a few of your comments about em being for print, I think we may have differing interpretations of what em means for the web. It's worth clearing up, I'd hate to be barking up the wrong font Smiling so here's my current understanding:

Point is a specific measure, ie 1/72 of an inch. At default screen resolution, a font size of say 12pt will = 12px on the Mac and 16px on Windows. This of course changes when the user changes screen resolution.

em is not a specific measure, it is relative to the default or specified font size [of the parent]. If the browsers renders size as 12px, then 1em = 12px, 2em = 24px etc. If the user or designer changes font size, then the value of 1em also changes.

A useful use of em - without interfering with the user's basic preference - could be to change the default browser Heading sizes, which many regard as too big. You could specify H1 as 1.5em and H2 as 1.3em for example, so they retain compatibility with the reader's preferred font size [which equals 1em by definition]

Is that your understanding also?

[Aside for others - this em unit is not to be confused with the 'emphasis' tag, a completely different thing]

Mike

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Quote: Originally posted by Mike Feury
As a compromise, you could specify a px size for and use em for everything else - everything would then scale to your px base [apart from inheritance cases].
That would be forward-compatible - just change the base whenever.

I was thinking that might be the best alternative for now. Then there would be literally one thing to change if things in the future become even more harmonious, as these things progress. I'd be more comfortable using em than percentages, for sure.

I've seen a few sites doing that and I like the concept. Does that alleviate the text zoom issue for IE 5/PC?

I do use percentages/em instead of px for line-spacing and such, because the text zoom will have catastrophic effects on line height as it gets bigger (text overlap).

Percentages seem to fall into weird spaces in the fonts that don't always render well. The same could be said for px, of course, it's just that I've already figured out most of that. Laughing out loud I'm glad you clarified em instead of percentages for text.

Quote: Originally posted by Mike Feury
I agree this is a very useful discussion, great to meet a well-crafted alternative viewpoint Smiling

Agreed. From this side as well. Smiling

They have: 48 posts

Joined: May 2002

Quote: Originally posted by Suzanne
[B]I would dearly love for things to be unified, but proper HTML/xHTML markup with default fonts means obscenely large headings.

Very true - I would certainly respecify H1 etc relative to the base font size, eg 1.5em.

Quote: Originally posted by Suzanne
[B]I see what you're saying with the forwards compatibility, but really, with the CSS in one place, is it really that different whether you use px or percentages as far as forwards compatibility goes?

I think it is quite different. Btw, if I said percentages earlier for fonts, I goofed and meant ems - percent is more suited for layout than font IMO.

The power of em extends well beyond font size, it can be very beneficial in maintaining page balance and harmony. If you specify elements like padding, line height, borders, indents and maybe margins in ems, then you can maintain good aspect ratios between your design elements. As far as I can see, that will be much more forward-compatible than px.

I'm not sure offhand, but I believe em is well supported by all browsers after Netscape 4? So it's viable for anyone who chooses to ignore NS4, and also for anyone who accommodates NS4 via a separate style sheet.

As a compromise, you could specify a px size for and use em for everything else - everything would then scale to your px base [apart from inheritance cases].
That would be forward-compatible - just change the base whenever.

I agree this is a very useful discussion, great to meet a well-crafted alternative viewpoint Smiling

Mike

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

If you check the font test pages linked above, and use them to test different computers, and different monitors, you'll see some of the problems. Smiling

Points are a print measure, like em, and as such, are included for the printing stylesheet (though some would argue about the whole em being for print only, read above).

I think the bigger/smaller and large/small/x-small measures, which are entirely intended for the web, are the worst of the lot, then points, then em/%, then px (or reverse the last two, depending on your point of view).

Basically it all comes down to cross-browser, cross-operating system compatibility. Or lack thereof.

They have: 7 posts

Joined: Apr 2002

Yikes, I've been using points. This may sound dumb but can someone please tell me what the problem is with using point size?
thanks,

Block

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

peh... Wink I just like to explore all the options and come to a mutual conclusion. You can blame my Gemini nature, or just that I kissed the Blarney stone, or that my sister is 10x worse than me and I had to learn to keep up or be run down. ha! Laughing out loud

I would dearly love for things to be unified, but proper HTML/xHTML markup with default fonts means obscenely large headings. I struggle with the balance (trust me, I struggle), to find the point where the client's markup is safe from having to be recreated with each site design, and where the CSS meets the needs of the user. So far, px have been the safest route.

To be honest, I go a bit larger than others in my lowest size, which seems to result in the best feedback. To date, I've never had a "your font is too damn small I can't read it" report from my own sites nor from the sites I work on for clients. Not that it won't happen, it just hasn't happened yet.

I see what you're saying with the forwards compatibility, but really, with the CSS in one place, is it really that different whether you use px or percentages as far as forwards compatibility goes?

Oh, and the scaling issue -- I would (personally) prefer that the sites I work on are reasonable for most people and consistent at the default settings. Which means I leave my personal browsers are default as well as the testing browsers, so I can see what default looks like. So the base across all resolutions and browsers and OS for client sites (not personal or testing sites, no no no, go wild! be free! experiment! long live independent content!) for me should be the same. From there, the user can do as s/he will to it and it's out of my hands, though I do my damnedest to make sure if they scale up the site doesn't fall apart.

Depending on the design (not always under my control), that's not always possible.

I'm looking at the percentages and ems, and I can see how that will require me to code things with a little more forethought. Not a bad thing, that, so I am grateful for this discussion if for no other reason than I can correct sloppy habits that px let me do. Smiling

They have: 48 posts

Joined: May 2002

Hi Suzanne,

I think you're going to outlast me on this - I wouldn't have a chance on Survivor against you Laughing out loud

Quote: Significantly different sizing (to the point of possibly having some text illegible in one browser and still uncomfortably large in another).

True, there is different interpretation of [I forget exactly] "medium", "larger" etc between browsers. But I assume you could adjust both browsers via 'view' to make the default nicely readable? That's what we assume the reader will do.

Quote: Which is the whole point, as far as I'm concerned. % and em are not effective cross-browser without extra futzing and browser detection and whatnot and I don't think that's an economical way to build websites.

I fully agree that messing about is not economical, or forward-compatible or efficient either in many cases. If only there was a "right" way Roll eyes

Quote: All the current browsers allow for text sizing to change on the fly (except IE5.5/PC which, well, nevermind what I think about that). So using px shouldn't be an issue of accessibility anymore.

Good point, but it's sort of a circular one, isn't it? Smiling I mean, if px is moot due to zooming, then using em/% which achieve similar would probably be preferable on flexibility and adaptability grounds.

Quote: Also, in my observation, which is admittedly limited, people don't change their font size, they just don't go to the site. Which means it doesn't matter WHAT units you use, if they are too small, people won't bother. (People being users, not web developers or pro users).

I've wondered about that, haven't been able to find any stats or even guesses about it up to now. I doubt though that a user would persist with a font size which was out of line on site after site. Sooner rather than later, they're going to ask or comment, and learn the adjust trick. Then it's better if your site is designed to fit in with their preference.

I meet plenty sites where the text is smaller than comfortable for me. I'll try to adjust, and if it doesn't happen, then I'll leave the site. Maybe the people you observed had already set a view preference, and couldn't be bothered with sites which didn't respect that choice? Or someone set it for them once "is that your favorite?" and they don't know how to adjust for inflexible sites? Who knows?

Quote: They must accept some responsibility, not just come up to the steps and complain that the steps are too steep when if they looked to the left they would find a ramp

Agreed. But I think we're discussing here cases where the ramp is round the side or back - or in some cases only accessible from the second storey Laugh

There's also a point which I don't think came up so far. Screen resolution significantly affects text size, and can't practically be accounted for in design. I can't use my 21" monitor at its 'natural' 1600x1200 because the text on most sites is just too small, and too many don't allow adjustment.

I've come to a "works for me" conclusion to leave their fate in users' hands. I think that's a more forward-compatible solution as people both upgrade browsers and become more familiar with their browser options.

I understand this will usually not be possible for a pro designer constrained by clients' wishes. I guess if we're all aware of the trade-offs we're making either way, at least we're making reasonable decisions for our situation.

I suppose you can outwit and outplay too? Laughing out loud

Mike

They have: 3 posts

Joined: May 2002

In my experience, using relative units as ems or % is diffenent that using fixed ones. If you treat them as you treat fixed sizes then you are doomed to get dizzy with inheritance problems IMO.

What this means in practice is that to convert a site to using %, I do this: I comment out all the font-size's s, etc. I do a body { font-size: 80%; } (or other number) to set the normal font size for the page, which is usually smaller than the default (the same thing we used to do by adding to everything).

Speaking of em's. There seems to be a unit of the same name, but in CSS: 1em == 100%. An em is defined as the height of the current font, except in font-size, where it is defined as the height of the font's parent.

Thanks for the css-discuss list tip, I've subscribed to it now Smiling.

I will do more tests to justify my opinions. I'll do a oage with just font-size: 80% and see if it looks the same everywhere. First thing this monday Smiling.

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

I am experimenting with using em and % for my personal site, and so far, the results are two-fold -- one, I have a problem with inheritance, which is my own fault. Two, though, I have, with a base font size of 1em and using default for main text, different sizing on the same computer, different browsers. Significantly different sizing (to the point of possibly having some text illegible in one browser and still uncomfortably large in another).

However, it seems to be, at least Mac/PC in IE fine. N6 is ever bigger than IE on the PC with the same settings. Opera is smaller with the same settings. I'd like it to look mostly like it does in Opera, but to get it to look like that in IE and Netscape, it would be illegible in Opera.

Now of course my personal site uses CSS for positioning, so the CSS is entirely blocked for N 4.7 anyway. I'll have to devise a different test to see how N4.7 does.

Which is the whole point, as far as I'm concerned. % and em are not effective cross-browser without extra futzing and browser detection and whatnot and I don't think that's an economical way to build websites.

All the current browsers allow for text sizing to change on the fly (except IE5.5/PC which, well, nevermind what I think about that). So using px shouldn't be an issue of accessibility anymore.

*shouldn't*

Also, in my observation, which is admittedly limited, people don't change their font size, they just don't go to the site. Which means it doesn't matter WHAT units you use, if they are too small, people won't bother. (People being users, not web developers or pro users).

For those who have issues, all the modern browsers allow for user style sheets (I'm talking for people who have significant eye sight issues), and hopefully those people will take advantage of the settings in the browser designed to allow them control over the sites. They must accept some responsibility, not just come up to the steps and complain that the steps are too steep when if they looked to the left they would find a ramp, to make a poor but hopefully illustrative analogy.

For balance on the page, Opera does a nifty zooming feature that zooms the text and the images, because most images are rasterized, not vectorized, and as such, are in pixels. That helps maintain the balance of the page, while still allowing for people to choose a comfortable text size. It's also nifty for zooming in on some details instead of opening a graphics app and doing a screen shot, but that's neither here nor there.

Anyway, on with the debate! Rah! Laughing out loud

They have: 48 posts

Joined: May 2002

Quote: Originally posted by Suzanne
[B]As far as I know, you have to start with a base size to use %, no?

No. You might want to, but if you don't it'll default to the user browser setting.

Quote: em is still a print measure, CSS is for more than just the web.

Sure, but for the web "em" = user browser default size.

Quote: I'd recommend the mailing list http://two.pairlist.net/mailman/listinfo/css-discuss for more of a debate on this.

Smiling Debate is healthy.

Indeed it is Smiling I've been on that list for a while - not that I read it all mind you, that's one busy list Smiling

I guess in general I'm in favor of designing to allow the user to control their own viewing experience. So I'd need a specific reason to choose a fixed px size.

Mike

Mark Hensler's picture

He has: 4,048 posts

Joined: Aug 2000

PX here. Always.

I'm tripple booting with WinXP, Win98SE, and linux.
WinXP is using 1600x1200
Win98SE and linux are using 1024x768 (prevent problems with other monitors at LAN parties, I'm always forgeting to lower the res)

My site is using 13px verdana for body, and 10px verdana for nav. I don't use zoom, and my eyes still work.

Mark Hensler
If there is no answer on Google, then there is no question.

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

http://www.akalg.com/pub/webref/style/fontSize.htm

As far as I know, you have to start with a base size to use %, no?

Anyway, I find the font size chart above a useful tool. em is still a print measure, CSS is for more than just the web.

http://www.sam-i-am.com/testsuite/css/fontsizes.html is another test page.

The mac issue isn't as much of a problem, from what I've experienced (I have a dual OS shop), but perhaps older macs are similar to Linux (which originally reported seeing font sizes in the microns when pts were used).

Also, this from Todd Fahrner is fascinating. I'd recommend the mailing list http://two.pairlist.net/mailman/listinfo/css-discuss for more of a debate on this.

Smiling Debate is healthy.

They have: 48 posts

Joined: May 2002

Doesn't px have a built-in problem because of the Win/Mac 72/96 px/inch issue?

I favor the em/% approach, but I think it depends on the site. If it's a graphical site, then px may be more appropriate for appearance purposes.

However, if it's mainly an informational site, then it's more important to allow the viewer to see it as they wish. Fatigue from reading becomes an important issue.

Mike

They have: 3 posts

Joined: May 2002

Windows and Linux.

small, x-small are unusable. They are always diferent among browsers...

But... the default font in Linux is the same as the one in Windows usually. So 80% of that is similar... And I like to see afterwards how my site adapts to the font-size. Smiling

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

What the heck are you using niqueco? Not a mac, I'd wager, nor linux.

They have: 3 posts

Joined: May 2002

Wow, that site is so wrong! And it looks awfuly here, I can't read it even changing my font-size. Is worrisome that people are spreading those harmful ideas.. Sad

They have: 3 posts

Joined: May 2002

1em = 100%. In CSS em is defined this way.

And using px is almos always wrong. You just have to get used to percentages. put a body { font-size: 80%; } somewhere and only increase or decrease the size when needed.

I do this and the sites look great everywhere, at any screen resolution.

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

I think that percentages are a problem on lots of systems and are not full-proof. em is a print measure.

http://www.alistapart.com/stories/fear4/

More all over the place on the web. It's a large debate. FWIW, 11px is the lowest I'll go for Verdana, I use 14px Georgia for my personal site. Verdana is hideous at default sizes.

Also, IE 6, Netscape 6, Opera all allow text zooming irrespective of the designer's stylesheet, so if you're using a current browser, the point it moot, anyway.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.