Relative font sizes?

i just use YUI css

saves alot of hassle

The method I use is very similar to the YUI font reset except mine validates :slight_smile:

hmm interesting never knew there were css validators

anyways my main reason for YUI :

  • i heavily use their library thruout my sites
  • dont have issues with it in major browsers
  • saves me alot of time
  • and most importantly i can link to their library hosted on their CDN ( all my sites get over million page views a day so this not only cuts my bill but speeds up the loading times for my users )

There is no reason whatsoever to set the base font size as small as 62.5%, since the notion that this will equal 10px is utterly false. Ed’s reply above is a prime example of that. He’ll get 12px or 13px, and if you’ve relied on the belief that 1em=10px the layout will fall apart.

Looks pretty good to me - I see no discrepancy between px and ems - do you? I am only talking about applying the ratio of ems to pxs on text - not div sizes or any of that. :slight_smile:

http://www.visibilityinherit.com/projects/fontsize-test.html

Yes (see attached screenshot).

Maybe I’m dense, but I don’t understand why you need to do that. Could you explain?

The usual reason when people set the font size to 62.5% is that they believe it’s the same as 10px and use it to compute container dimensions in pixels. That may work for a lot of visitors, but not all of them.

Hi Tommy, :slight_smile:

That screen shot is a little misleading don’t you think? I assume that’s a screen shot taken from an IE browser? Well yes of course - IE does not change pixel size. Maybe I’m dense, but therefore we are talking about the relationship between px and ems in other browsers that do increase px size on fonts. :slight_smile:

Oh I don’t know… it just always seemed a little easier for me to throw numbers together with out having to first go and check the yahoo font-size chart. Bottom line - as long as I’m then increasing the size back up p{font-size:1.3em} then when it’s all said and done we are all sitting at the same size right? So as far as I see it, and like I said a little earlier, all the methods are sound, so I would suggest to others to just use which ever one you can wrap your brain around easier. :slight_smile:

I’ve already controlled it, before I visited your site. You over-ride my choice and make me do something more, something extra, to enlarge the fonts. Why should I have to do extra work to override your ideas about what is “good”. Why shouldn’t I just go somewhere where they treat me better?

With all of the methods described above it is just an effort to create a layout that will hold together and look decent through various font size changes on the users end.

So this is about your convenience, you the designer? Your visitor’s convenience doesn’t matter to you?

I guarantee you it takes a lot more time and trouble to develop a website that is accessible to all people and there have already been two examples posted so far.

I’ve never had much of a problem with it from the designer’s standpoint, but as a developer and pro’s, aren’t we supposed to do that work? Why make it the visitor’s problem?

With most modern browsers supporting zoom features now there is no one with eyesight that has been left out. Those using FireFox can just press the Ctrl key and scroll the mouse to increase font size.

I’ve already made that choice and communicated to my browser the font sizes I want. Now you choose to override my choice and make me do extra work to read your site. Why should I do that? Why wouldn’t I just go to another site that honors my preference without making me do extra work?

What statistics do you have about how many people even know about ctrl-+?

In my opinion Elastic layouts are the most user friendly as the whole site scales with font changes.
Why should I hang around long enough to bother changing your fonts when you’ve already overriden the choice I made in the first place?

Do you design your site to work for you and save you design time, rather than to work for the visitor and give him a good experience? I so then I question your attitude toward design.

In my opininon it’s irrational go to all the work of designing a scaleable site and then undo all that good work by overriding the preferred font size of the visitor. Design your site so it works for all your visitors. It is perfectly possible and really not all that hard to do. If you depend on a web page for income, to do otherwise is to throw money away.

Then go already - jesus! I know I won’t miss you!

So you would willingly alienate and drive away a significant and growing percentage of your visitors? That’s a strange business model if you plan to make money off your web page, don’t you think?

Or don’t you want money from people with less than perfect eyesite?

Why is it misleading? It clearly proves that 1em≠10px @ 62.5% except in one special case: when the browser default size is set to 16px and the user hasn’t changed the text size from the default setting.

Yes, it’s taken from IE, because my main browser is Opera which will zoom the page, rather than change the text size.

What I’m trying to get across is that there is no relationship between px and ems! (Sorry about shouting!) You’re claiming that a metre is equivalent to a kilogram because you happen to have a metal rod that is 1m long and weighs 1kg. It’s a coincidence, not a relationship.

If you set the font size to 62.5% and rely on that being equal to 10px, then set the container width to 250px to fit in 25 characters, your layout will fall apart once a user starts increasing the font size (in browsers that do that, rather than zoom the page). Perhaps you don’t, but lots of designers do.

Right. Except you have to do it for all block-level elements. And then you end up having a paragraph in a list element and all of a sudden your font size is 17px instead of 13px. So you have to add yet more CSS rules to cover the nesting problem.

Again: why is that better than setting the desired normal font size as the base size to begin with?

That does indeed seem to be the case for many designers, unfortunately.

Will you miss a few thousand other potential customers who do the same thing? Or the tens of thousands of friends of Ed’s and those others who won’t even go to your site because they’ve heard that it’s badly designed?

The old saying about being penny-wise and pound-foolish is still relevant. :slight_smile:

Hi,

I’m not arguing with you - you guys will always be much smarter than I in the field of web design - I’m just giving another opinion. Web Design is not my one and only - I rely on other things for my income, pride, productivity, etc. Well, to a certain degree at least. :slight_smile:

Why is it misleading? It clearly proves that 1em≠10px @ 62.5% except in one special case: when the browser default size is set to 16px and the user hasn’t changed the text size from the default setting.

Maybe I’m missing something here - or one of us is? Because all my link is showing is that 1em does equal 10px. It obviously does not reflect that however if your using IE because it does not resize pixels. But if viewed in firefox and safari you will see that they do indeed correspond with one another. And again - I am only talking about with font-sizes - not divs sized in ems. I know that divs sized in ems do not match up with pxs. http://www.visibilityinherit.com/projects/fontsize-test.html

Will you miss a few thousand other potential customers who do the same thing? Or the tens of thousands of friends of Ed’s and those others who won’t even go to your site because they’ve heard that it’s badly designed? The old saying about being penny-wise and pound-foolish is still relevant.

Don’t kid yourself or chastise me - we are all doing the same thing. My method just decreases the base size a little bit more than your guys. But you are still decreasing it as well ya know?

Right. Except you have to do it for all block-level elements. And then you end up having a paragraph in a list element and all of a sudden your font size is 17px instead of 13px. So you have to add yet more CSS rules to cover the nesting problem. Again: why is that better than setting the desired normal font size as the base size to begin with?

That’s true Tommy! and I’m not saying it’s better, just a different way of doing things. The way I do it is easier to wrap my brain around, but as you’ve stated, I may have to then add a few more rules. So that is a negative to mine - your right! Paul’s method is good to - but then you have to use conditional comments. There is absolutely nothing wrong with them - It’s just me, I try to avoid those, it’s a personal preference. 75% or 81.25%, or whatever method is good but then not quite as easy to size up all the values (not as intuitive at least). So, as far as I see it, they each have their pluses and negatives. To each their own! Maybe someday I’ll try the 75%, 81.25%, 85% methods. They each seem good. Mine is just a different method - the one that happens to work for me for time being. :slight_smile:

No, it doesn’t. It shows that under certain circumstances they happen to result in the same size, by coincidence. There’s no equality involved.

Have a look at the attached screenshot from Firefox 2. :wink:

Nothing sized in ems is ever guaranteed to match up with something sized in pixels. Not text sizes, not div sizes, nothing.

That’s not what my comment was about. It was about the attitude you show towards Ed and the large group of people who, like him, need to adjust their settings. Chances are you will too, sooner or later, since most of us do get poorer eyesight when we reach middle age.

Oh, good! Then we agree. Your method is a different way of doing the same thing I do, which is different from Paul’s method. “Best” is subjective, anyway. I thought you were arguing that your method was somehow objectively superior to the other alternatives shown here. :slight_smile:

Oh no no no - I wouldn’t dare argue with you guys. I’m still a couple years away from being able to confidently do that. Plus I need your guys help to much still. I couldn’t risk burning any bridges.

I have FX3 but I highly doubt that matters. How are you getting that screen shot to look like that??? Are you changing something else on my test page? When I increase the font size (well actually it’s called zoom-in now) they each stay exactly the same regardless of how many times you increase it.

And here might be where the problems are coming from - text resizing and zooming are completely different kettles of fish. Firefox 3 is capable of doing both.

I didn’t touch your page. That would be cheating! :smiley:

I just went to the Preferences dialog box and set the preferred font size to 24px, like thousands of middle-age users with high-resolution monitors might do. I could do the same in Opera or FF3.

The point is that you cannot rely on 62.5% text being 10px. That only happens in one special circumstance, and although that circumstance may be very common it’s still a special circumstance.

I have to say that there’s a lot of rubbish being posted in this thread. (Some good stuff as well, but a lot of rubbish!)

FACT - you can’t control the size of text on your readers’ screens.

FACT - you shouldn’t try to control the size of text on your readers’ screens.

People with different setups and different systems will find that text renders at different sizes, and there’s nothing you can do about that, short of saving the whole page as an imagemapped GIF. It’s simply not possible.

And more to the point, a lot of people have changed the settings on their computer to suit their own preferences, so that text will render larger or smaller than its default setting. If you mess around with the size of text too much, it messes up their browsing experience.

I have very good eyesight, and I browse with a smaller-than-default text size. But every now and then (depressingly frequently) I come across a site that has reduced the text so much that I struggle to read it. And I don’t have it showing at the smallest size I can comfortably read - I can cope with a reduction to about 80% OK, but some designers think they know best and take it way smaller than that.

NO! I have set my font size at the size I want to read text. Nudge it up or down a little way if you want to, but don’t change it any more than that. Body text on a website should always be between 90% and 110% of the browser default.

The best way to do this, as other people have said, is, eg
body {font-size: 95%;}
This means that all text is reduced to 95% of its default size, so you don’t need to worry about setting it on individual elements. Headings will still be larger than body text in the same ratio that they normally are - you can then adjust these individually as needed. Don’t nest font sizes if you can avoid it, because it gives more opportunities for different browsers to interpret it differently!

That’s all you need to do. Don’t worry about whether that translates as 10px or 11px on your screen at your settings, because it won’t be the same on other people’s. (“This page best viewed using my computer”)

Well no, that isn’t a fact, it’s an opinion. An opinion I strongly agree with, and wish devoutly everyone would follow without exception, but an opinion nevertheless.

The best way to do this, as other people have said, is, eg
body {font-size: 95%;}

After much good sense you say this, which seems to me to contradict all that good sense. Why 95% for heven’t sake?

Control on the web is an illusion. All we can do is provide hints about how we’d like things to look.

I agree with Stevie and Ed that the ideal way, from an accessibility point of view, would be to always specify the base font size as 100%. It should be up to the user to change the browser setting if he or she desires smaller or larger text. That’s the theory, but things are different in real life. Joe and Jane Average don’t want to have to fiddle with browser settings; things should ‘just work’.

The combination of the most common browser default size (16px) and the most commonly used font face (Verdana) is not aesthetically pleasing. However much we may wish it to be otherwise, this is a major concern for most sites – not only commercial ones.

Right now I think an acceptable compromise is to use CSS that gives a decently aesthetic yet legible size for the common case (16px browser default). Users like Ed, who require larger text, can change their browser defaults. They may not be able to set it to exactly what they need, since most sites use <100%, but they can compensate by setting a 20-25% larger size than what they require.

Yes, it’s an extra inconvenience for this group of users. But the alternative – always using 100% for all sites – would require an even larger group of users to change their settings.

Control on the web is an illusion. All we can do is provide hints about how we’d like things to look.

Well said Tommy :slight_smile:

I find myself agreeing and disagreeing at the same time with many parts of this discussion.

For accessibility the best option is to do nothing of course and let the browser display the text at whatever size is set. I agree with that in principle but in many cases (especially working commercially) it’s not always that easy.

Leaving the text size alone may be good for accessibility but very often it’s not aesthetically pleasing and may indeed hinder readability in some cases if text was all the same size everywhere.

Typography and readability go hand in hand and isn’t a simple matter of leaving the text alone. If we want to highlight certain blocks of text or lines of text then adjusting the size is one way of doing this. Whatever we do will possibly upset someone so we must make a choice and do the best we can to please as many people as possible.

As long as we don’t make the size too small or too big so that browsers adjustments become impossible then I think that’s its fine to tweak it up and down a bit so that the design is more aesthetically pleasing.

Of course pixels should be avoided because of the IE6/7 resizing issues but as said above many times that ultimately we have no control. Even in IE6 with the font size set in pixels I can click one check box and have all font sizes specified in all web pages ignored. That’s with just one click. Or I can use my own stylesheet.

The compromise is making a site that is accessible to as many people as possible while still be allowed some design flexibility.

There is no definitive answer to this question (which is why it always creates debate (as with many web design issues)) it’s something you have to consider, look at both sides of the argument and then make a choice you can live with taking all into account.

Threfore I agree with nearly all that’s been said but… :slight_smile: