Today almost everything can be found on the World Wide Web. In my experience with web design and web development I’ve run into some questions, issues, concerns and conundrums. This is one of those items that will definitely confuse you unless you do a little research and know what you’re trying to achieve. Take it from me, I’ve spent hours playing with these different types of font-size and have just started seeing things clearly, but don’t fret!

First

There are several postings, forum discussions and articles on this subject matter, so I am not going to beat a dead horse. Here are the two most recent and useful articles I’ve read that do a very nice job of explaining each of the font-size types. Take a peek at them because you may find your answers there, plus they have gone into details that I may not touch on here:

“CSS Font-Size: em vs. px vs. pt vs. percent” by Kyle Shaeffer
“px – em – % – pt – keyword” by Chris Coyier

What I’ve Learned

Keyword: I tend to stay away from this type of font-size because I haven’t had a need to use a font-size adjustment on any of my work. This is a nice type to use for simple designs where you may only have 3 different sizes you use anywhere on your site. However, the lack of finite values makes it hard to completely customize a design to get it “just the way you like it”.

PX: This method I use and like to use regularly because it is very precise and makes most fonts look very clean. However one of the downsides to using this type as well as PT is scalability. By this I mean, how it is rendered on mobile devices and systems where the font may be larger or smaller than usual, like tablets or televisions. This can also be effected based on the browser being used to view the site, which can cause unwanted distortion of text.

PT: Point is a type that I associate with PX in it’s behavior. It’s the best type to use for print media. So when I am doing posters, fliers, CD covers or any other physically printed material I like to use a point font size. Seldom do I use this type on websites.

Percent (%): Percent is a very interesting font-size option. It works just like you’d expect it to work and the best part is its scalability. Like EM this type of font-size will adjust based on device and browser settings, causing your pages to look similar on say a cellphone as it does on Firefox. This type may be easier to understand than EM in that if your document body font-size is 16px then each font is relative to this, for example, 80% would then be 14px.

EM: This type while the concept is the same as Percent uses its own numbering system, which at first may be confusing but after you play with it and experiment a bit, it quickly becomes a favorite, at least it has for me. Not only does this allow for scalability on different devices and browsers like Percent it also is easy to use relatively on your pages just like Percent. The example given for Percent we said the body font size was 16px, so by defining a size of 0.8em would result in the same as a size of 80%, which would be 14px. With this in mind a size of 1.0em would be the same as the parent or 16px.

So How Do I Decide?

After all this you may ask, well how do I decide which is best for me. That, I cannot answer, but here are a few things to keep in mind when deciding on what type to use:

  1. Who is your target audience? Web, TV, print, etc.
  2. How will your content be accessed? Via PC, cellular device, tablet, etc.
  3. What type of browser will be your primary audience?
  4. Will you allow the font size of your content to be changed at the time of display

These aren’t the only questions you should ask before choosing a font-size type, but it’s a good start. Lastly, my thoughts on all of this, is to experiment. You really don’t know what you’re working with or how these concepts really play out until you have dealt with them hands on. So don’t be afraid to spend some time familiarizing yourself with these types before you start using one or the other.