More Multi-million Dollars of Yahoo! Research for Free!

The resources being unleased by Yahoo! this year are quite impressive. I’ve just begun reading and studying their CSS Layout Library. Of interest tonight is the Fonts CSS Library.

Big Money = Big Research

I’ve got to believe with the money that Yahoo! has, it’s wise for any serious web developer to study and learn from their research.

Yahoo! has reached conclusions on font sizing through CSS styling that is right up any devotee of web standards alley.

With the goals of:

• Offering full A-grade browser support.
• Providing consistent font sizing and line-height.
• Providing appropriate cross-OS font-family degradation paths.
• Supporting user-driven font-size adjustments in the browser, including cross-browser consistency for adjusted sizes.
• Working in both “Quirks Mode” and “Standards Mode.”
• Normalizing the dimensions of an “em” unit, facilitating liquid-dimension development.

Yes. This stuff rocks!

I’m Changing

For the past year or so, I usually set my base font size to a percentage of around 67% to 75% on the body tag through my style sheet. And then, use ems for various font sizes and line-height as appropriate.

body {font-size: 67%; // resets font to about 11px}
h1 {font-size: 1.65em; line-height: 2em;}
p {font-size: 1.15em; line-height: 1.75em;}

I’ve used ems because they allow for text-size increase or decrease by visitors through their View > Text Size adjustment on their browser. Clagnut had an excellent article on ems a few years ago.

Yahoo! now offers up their studies and recommendations for using percentages rather than ems. And, it seems to make sense. The selling point for me is the word predictably in this quote from Yahoo! “Always use percentages instead of ems, because percentages respond to user font-size adjustment more predictably.”

They have a table of desired font-sizes and equivilant percentages based off of their default 13px Arial font.

The whole resource center of the Developers Network is awesome. I highly recommend checking it out.

Quick Links:
Yahoo! Developer Network home page
Yahoo! Design Pattern Library
Download the Yahoo UI Library from SourceForge

This entry was posted on Thursday, May 11th, 2006 at 9:40 pm and is filed under Web Development, 30 Days of Web Standards, CSS. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.