Developer Network Home - Help

YUI 2: Fonts CSS

YUI 2: Fonts CSS

The foundational YUI Fonts CSS file offers cross-browser typographical normalization and control. Fonts CSS:

  • Offers full A-grade browser support.
  • Provides consistent font sizing and line-height.
  • Provides appropriate cross-OS font-family degradation paths.
  • Supports user-driven font-size adjustment in the browser, including cross-browser consistency for adjusted sizes.
  • Works in both "Quirks Mode" and "Standards Mode."

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:

  1. <!-- Source file -->
  2. <link rel="stylesheet" type="text/css" href="https://yui-s.yahooapis.com/2.9.0/build/fonts/fonts-min.css">
  3.  
<!-- Source file -->
<link rel="stylesheet" type="text/css" href="https://yui-s.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.

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

YUI dependency configurator.

YUI Dependency Configurator:

Instead of copying and pasting the filepaths above, try letting the YUI dependency Configurator determine the optimal file list for your desired components; the Configurator uses YUI Loader to write out the full HTML for including the precise files you need for your implementation.

Note: If you wish to include this component via the YUI Loader, its module name is fonts. (Click here for the full list of module names for YUI Loader.)

Where these files come from: The files included using the text above will be served from Yahoo! servers; see "Serving YUI Files from Yahoo!" for important information about this service. JavaScript files are minified, meaning that comments and white space have been removed to make them more efficient to download. To use the full, commented versions or the -debug versions of YUI JavaScript files, please download the library distribution and host the files on your own server.

Order matters: As is the case generally with JavaScript and CSS, order matters; these files should be included in the order specified above. If you include files in the wrong order, errors may result.

Using Fonts CSS

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

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.

  1. #demo1 {font-size:85%;} /*renders 11px */
  2. #demo2 {font-size:100%;} /*renders 13px */
  3. #demo3 {font-size:108%;} /*renders 14px */
  4. #demo4 {font-size:123.1%;} /*renders 16px */
  5. #demo5 {font-size:138.5%;} /*renders 18px */
  6.  
#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 */
 
If you want this size in pixels (px) Declare this percent (%)
10 77
11 85
12 93 (was 93)
13 100
14 108 (was 107)
15 116 (was 114)
16 123.1 (was 122)
17 131 (was 129)
18 138.5 (was 136)
19 146.5 (was 144)
20 153.9 (was 152)
21 161.6 (was 159)
22 167
23 174
24 182
25 189
26 197

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.

  1. #demo1 {}
  2. #demo2 {font-family:monospace;}
  3. #demo3 {font-family:georgia;}
  4. #demo4 {font-family:verdana;}
  5. #demo5 {font-family:times;}
  6.  
#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.

CSS Reset/Base/Fonts/Grids Cheat Sheet:

Cheat Sheet for CSS Reset, Fonts and Grids.

Download full set of cheat sheets.

YUI Fonts on del.icio.us:

bookmark on del.icio.us

be the first to bookmark this page!

Copyright © 2017 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings