71 Furry or Thin (no im not refering to Zeldman)

Fantastic article, but on thing really stuck in my head as I looked thorough the countless screen-shot examples (cant beat pictures), the difference that ClearType makes with browser rendering in comparison to the mac fat’n‘furry soft rendering.
I get that its a personal preference, but wouldn’t it be great if Apple and MS could just agree that fonts should display as they were intended to by their designers.

posted at 04:54 am on January 4, 2008 by Chris McKee

72 Untitled

Hi Richard,

This is a wonderfull experiment and I would like to thank you very much for sharing it with the world. However I have an objection inregards to your conclusion.

First please let me draw your attention to what you have here:

The tests that you have done are based on the following environment:

1-Tests have been done with limited number of browsers as you pointed it out yourself but they are not the majority of the browsers as you mention in your article.
2-Tests have been done in two operating systems.
3-Tests have been done with one font-family.
4-Tests have been done in a two column layout.
5-Tests have been done with XHTML strict doctype and charset=utf-8

So what is the objection?

Even though I look at the conclusion of your article positively (and BTW i have experimented myself in some part of my site) however I believe it only applies to your experiment and cannot be generalized as you have generalized in your article.

Clearly there are other factors which affect the rendering of a web content. The structure of web content and the environment in which the web content is present are the most important part affecting the rendering process.

As you know It is possible for a content to be rendered correctly in one layout / browser/platform however with problems such as overlaps in the same layout but in different browser/platform or in different layout / browser/platform.

So if we use another layout or structure other than two column layout or another font-family, etc. it is possible to see some inconsistencies or it needs to be proved by some more experiments that there are no any inconsistencies.

So basically it is not enough for a text or any element to be a cross browser/platform text / element. It also needs to act properly in relation to it’s neighborhood preventing any layout stability problems when viewing normaly or when resizing the browser’s window or applying zoom etc..

That is why I have defined the layout stability on my site located at cssfreelancer.awardspace.com to address this issue.

As you can see in my site, I have:(I am aware of that 62.5% thingy :), I have experimented the following too)

body { font:96%/1.7 georgia,serif}
Line-height (unitless for body but in ems for the rest of the elements)

Then I have two sections. 1-Navigation elements 2-Rest of the document.

I have set the font-size in ems for Navigation elements and no font-size declaration for the rest of the document. That is set for all browsers.

With the above combination of font-size and line-height, I have experimented my layout using browsercam’s online service with different browsers including IE6,IE7, AOL, Camino, Konqueror, Different versions of (Firefox, Netscape, Opera, Safari,Mozilla, ) on different platforms such as Windows Vista, Windows XP, Windows 2000 Professional, Linux and Macintosh. The screen captures are available at the following
URL:

http://www.browsercam.com/public.aspx?proj_id=389986

My experiment proves that, for my layout and with my test parameters like font-family etc. setting the above mentioned CSS rules turns out to be a consistent cross browser and platform solution.

However I still can not generalize it and I am still debating on it.

Any comments in this regard would be greatly appreciated.

posted at 12:56 am on January 6, 2008 by davoud tohidy

73 Make sure to check your windows font dpi settings!

@Loren

I had the same problem and could not figure out the problem. But since I have a large monitor and bad eyes I changed my dpi to 120. And apparently IE7 takes that into account when displaying fonts. All is good now that I switched my font dpi back to 96.

posted at 10:03 pm on February 7, 2008 by Greg Hostetler

74 repeated enough, people believe anything true

@article base case – "For most people (designers, clients, and their customers) 16px is too large for body text" is a rude and unsupported assertion. While empirically it can be said it is quite evidently true of web designers, the same cannot be said of the other two groups. The "size" of 16px has been creeping down for over a decade as the average PPI has been creeping up. While it may well have been true over a decade ago that most people agreed the defaults were too large, there is no published evidence anywhere I have found to support that assertion against the average current environment. OTOH, there is at least some published support in contradiction http://www.useit.com/alertbox/designmistakes.html and recommending that user default size be respected http://www.w3.org/QA/Tips/font-size to be found on other than my own web site.

Konqueror defaults to a pt size that is less than 16px when the DPI is 96. All IE browsers default to 12pt, not 16px. 16px only appears to be its default as a consequence of the a default M$ system setting of 96 DPI. Use of other than 96 is common on recent and current laptops (which, by the way, have been outselling desktops for several years), which typically have a considerably higher than average PPI and need OEM correction to avoid illegible text on their already small displays. Manufacturers have made 120 DPI a virtual default for laptops. The result is IE and other browsers whose defaults are not set in px give users who have not made further corrections 20px @ 12pt instead of 16.

@article&more; (Richard R, David L, others) – Line-height set other than unitless is a bad habit. That only unitless carries down the cascade as a factor rather than as a previously computed value is a good thing. It means when zoom or minimum font size are employed by the user’s agent to turn your mousetype into otherwise legible text that that text is not constrained to a space into which it cannot fit without overlapping the text above and below it. See http://mrm.no-ip.com/auth/line-height-inherit.html to understand the problem.

@1 (Kari P) – IE em sizing problems are complicated. As answered earlier, setting a % size on body eliminates IE’s basic compounding problem. What hasn’t been mentioned is that the various browsers round differently. That means the starting point can be different right off the bat, but as they cascade and additional sizes are added, the rounding differences also compound. Take a look at http://mrm.no-ip.com/auth/Font/font-rounding.html for more detail via a testcase.

@5+ (James S, more) – No one here yet mentioned a not inconsequential result often encountered on pages using the Clagnut/62.5% method. 62.5% is really convenient only for designers who think they need to size things in relation to this variable and unknown size thing called a px. Invariably these designers prefer text in their work to be a smaller size than average people are comfortable with. For defense against this rude designer behavior, modern user agent makers include functions like text zoom, page zoom, and minimum font size. When text zoom and/or minimum size are applied by user agents based upon the Gecko rendering engine, the ostensibly intended effect is multiplied in a manner similar to IE’s font sizing of ems that aren’t applied against an ancestral % size. The effect is truly overlarge text (based upon the visitor’s preferred size), often producing overlapping and/or hidden (inaccessible content). http://mrm.no-ip.com/SS/Clagnut/eonsSS.html demonstrates the problem with screenshots, but you can easily see for yourself by setting equally default size and minimum size to a size significantly more than 16px and then visiting a 62.5% site, such as clearleft.com.

@26 (Voyou D) – Please stop repeating the mantra. The defaults stopped being "big" years ago. For most web browsers the default size measured in px has not changed for at least 12 years, and probably much longer. Because of the decrease in average PPI over the years, the apparent default size has been decreasing. To the rest of what you wrote, well said.

@32 (Adrian D) – It isn’t a little rude, it’s a lot rude.

@37 (Jason S M) – Not only does changing your browser defaults not not make perfect sense, you’re derelict in your testing thoroughness to not be constantly changing them to emulate the wide range of possible user conditions. There are too many variables in user environments to assume that users have one resembling your own, regardless what the system and browser settings were when you got your own hardware. Assuming any user setting to be wrong and in need of arbitrary adjustment by someone with less than 100% of the situational facts is nothing short of rude.

@39 (Stephen D) – Web browsers are user agents, not web page author agents. Those incapable of accommodating user wishes and needs are broken. It doesn’t matter what your design requires or the CSS specs seem to say. If I can’t read it, it’s worthless.

@48 (Dusan S) – Modern open source operating systems can and do detect display DPI, thus rendering text on screen sized in pt exactly the same size as when printed. The problem is that screen resolution falls short of print resolution, while the average distance between text and user’s eyes is considerably greater for screens compared to books, magazines and newspapers. Text on screen usually needs to be physically bigger than printed text in order to be equally comfortable to read, or even legible. Firefox for Linux and Mac do allow a different assumed DPI, but there is no UI for changing it. Type about:prefs in the urlbar, then dpi in the search box to find the pref.

@55 (Andrej T) – Decimals in font size rules are ignored by IE. 62.5% is treated by it as 62.00%.

62 (Kendall C) - If you're in the design business, you'll probably find yourself back on ALA often. Make yourself a user stylesheet that applies exclusively to it via Gecko's -moz-document facility and you won’t know about its tiny text until it gets a CSS overhaul that breaks your overrides.

@68 (Mason B) – If you’re using a decent modern display better than the median, you have enough PPI that small differences in font sizes should produce no apparent qualitative differences. I don’t ever find smaller than my default fonts easier to read, regardless how many px it took to render them, or how good they "look". Indeed, if you render a font at "font-size: 80%" that was 18px in height, what you actually get is a font 64% in size. CSS "size" is only nominal, not real. Real size is a function of both height and width. A 16px character contains around 128 discrete px, measuring around 8px wide by 16px tall. A character box exactly 80% of 18px high would be 6.4px wide by 12.8px tall, providing about 82 discrete px.

Be part of the solution to the problem rather than part of the problem. Accept that 100% of the default size is best. Personal computers are intended to be personalized. Assuming they have been is the right thing to do, no matter how few have actually had it done. Just because web designers all think browser makers are morons is no justification for assuming smaller is better for anyone other than yourself. If the defaults are too big for you, personalize your own PC, not mine.

posted at 05:18 am on March 7, 2008 by Felix Miata

75 Preach on, Jay

Jay’s comment perfectly sums up my feelings on this whole ridiculous practice.

http://www.alistapart.com/comments/howtosizetextincss?page=7#63

posted at 06:18 pm on March 11, 2008 by Zach Harkey

76 page zoom tool

Where can i get the page zoom tool?

posted at 06:33 pm on March 27, 2008 by Ringo Duemke

77 Pro and cons

I still have doubts regarding the best solution of what type of font to use. Still testing different variations.

Keep up the good work.

posted at 09:15 pm on April 3, 2008 by Adrian Demian

78 Thanks

I´ve got much problems with the text size in Ie and Firefox, too.
But this discussion and it´s including links helps me a lot.
Thanks everybody

posted at 01:09 pm on May 11, 2008 by Michael Ayed

79 Fluid image sizies too

@61 included: “That means that there are some occasions where the pixel size of text is important to the layout – eg, because it has to fit with images that are necessarily sized in pixels.”
However, there is an easy method to size images in ems – see http://www.wats.ca/show.php?contentid=33 for example.

posted at 01:24 pm on May 16, 2008 by Phillip Bicknell

80 Yes, the maths ...

You’re right that keeping track of the math percentages with ems can be tricky. Luckily, with a good handful of browsers for testing, and a logically laid out stylesheet, it gets much easier.

posted at 11:15 am on May 17, 2008 by Diane Vigil