Specifying Size and Position with CSS - dummies

Specifying Size and Position with CSS

By Richard Mansfield

In a CSS style definition (or rule), you can describe positions and sizes in many ways, using may different units of measurement. You can often choose whatever unit you want, although certain specific kinds of measurements work best in certain situations.

For example, many designers working with paper and ink are used to specifying typefaces in points. A point is an absolute length: 1/72 of an inch. Using absolute type size specs for a magazine or book works just fine — after all, the user cannot shrink, stretch, or change the aspect ratio of a page in a book. (Aspect ratio is the ratio between height and width.) Browsers, though, can be resized at will. If you drag one side of a browser, you’re changing it, making it thinner or fatter. In other words, your changing its shape, its aspect ratio, from, say, a square to a rectangle.

For fonts displayed in a browser, a relative unit of measurement is superior to the traditional points. Unlike absolute measurements such as points or inches, a relative unit scales with font sizes. As a result, you get more predictable results in Web pages with relative units of measurements specifying type size. One useful relative unit of measurements for a Web designer is the em. Although the em is useful, in practice, most designers still use points or pixels when specifying type size. Perhaps it’s just force of habit, but in any case the results usually look fine in most browsers.

Measuring length

Here they are in a nutshell . . . all the units that measure length:

  • px (pixels): Pixels are the smallest unit on a display — the dots you can sometimes see if you get close enough to a TV. For example, setting your monitor resolution to 800×600 means that it is 800 pixels wide by 600 pixels high.
    Pixels can be a useful way to specify font size, but the drawback is that if you specify pixels, that overrides the custom font size option in Internet Explorer — so users cannot adjust from “large” to “largest” and so on. However, you should always use px to describe image sizes. Images already measurable in pixels (you can see the measurements by loading the image into any graphics application).
  • pt (points): A point is equal to 1/72 inch. Points (and picas) are classic typeface measurements. Most browsers default to a 12-point serif typeface.
  • pc (picas): One pica equals 12 points.
  • mm (millimeters): A millimeter is .0394 inches, so one inch contains roughly 26 millimeters. One centimeter contains 10 millimeters. Much of the world uses this metric system.
  • cm (centimeters): A centimeter is .3937 inches, so an inch contains roughly 2 1/2 centimeters.
  • in (inches): Inches are a unit in the English or imperial system — used in the United States. England and a few remnants of the colonial period also stayed with the imperial system for a long time, but caved recently. The British government complied in 2000 with European metrication and it is now a criminal offence to sell by the pound anywhere in Her Majesty’s realm. A man in Cornwall, for example, reportedly had to pay court costs after being caught selling mackerel at £1.50 a pound.
    An inch is based on the distance between the first knuckle and the end of a now-forgotten king’s thumb. For 50 years, persistent efforts to educate and legislate away the imperial system in favor of the metric have failed in the U.S..
  • em: Em is a unit of measurement derived from the approximate width of the letter m of a font. This is considered generally the best way to specify font size in CSS, although few designers follow this advice.
  • ex (the x-height): Ex is the x-height, or height of the lowercase letter x, of the font of the current element.) Browsers usually divide em by half to get the ex-height. This unit of measurement isn’t currently as useful as the em because it’s not as predictable an average for all typefaces.
  • % (percent): Percentages are excellent for specifying relative size (it can be relative to an ancestor, the parent, and so on).

Units of measurement are not case-sensitive. You can capitalize them or not, as you wish. Likewise, in IE, you can include a space between the number and its unit, or not: For example, 2 in is equivalent to 2in. Other browsers don’t like the space. For simplicity, using lowercase and avoiding unnecessary spaces is generally a good idea when working with CSS. Just get into the habit of the 2in or 24px format and you’ll be fine, unless the CSS committees decide to reverse themselves in the future.

Understanding little em

Because experts recommend that you use em when designing a Web page that you want to look just so, it’s worth taking a closer look at what this unit actually means. Traditionally, the em was the width of the letter m.

Perhaps you’ve heard the term m-dash or em-dash, which is the dash usually employed in publishing. It’s a horizontal line — like these — equivalent to the width of the typeface’s letter m (this isn’t strictly a precise equivalent in many typefaces). There’s also an en-dash. Guess what it’s based on.

Em and ex units are relative to each typeface. This is useful because it means that the size specified by em changes in a precise way based on the user’s monitor resolution, preference settings, and other factors. In other words, using em allows you to specify what happens relative to the typeface. The result is proportional to the other qualities of the typeface and surrounding text. Also, relative specifications like em allow people with handicaps to enlarge the typeface in their browser as necessary. Fixed specifications like px or pt don’t offer the user this option.

Em and ex are traditional typesetter’s unit of measure, but their meanings in CSS are slightly modified. For one thing, computers calculate ex by simply dividing em in half. This is easier to compute, but only an approximation for most fonts. Em in CSS is the font size in pixels. This is useful because you can specify em units and rely on them being relative to the parent (or other) element’s font.

Here’s an experiment to get the idea of how em is relative to another element. In this code, text within the element is defined as 26px, but text within the paragraph element is defined as 1.5em, or, put another way, one and one-half times the size of the parent. Later in the HTML code, the paragraph element is enclosed (parented) by the body element. Therefore, the paragraph text is rendered at 1.5×26 pixels (or 39 pixels).

body {font-size: 26px;}
p {font-size: 1.5em;}
p.abs {font-size: 39px;}
some text
some text (1.5 em of the parent body).
<p class=”abs”>
some text (39 pixels).

The text in the abs class version of <p> is rendered the same size as the ordinary <p>. The <body> element is a parent element of the <p>, and <p> is defined as 1.5em of its parent. The parent body uses 26 pixels as its text size, so 26×1.5 results in 39 pixels.