Different ways to work with Web fonts

by Tony Patton | Oct 02, 2006 7:00:00 AM

Tags: Web, Tony Patton, font, CSS2 Specification, Web Development Zone Newsletter

Takeaway: The CSS2 Specification outlines numerous ways to size your fonts in Web applications. In this week's Web Development column, Tony Patton explores font sizing and discusses the best way to manipulate fonts in your application.

When developing a Web application, nothing is more important than presentation. So, it doesn't surprise me to see designers give a great deal of attention to fonts and font sizes.

When you assemble a Web application, you have to decide how to code fonts. There are plenty of options when using CSS, and each developer usually has his or her preference. This week, I concentrate on font sizing and manipulation within Web applications.

Font sizing

The CSS2 Specification defines fonts in terms of lengths, which refer to horizontal and vertical measurements. The length value is numeric and may include an optional leading plus (+) or minus (-) sign character. In addition, the numeric value may be followed by the optional unit identifier.

In addition, the CSS2 Specification defines two unit types: absolute and relative. Absolute values specify the unit, while relative units specify a value relative to another value. The following list outlines the relative unit identifiers:

em: The height of the element's font. It is equal to the computed value of the font-size property of the element on which it is used. The exception is when it occurs in the value of the font-size property itself, in which case it refers to the font size of the parent element.
ex (x-height): The specification describes it as the height of the lowercase letter x.
px (pixels): It is relative to the canvas or screen resolution. The output for pixels varies depending upon the display resolution, which can vary greatly depending upon user preference.

The following absolute unit identifiers are available:

in (inches)
cm (centimeters)
mm (millimeters)
pt (points where 1 pt = 1/72 inch)
pc (picas where 1 pica = 12 pt)

Weekly development tips in your inbox

Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.

Automatically sign up today!

Another approach to absolute sizing is using scaling factors that you can use to scale a value up or down using the following keywords: xx-small, x-small, small, medium, large, x-large, and xx-large. Medium is the base value, with the small going one size down, the large one going one size up, and so forth. The CSS2 Specification defines a scaling factor of 1.2, but it can vary by browser.

Another way to format text is to use percentage values. The format of a percentage value is an optional sign character followed by a number that is followed by a percent sign (%). Percentage values are always relative to another value. In the case of fonts, it is relative to the Web page's base font size.

As you see, there are many ways to accomplish the seemingly simple task of presenting text. The following HTML formats text using different unit identifiers (in paragraph elements). The sizes are equal assuming an environment using 72 dpi for display.

<html><head>

<title>Font Sizing - equal values</title>

</head><body>

<p style="font-size: 36pt;">Point</p>

<p style="font-size: 3pc;">Pica</p>

<p style="font-size: 0.5in;">Inches</p>

<p style="font-size: 1.27cm;">Centimeters</p>

<p style="font-size: 12.7mm;">Millimeters</p>

<p style="font-size: 300%;">Percentage</p>

</body></html>

You could add pixels to this list, but its value will depend upon your environment. For example, my laptop with 1280 X 1024 resolution would turn out text consistent with the previous list using a value of 50px.

You can gain more knowledge of font sizing by perusing the previously referenced CSS2 Specification. Now I'll discuss how to decide which approach to use in your Web applications.

Which way to go

There are many font-related options in CSS, but which one is the best for your Web application? Absolute sizing has plenty of drawbacks, particularly with consistency and flexibility, as well as the accessibility issues. The benefit of relative font sizes over absolute font sizes is users with any type of vision impairment can enlarge the page text to make it easier to read. With that said, developers often use relative sizing.

Let's take a closer look at relative sizing:

The most consistent sizing used is pixels. It is supported by most browsers, but not always correctly; browsers often treat the pixels as screen pixels rather than CSS pixels. A drawback is that pixels ignore or overrule user preferences and cannot be resized in IE.
Many developers prefer points for sizing, but points are more a product of the desktop publishing world, which doesn't easily translate to the Web. When presented, the operating system or browser makes assumptions about the pixels.
The most common approach is to use em or percentage sizing. EMs are resizable in all browsers that support resizing. Ems are also relative to the default size in the user's preferences. IE is unpredictable when using em formatting. The better option for IE is sizing text using percentages.

The following example combines em with percentage values to format text. The base text is set using percentage values, and em is used from that point forward to size accordingly.

<html><head>

<title>Display Test</title>

<style type="text/css">

body {font: Sans Serif, Arial; font-size: 110 %}

</style></head><body>

<p style="font-size: 1.0em;">Basic text.</p>

<p style="font-size: 1.5em;">Larger text.</p>

<p style="font-size: 0.5em;">smaller text.</p>

</body></html>

It's all about presentation

Existing standards provide numerous ways to format and present text in Web applications. Developers can easily break down text into relative and absolute identifiers. The key is to be consistent and thoroughly test the solution.