I spent some time carousing through various sites and email lists and ended up trying to pull together some of the disparate techniques, arguments, and references about page font sizing into a single document. Because this message grew to an unwieldy size, I've divided it up into 5 sections:
1. Common Body Font Size Settings 2. Best Practices with Respect to Web Standards 3. User CSS Stylesheets 4. Sample Sites 5. Additional References ---------- 1. Common Body Font Size Settings ---------- Christian Montoya wrote: > I hate to make a quick reply to a long post, but not all designers set > body font size to 62.5% when creating websites... Out of curiosity, I did some browsing through the style sheets of some major websites and some other selected sites with an interest in design and standards, and it would appear that Christian is right here. I did not of course think that "all designers set body font size to 62.5%", but I did think that I would find default body font-size settings of 60-75% being quite common, if not the norm. From what I can tell, however, body font-size settings are all over the map. Some of the biggest major sites, like Google, Flickr, YouTube, and Amazon use keywords (usually, font-size: x-small) and then scale up from there. Lots and lots of the other big sites also set the body font-size to a point size (12 and 13 seem to be the most common). Of those that are setting body font-sizes to a percentage value, the numbers range from the 62.5% that Paul mentions right up to 95%, and there does not seem to be any trend towards one number or another. Patrick H. Lauke wrote: > Though I agree with the sentiment, the fact remains that the large > majority of websites out there do size text below 100% (and yes, more > often than not around the 75%ish mark). It appears that Patrick is right here: the number of sites that leave the body font-size element untouched (and so allow the browser defaults to stay at the usual defaults of medium, 16pt, and 100%) is a clear minority. I think that this statistical fact is an important piece of information for designers who are weighing the advantages and disadvantages of leaving the default body font sizes untouched in their stylesheets since it forms the "real world" usage background against which such decisions are made. For reference purposes, in section 4 below, I've provided links to a selection of significant sites that set body font-size to a percentage value. ---------- 2. Best Practices with Respect to Web Standards ---------- Sagnik Dey wrote: > I'm developing a website that have some standards defined. The font > size specified is 9pt. But due to accessibility standards I wanted to > convert that in % or em. Can anybody tell what do i need to use to > view the same size in different browsers? To respond to the original poster's question, I would say that there are at least three general techniques for converting page styles from point-based font sizes to a relative font size system: 1. Use Percentage on body font-size, then apply ems on the rest Owen Briggs The Noodle Incident - Sane CSS Sizes http://www.thenoodleincident.com/tutorials/typography/ 2.. Use Keywords on body font-size element, then apply relative sizing on rest Dive Into Accessibility: 30 days to a more accessible web site Day 26: Using relative font sizes http://diveintoaccessibility.org/day_26_using_relative_font_sizes.html 3. Use some combination of percentage and em sizing on all elements Note that if you avoid changing the default base font-size setting, then this method can be used to create a fully scalable/zoomable design while still addressing the objections of those who believe that the default text font size should be left unchanged. The one clear no-no, is that "absolute" font sizes, like points, should not be used. As the original poster points out, the use of point sizes can cause accessibility issues for some users. For more information about this, see: CSS Techniques for Web Content Accessibility Guidelines 1.0 Units of Measure: http://www.w3.org/TR/WCAG10-CSS-TECHS/#units There has been considerable discussion about the potential use of pixel sizes because pixels can be technically described as a "relative" font size. Unfortunately, Internet Explorer does not treat pixels as such, and using pixel sizes will break the View -> Increase Text Size function on most versions of Internet Explorer, and so pixel sizing is not a viable option at present. The last major position, of course, is the one advocating against any changes to the default base font sizes for the body text. This is the "100% Easy-2-Read Standard" advocated by Felix Miata: http://www.informationarchitects.jp/100e2r?v=4 >From my browsing around, I learned that the debate over this position is a recurring discussion in various communities of coders and designers. I find some of the arguments in favour of Felix's position compelling. For instance, I had not fully examined the potential problems that setting default body font-sizes can cause for users who modify the default font sizes used by their browsers. And I had not realized how some users employ user style sheets for similar effects. However, I am still not convinced that these arguments create a compelling case to put forward this as a clear "best practice" that I should be advocating for all to aim for. I am not sure what the best practices are in this area, but I don't see that web standards, usability, or accessibility issues give a great deal more advantage to one of the three methods I identify. It is clear that conscientious designers should read and consider carefully the arguments put forward by Felix Miata before making their own decisions on this. But as far as font sizes are concerned, it seems to me that the best practice in this area is already covered by the WCAG, which simply asks that font sizes be set using relative units so that users can increase them or zoom the page size without causing the page layout to break. Designers are given a great deal of leeway about how they should then go about achieving this relative font sizing. ---------- 3. User CSS Stylesheets ---------- I don't have much experience using customized user CSS stylesheets, so I would defer to Felix and Christian, who both seem to have done extensive work on them. But after some playing around with them, I still am not quite sure which things cause problems for users and which don't. I am particularly interested in methods of improving the user experience WITHOUT requiring that body font sizes be left at their defaults, since I think that practice will continue for some time. So, for example, I wonder if it would help if the user CSS files attempted to set the default font size in two different ways: body {font-size: 100% !important} html>body {font-size: 16pt !important} On Opera v.9.2 for Windows, this seems to resolve some issues with certain sites where body font-size settings are used. But it seems that the effort to use user CSS to change the font sizes for all sites in all cases must be pretty challenging since sites use too many different methods to set font sizes. The problem with setting body font-size is only one part of the problem. There will be other sites that set p font-sizes based on a div font-size and so a user CSS file will not always work as planned. Christian Montoya wrote: > [...] not all designers set > body font size to 62.5% when creating websites. It's enough to start > at 100% and set nested containers to fractions of that... just do the > math starting off from 16px. I'm trying to understand the problem with font-size: 100% on the body. Am I right that Christian's suggestion of starting at 100% and then setting nested containers with font-sizes applied will only solve the problem for the body element? Those users who reset the body font-size to 100% will then be foiled because the base site font-size is actually being set in a wrapper div instead of the body where some custom stylesheet users will expect to find it. ---------- 4. Sample Sites ---------- Here are a list of some example sites that apply a percentage to their body font-size. These sites were selected because of their popularity, or their interest in web accessibility and CSS design issues. Digg http://www.digg.com/ body {font: 83%/1.4} Wired http://www.wired.com/ body {font-size:62.5%;} Salon http://www.salon.com/ body {font-size: 70%;} Microsoft http://www.microsoft.com/en/us/default.aspx body {font-size: 70%; } BBC http://www.bbc.co.uk/home/d/ body {font-size: 62.5%} Web Standards Project http://www.webstandards.org/ body {font: 72%/160%} Clagnut http://clagnut.com/ body {font-size:81.25%;} html>body {font-size:13px;} Jim Thatcher http://jimthatcher.com/ body {font-size: 86%;} Juicy Studio http://juicystudio.com/ body {font-size: 95%;} The Man in Blue http://themaninblue.com/ body {font-size: 80%;} CSS Beauty http://www.cssbeauty.com/ body {font: 76%} ---------- 5. Additional References: ---------- These are simply significant additional web pages that address the issue of body font size, but which did not find a place in the ramblings above. Richard Rutter Clagnut - Weblog comments: How to size text using ems http://www.clagnut.com/blog/348/ Todd Fahrner A List Apart - CSS Design: Size Matters http://www.alistapart.com/articles/sizematters/ ---------- End of email. Phil. ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *******************************************************************
