Jump to Table of Contents

CSS Fonts

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.

Getting Started

Include Dependencies

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">

Global vs. Contextual

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">

Using CSS Fonts

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, 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

Font-family Adjustment

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;}

Using CSS Fonts In Specific Contexts

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.

Examples