| SitePoint Sponsor |
Hi Tommy,
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.
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.Originally Posted by AutisticCuckoo
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?
So this is about your convenience, you the designer? Your visitor's convenience doesn't matter to you?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.
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?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 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?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.
What statistics do you have about how many people even know about ctrl-+?
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?In my opinion Elastic layouts are the most user friendly as the whole site scales with font changes.
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.
Ed Seedhouse
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?
Ed Seedhouse
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.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.
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.
Birnam wood is come to Dunsinane
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.
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/pro...size-test.htmlWhy 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.
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?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.
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.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?
Last edited by PicnicTutorials; Aug 14, 2008 at 12:15.
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.
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.
Birnam wood is come to Dunsinane
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!
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.
Birnam wood is come to Dunsinane
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.
After much good sense you say this, which seems to me to contradict all that good sense. Why 95% for heven't sake?The best way to do this, as other people have said, is, eg
body {font-size: 95%;}
Ed Seedhouse
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.
Birnam wood is come to Dunsinane
Well said TommyControl on the web is an illusion. All we can do is provide hints about how we'd like things to look.
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...
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
That's pretty much a fact. It is an observable.
That setting the default text size to 100% is the best response is not a fact, it is an opinion, one that I strongly agree with and will argue vigerously for, but nevertheless still an opinion.
Given the recent success of the Mac and the growing use of Linux there is a strong minority to whom this does not apply, and surely we want to cater for them as well.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.
Which we can do by using a default font size of 100% or 1em.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).
Explain why this would be so, if you don't mind. I don't think it would be so, I think the opposite, but I am prepared to have my mind changed by reasons.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.
I imagine we both share the desire for the dissapearance of Verdana, though...
Ed Seedhouse
All right, let me rephrase that. Setting the base font size to 100% is – theoretically – the most user-friendly way, since it gives the user full and exact control over the font size. It respects his or her settings, rather than deliberately making the text a certain percentage smaller.
I run GNU/Linux (Fedora 8), and both Opera 9.51 and Firefox 2.0 use 16px as the default size on my system. I think Safari/Mac uses 14px, though. That's another reason why the 62.5% method is a fallacy.
Only if you accept 16px Verdana for a huge majority of the surfing population.
Because I believe that most users think that 16px Verdana is way too big and ugly. I can't prove it, but I'm fairly sure that there are a lot more users who haven't changed their browser default settings for font size than there are those who have. Thus there'd be more people who'd have to reduce their base font size settings, provided I'm right about people disliking 16px Verdana.
Verdana may not be pretty, but it's legible even at fairly small sizes (depending on one's eye-sight, of course). I think it's a good choice for sites that don't want to be too different. But it needs to be a bit smaller than 16px, or it will look grotesque.
Birnam wood is come to Dunsinane
If they think that then let them change their default font face as browsers allow. Web sites shouldn''t specify verdana in their font families anyway.
On the other hand if they don't change it presumably it is acceptable to them, and who are we to argue with their choice?
I don't believe any browser but IE actually defaults on install to Verdana, and if so there's a good big group who will see the text as too small with your method. I think it's fairly obvious that too big and a bit ugly as a result is better than too small and unreadable as a result.
So you will make anyone who doesn't use Verdana, a good large segment, fit your procustean bed? Why not just over-ride their font-face to, say, arial? That will have much the same effect, but only for the Verdana defaulters.Verdana may not be pretty, but it's legible even at fairly small sizes (depending on one's eye-sight, of course). I think it's a good choice for sites that don't want to be too different. But it needs to be a bit smaller than 16px, or it will look grotesque.
Ed Seedhouse
that's pretty much my strategy, too, except i don't bother setting the font size equal to 100% of anything -- i don't set the font size at all!!!
that's the same thing, right? so i'm using the most user-friendly way, since it gives the user full and exact control over the font size
Wait, what's wrong with Verdana? I think it's a great font and it gets used on a lot of the sites I code...
62.5%. If it's good enough for a CSS rockstar like Dan Cederholm, then it's good enough for me.
It provides a base font size of 10px which is really easy to work with. Gee, I'm currently at 1em (10px), how do I give this h2 a 28px font-size? 2.8em. done. easy.
I don't see any difference in starting at 75% or 62.5% except for the fact that working with a base of 10 is easier than working with a base of any other number. And if the user changes the font size, then everything scales proportionately regardless of using 62.5% 75% or any other %.
Yes, inheritance can play tricks on you. If you set the LI and P elements both to 1.4em (14px) and then nest a P element in an LI element, then you get a P element at a font size of 1.96em (19.6px). That's definitely not desirable. That's why you have an extra rule in your css. Something like "li * { font-size: 1em; }" or "li p { font-size: 1em; }"
With a little extra planning, these kinds of inheritance gotchas are easily avoided. The time you save not looking at the Yahoo font chart can go toward solving the occasional inheritance puzzle.
Like I said, that's all well and fine in theory. But how many non-techie users even know that you can change that setting, let alone how? And in real life it wouldn't work, because most sites set a smaller-than-default size. It's a Catch-22.
I don't think any browser uses Verdana as the default font. Windows browsers tend to default to Times New Roman, but they use Verdana as the default sanserif. Most websites prefer a sanserif for body copy, and Verdana is the popular choice.
Agreed, but 13px will suffice for most people, while also being more aesthetically pleasing.
We're already overriding their font-face choice by specifying Verdana. If we were to leave the font setting alone completely we'd end up with 16px Times New Roman for most users, just like the good old '90s.
It's gives the same size, but there's an important difference: specifying a percentage (any percentage) as the base size circumvents a bad font-sizing bug in IE.
I recommend that you read all the posts in this thread. Jumping in and posting without reading what others have said is rather rude, don't you think? The myth that 62.5% makes 1em equal 10px has been debunked in the preceding posts.
And why do you need to make a second-level heading exactly 28px? Isn't it enough that it's a certain factor larger than the body copy? Besides setting the size to 2.8em does not guarantee that it will be 28px, which you would have known if you had read the thread.
Birnam wood is come to Dunsinane
As Tommy said, the 62.5% = 10px myth was already debunked in this thread... right here in fact: http://www.sitepoint.com/forums/show...81&postcount=2
And Tommy, it is possible that he could be using the H1 (along with an empty SPAN) to serve the logo; even today I see a lot of designers mistakenly doing that. Especially in WordPress Themes.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
Hi,
OK I understand better what you mean now. So I have a question? If this is the case, then wouldn't the same hold true with the yahoo font size chart? Say you set the body to 75%, and then later you say p{font-size:.85em;}, well wouldn't doing what you did to my demo do the same to this example here - throw everything off? So "if" that's the case, and you, meaning "I", realizes that it doesn't always equal 10px, then all 62.5% is is a different way to size things. Right? Or am I totally wrong? Basically, as long as someone let's go of the 10px idea then it's basically the same as the others. You just have to then say p{1.3em} instead of p{.85em} - yes, no, maybe so? Aside from the nesting issues that is. Or does this all not hold true because yahoo uses % sizes and not ems?
Edit - I did use zoom-in (text only) when I zoomed me demo.
Last edited by PicnicTutorials; Aug 16, 2008 at 06:28.
Wrong is wrong no matter who advocates it.
NO IT DOES NOT!!!It provides a base font size of 10px which is really easy to work with.
But even if it did that's too small for me, and a growing group of ageing individuals, to read on the typical monitor. The boomers have accumulated rather a lot of money over their lives, and there are a whole lot of them around, why in heavens would you purposely throw that revenue away?
HTML and CSS give you a way to make your site useable and easy to read for any visitor? Why in heavens name wouldn't you take advantage of that?
The fact is that web pages aren't printed on paper. Any design techniques that assume it is are going to fail.
Ed Seedhouse
Posting Permissions
Bookmarks