Video: The YUI CSS Foundation

In this 42-minute tech talk from October 2007, YUI senior engineer and CSS component author Nate Koechley provides a holistic introduction to this and all of the YUI CSS components. [iPod/iPhone compatible download also available.]

Getting Started

To use Fonts, include the following source file in your web page with the link element:

<!-- Source file -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css">
 

<!-- Source file -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css">
 

The YUI CSS Foundation

Note: If you are using the entire YUI CSS foundation, including the Reset, Fonts, and Grids packages, we have provided a concatenated and minified aggregate file for you to use use. Including the "reset-fonts-grids.css" file will give you more efficient pageload performance as compared to including each of the foundation files separately.

<!-- Source File -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset-fonts-grids/reset-fonts-grids.css">
 

<!-- Source File -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset-fonts-grids/reset-fonts-grids.css">
 

Using Fonts CSS

This section describes the features of Fonts CSS and includes these sections:

• Default Text
• Font-Size Adjustment
• Font-Family Adjustment

Default Text

With the CSS linked into the page, all text renders in the Arial font, at 13 pixel size, with 16 pixel line-height. The pre and code elements use the "monospace" font-family. Here's an example of HTML elements after Fonts has been applied.

Font-size Adjustment

To change the size of a font, use a percentage value from the chart below. Always use percentages as the units because they render more consistently than ems, and because they allow user-initiated resizing (unlike pixels). See the example.

#demo1 {font-size:85%;}  /*renders 11px */
#demo2 {font-size:100%;} /*renders 13px */ 
#demo3 {font-size:108%;} /*renders 14px */
#demo4 {font-size:123.1%;} /*renders 16px */
#demo5 {font-size:138.5%;} /*renders 18px */
 

#demo1 {font-size:85%;}  /*renders 11px */
#demo2 {font-size:100%;} /*renders 13px */
#demo3 {font-size:108%;} /*renders 14px */
#demo4 {font-size:123.1%;} /*renders 16px */
#demo5 {font-size:138.5%;} /*renders 18px */
 

Font-family Adjustment

Arial is the default font-family for all text (except pre and code) when you use Fonts CSS. A reasonable font-family degradation path is provided that works well across various OSs. If you specify you own font-family, provide your own degradation path if you need a path other than down to serif or sans-serif. See the example.

#demo1 {}
#demo2 {font-family:monospace;}
#demo3 {font-family:georgia;}
#demo4 {font-family:verdana;}
#demo5 {font-family:times;}
 

#demo1 {}
#demo2 {font-family:monospace;}
#demo3 {font-family:georgia;}
#demo4 {font-family:verdana;}
#demo5 {font-family:times;}
 

Support & Community

The YUI Library and related topics are discussed on the on the YUILibrary.com forums.

Also be sure to check out YUIBlog for updates and articles about the YUI Library written by the library's developers.

Filing Bugs & Feature Requests

The YUI Library's public bug tracking and feature request repositories are located on the YUILibrary.com site. Before filing new feature requests or bug reports, please review our reporting guidelines.