- Image by Network Osaka via Flickr
Making things online often means using text and typography. Fiddling with font sizes online can be a real pain. This is because all the computer platforms are a little different in how they treat text and pixels. Also, since I’m a fan of making websites that people can use in ways that best suit them, I like to make it so that the type can be made larger or smaller. This is just a little blog post that explains how to do this.
First, set your initial font-size in the cascading style sheet (CSS). The rule should look like this:
body {
font-size: 62.5%;
}
What this does is it takes whatever the browsers default setting for text is (usually 16 pixels) and multiplies it by 62.5% giving us 10pixels. Keep in mind, that 10px is pretty tiny. But from here on out you can use something called an “em” to declare the size of your text.
An “em” is an “old school” unit of typographic measurement which is basically the width of the character “m” in a given typeface. Today you might use em-dashes (–) when you want something more substantial than an en-dash or hyphen or minus sign (-). Anyway, the main point is that the “em” is a relative unit of measure. As the base-size gets bigger then type sizes which are declared via em units get proportionally bigger. Very handy.
- using em units for text allows for text resizing by the browser (important for some demographics).
- using percentages on the body helps deal with IE issues (especially the “too big” thing).
Once you’re used to doing typography this way you will learn to like it as it gives you greater flexibility (resizing all of your typography is possible by just changing the base percentage) and consistent display (small text on IE isn’t micro on Safari etc).
It’s one of those things that maybe isn’t necessary, but is very nice for your visitors (especially the ones that increase or decrease type size on their machines–anyone over 40 for certain).
Once you’ve got this technique locked in, it won’t add any extra time to your development process.
Here’s the best article on this topic, for in depth review (mildly dated but this is the core article and source for this type of thinking) on A List Apart.
