1. Technology

Using Points, Pixels, Ems, or Percentages for CSS Fonts

Deciding on Font Sizing in CSS

By

One of the most common ways to use Cascading Style Sheets (CSS) is to modify the font or typography of the page. If you've examined the font-size property, you'll know that there are many different measurements to use when defining the size of the font.

Relative lengths

  • xx-small through xx-large - relative to the default browser font size
  • percentages - relative to the surrounding text
  • em and ex - relative to the parent element
  • pixels - relative to the screen resolution

Absolute lengths

  • points and picas - print units
  • inches, centimeters, and millimeters - length units

Points are for Print

Many Web designers have gotten into the bad habit of using point sizes to define their font sizes on the screen. But points are a print unit of measure, and the Web is usually viewed on the screen. This means that when you specify 14-point type, it might display much larger or smaller than you expect. The most common place this is noticed is between Macintosh and Windows. Macintosh typically displays things almost 25% smaller than the same page on Windows.

Web designers should definitely continue to use points as font-size lengths in their style sheets. But the points should be limited to style sheets for print.

What to Use?


Once you've decided not to use points for your screen style sheets, you need to decide what unit of measure to use. There are two rules of thumb.

Accessibility
If accessibility is your biggest concern, then you should use ems. Ems are sized so that the font size is relative to the parent element. In the case of most Web pages, this is the body element - and so the font is sized relative to the standard size of the browser.

Using ems as your font size measurement ensures that your pages will be accessible to most browsers and platforms. Plus, if your readers choose to change the default font size on the fly, your page will scale to that new size.

The problem with ems is that you lose control over the exact look of your page. Some people may have a much larger or smaller default size than you are used to, and with ems, your fonts will scale relative to that size. This can result in strange font sizes.

Control
If control over the look of your Web page is your biggest concern, then you should use pixels. Pixels are the standard unit of measure for screens and monitors, and fonts will be more precisely the size you want on the screen.

Pixels are the measure of resolution, and the resolution of your customers' monitors can affect the readability of your type. For example, most Windows machines are set at 96 dpi, while most Macintosh machines are set at 72 dpi. So, a font set at 72px will be 1 inch (approximately) tall on a Macintosh and three quarters of an inch tall on a Windows machine. Also, some OS's (most often Linux and Unix) can make fonts extremely jagged and hard to read if they try to scale the font sizes from the pixel sizes embedded on the OS.

Know Your Audience

If you're catering to an older audience, then ems and a larger font size will be more important. If most of your audience browses on a Macintosh and you're designing on Windows, then beware of really small fonts. Decide which is more important, control or accessibility, and use the measure that's right for you.

©2014 About.com. All rights reserved.