Note: The files "fonts.css" and "fonts-context.css" are deprecated, use "cssfonts.css" and "cssfonts-context.css" instead.
The foundational CSS Fonts provides cross-browser typographical normalization and control while still allowing users to choose and adjust their font size. Both Standards and Quirks modes are supported in A-grade browsers.
Note: CSS Base can complement CSS Reset by applying a style foundation for common HTML elements that is consistent for A-grade browsers.
To use CSS Fonts, include the following source file in your web page with the link element:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssfonts/cssfonts-min.css">
YUI's CSS resources apply rules to HTML elements directly (using type selectors). An alternate version of the resource is available that target elements by context only. This contextual -context.css version selects HTML elements only when they descend from the .yui3-cssfonts classname.
Here is how to include the contextual version of CSS Fonts:
<!-- Source File --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssfonts/cssfonts-context-min.css">
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.
To change the size of a font, 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 */
| For pixels (px) | Declare this percent (%) |
|---|---|
| 10 | 77 |
| 11 | 85 |
| 12 | 93 |
| 13 | 100 |
| 14 | 108 |
| 15 | 116 |
| 16 | 123.1 |
| 17 | 131 |
| 18 | 138.5 |
| 19 | 146.5 |
| 20 | 153.9 |
| 21 | 161.6 |
| 22 | 167 |
| 23 | 174 |
| 24 | 182 |
| 25 | 189 |
| 26 | 197 |
Arial is the default font-family for all text (except pre and code) when you use Fonts CSS. Specify a new font-family when you want something other than Arial.
#demo1 {}
#demo2 {font-family:monospace;}
#demo3 {font-family:georgia;}
#demo4 {font-family:verdana;}
#demo5 {font-family:times;}
If you're using the contextual version, CSS Fonts's rules are only applied to elements that descend from a node with a class value of .yui3-cssfonts. The classname can go as high in the DOM tree as desired, including on the <html> element directly.
The following code snippet show how you might apply CSS Fonts to one of two columns:
<div> <div class="yui3-cssfonts"><h1>Lorem Ipsum</h1></div> <div><h1>Lorem Ipsum</h1></div> </div>
Here is an example showing how to apply CSS Fonts to a subset of a page.