Relative Font Sizing

Which to use?

[pageoneresults]

With all the recent discussion about font sizing and using px vs. pt, using em's vs. %'s, etc., I'd like to hear more from those who use relative sizing.

I've done some initial testing using em's and %'s and have found the em's to be a little more consistent across browsers. My question to those who utilize relative sizing is; What sizes are you using? For example, for main body text if you are using em's, what size? Do you mix em's and %'s? Which unit of measure gives the best consistency across all browsers?

I think most of us already know that px is the preferred choice amongst most designers. I've recently built three new sites that all use CSS and I've chosen the px route for now. I want to give font control back to the IE users and NN4 users. Opera and NN6+ users have the ability to increase or decrease font size, style sheets are overridden.

If I am currently using 14px verdana for main content, what would that equate to in em's? How about %'s? Other units of measure?

[rjohara]

As a rule of thumb, em's should be used for font sizes and vertical spacing, and % should be used for horizontal margins. One em is whatever the user selects - you then define other elements with respect to that choice: h1 { font-size: 2em; } for example.

One of the worst broken features of NS4 is unfortunately the margin properties, especially top and bottom margins (they don't collapse as they should). There *is* a very elegant way to work around this, however, and use one style sheet to deliver ordinary spacing to NS4 and elegant spacing to newer models....

[pageoneresults]

One em is whatever the user selects.

Should we assume that 1em is the default size for most browsers? I mean, if I'm using IE and the default text size is medium, is 1em = to let's say 15px verdana?

[T Suresh Babu]

em is the best relative unit.

The implementation of em for IE and NS are different. So the size varies in NS4x.
Inorder to have a exact look and feel in both IE and NS4x we can follow separate CSS.

One css for IE, OPera, NS6x (Win/Mac)
One css for NS4x(Win)
One css for NS4x(Mac)

[pageoneresults]

em is the best relative unit.

This seems to be the general overall consensus. Okay, if that is the case and I am designing for IE users, this is just an example, what would these equate to in em's? This is assuming the default browser font size of medium.

13px Verdana =
14px Verdana =
15px Verdana =

14px Arial =
15px Arial =
16px Arial =

[SmallTime]

Pageonresults, the em is relative. If you don't set a base font and size (which would fix the font size) it uses the default or user preferred font size as the basis for other font sizes ie p = 1em, h4 = 1.2em h2 = 1.6 em, etc. I just did some testing, and 1 em can be very different between netscape and IE, and browser detection and separate stylesheets is common when using. Also check older browser support.

[pageoneresults]

I just did some testing, and 1 em can be very different between netscape and IE, and browser detection and separate stylesheets is common when using.

So, if using relative font sizing, the only correct way to maintain some level of consistency is to utilize browser detection and multiple style sheets? Hmmm, that sounds like a task.

[SmallTime]

That is what I decided, so bumped font size up a px, and added a little line height, will have to do for now.

[Eric_Jarvis]

two points

firstly...nobody actually needs consistency across browsers...what you need is the site to look good in all circumstances...not necessarily consistent...most people don't go look at a site and then try again in a different browser...and they certainly aren't going to leave the site simply because it looks different if the use Konqueror

second point...you don't have to cramp things to a specific size to make them behave predictably...all web designers should read up on the basic mechanics idea of degrees of freedom...if you build the page so that it has space to expand when resolution, font size, window size etc change, then you don't have any problem using either % or em

[Mark_A]

Help folks please :-)
PC vs Mac and relative fonts using CSS..

Question 1.
-------------
I have been generally using relative font sizes for PC users. Now have a site where my client views pages in a Mac and a small % of site visitors also.

Original small text in detail tables was formatted Text Size="-3"

I want to replicate this in css.. allowing resizing and am having problems. pages must be acceptable on the Mac and PC in Netscape and IE at least and allow easy user resizing.

I have tried to simulate using

10px with 12px line height will NOT resize so no

text sized at xx-small will resize, On a PC using MSIE 5.5 is the same at normal settings as original, but on PC in Netscape 4.7 is much smaller and illegibe at my default.

text sized at x-small will resize, On PC and MSIE 5 looks larger than 10px and -3, on PC in Netscape 4.7 looks the same as 10px or -3. so more cross compatible than the above but big in MSIE5 which is the lions share of visitors and does not allow 800x600 fit on many pages - can live with that.

text sized at 0.8em will resize, On PC looks smaller in MSIE 5.5 than in Netscape 4.7. reduces in size sharply & too small in MSIE, too big in Netscape.

Note also played with % to no greater success.
Do not want to browser sniff as would have also to machine sniff etc and adds far too much complexity.

Any suggestions to the above..

Question 2
---------------
If I can resize all the text on a test page in a PC in MSIE5.5 "view" "text size" "larger" etc
in NN4.7 "view" "increase font"

Yet my client looking in NN4.7 on a Mac cannot.

Does it proove they have overridden web site font formatting so are not seeing what I am hoping they will see?

help on either Q1 or 2 appreciated :-)

[Mark_A]

One other issue bugging me about this is that we seem not to see screen dumps the same. I believe Mac and PC have different screen res per inch one at 96 and the other 72 dpi or ppi does this mean that a gif of what I see in my PC screen will not look the same to someone on a Mac?

If so does this apply to other images?

[toadhall]

I've been wrestling with this lately too and have decided (for now) to set the body font-size at 100% and leave the rest to the users' browser default. It seems the best thing for overall, consistent usability is a hands off approach; let the users sort it out.

The css specs say: "It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 90dpi" The Mac OS specifies 72 ppi, so that's a 20 percent difference for css px font-size. An image would be affected likewise given its fixed ppi and the two different screen resolutions. I think. :(

Got the above quote from this article [macedition.com].

[pageoneresults]

Since I first posted this back in March there have been many discussions on this topic and other related issues.

I decided to use a fixed size font as I was able to guarantee consistency across a variety of browsers on the PC and IE on the Mac. In fact, the site looks identical in IE on the Mac. Same goes for NN4.x using the @import command.

I'm comfortable with the fixed size font for now. I won't go below 12px!

P.S. Eric_Jarvas said...

> firstly... nobody actually needs consistency across browsers.

I do! ;)

[Mark_A]

Interesting article toadhall.. thing the ideals of the article are reltively easy for a new site, it is when we deal with clients with existing sites who are perhaps used to relatvely fixed designs or perhaps graphics people within client companies who are used to working on print work etc etc ...

In the case of the site I mentioned I am trying to agree a simple specification for each type of page to be acceptable on as broad a range of machines / browsers as possible so that I can build that into a css for all new pages.

First different individuals at the client thought different things and now even the pages they had for the last 5 years are not right !! I don't mind since they just agreed to pay me by the time on "maintenance work" but its a little frustrating for there not to be an answer.

[Mark_A]

P.S. Eric_Jarvas said...
> firstly... nobody actually needs consistency across browsers.

Well pageoneresults I agree with Eric in one aspect, I dont need want or expect exact consistency across browsers or platforms.
What i do want is:

1. consistency across a site in any browser platform combination.

2. Acceptable display of contents for client and user across see above.

Both these issues require quite a bit of client communication / education especially as I find few clients where the key influencers have the same spec / setup machines.

I just finished a site where one of the guys there with "the newest PC" had his screen res at 640 (it could go to 1600 !)

It came out when he was reviewing the demo site and describing what he saw... it did not scroll in 640 but was not intended to look as elegant and balanced as in 800x600 or larger :-)

[pageoneresults]

The answer is for IE to allow font sizing as most other browsers do. Its not as graceful as using relative sizing but, it allows the user to adjust to their liking. And that all depends on whether or not they know how to adjust. I've walked many clients through the process of adding the font size button to their IE toolbars. Not many know of the feature.

With these April 2002 stats from the W3Schools, The 640 era may be history. I know, I know, there are smaller resolutions than the 640; 544x372 and 585x386. But, they represent less than 2% overall and its that designing for the masses mentality that I just can't shake! ;)

1024x768 or more 41%
800x600 51%
640x480 3%
Other or Unknown 5%

[Mark_A]

>The answer is for IE to allow font sizing as most other browsers do. <

Do you mean in lots of small incremental steps rather than the small ones they have now, or do you mean for any font size formatting type?

It is amusing to me that css now allows so many variants to set font size that we really have more problems than before and there is more variety to meet the user not more consistency.

Of course if we could set image size and text size relative to window size we would ........ almost have pdf in html :-) almost ..

[pageoneresults]

> Do you mean in lots of small incremental steps rather than the small ones they have now, or do you mean for any font size formatting type?

IE does not allow you to resize text on web pages that utilize fixed font sizes. Netscape, Opera, Mozilla, and other browsers do. The five settings that IE has now are just fine with me. If only people knew they were there. ;)

I'm kind of keen on the Opera Zoom Feature, although those nice clean fixed layouts can become a mess if you zoom too much, as will any web page.

[Eric_Jarvis]

pageoneresults: "P.S. Eric_Jarvas said...

> firstly... nobody actually needs consistency across browsers.

I do!"

care to explain why?...is it a specific situation that requires it?

[toadhall]

pageoneresults,
> If only people knew they were there.

Why? Fonts set by px will not scale in IE's View>Text Size> feature, so they have no control anyway.

Fonts set in em are scalable, even in IE. 1 em = 100% browser default font size.

But perhaps I misread you.