Guides to Fonts and Typography

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

However, most people (including me during those days) just use pixels or points and become accustomed to it. However, by doing that they may be causing problems for some readers. Ever come to a super small font blog anyone?

So, which measurement should you use? What are available font measurements and most importantly when to use them? The information are scattered everywhere but I’ve taken extra steps to compile them here. Read on.

Points (pt)
Points are a print unit of measure and they are an absolute type size. This means that when you specify a font to 12pt in size, it might display much larger or smaller than you expect. Some readers always enlarge the font size when viewing page but when it comes to points, they are in trouble. In other word, you cannot expect on how it will look in readers’ screen. Yes, we almost forgot that the Web is viewed on the screen and using different browsers too! Suffice to say, points are bad unit for screen-based design.

Best practice in using this format is for your printed pages. Since I never produce something to be printed, I rarely use points in my blogs.

Pixels (px)
Past few years, this measurement was what I used. Pixels are the standard unit of measure for screens and monitors, and fonts will be more precisely the size you want on the screen. The problem is pixels response directly to the resolution of readers’ screen depending on what operating system they use. It may look perfect on Windows platform but does it produces the same effect on Macintosh or Linux? You bet.

However, if you concern over the look of your blog, perhaps you should use pixels since the fonts will be more precisely the size you want on the screen.

Ems (em)
Ems is a sizing mechanism in CSS that is lucid yet based on the default font size and generally predictable. Until recently, I decided to use ems throughout my design. Why? That because ems is considered the “best” units for sizing fonts and layouts in CSS. It doesn’t have the disadvantages of pixels and points. Ems is resizable in all Web browsers that support resizing, they are specified relative to the designer’s font size preferences, and can therefore adapt to the viewer’s screen. In other words, it offers more flexibility to the font.

If you cater about your audience very much, then ems is your good solution as your whitespace grows and shrinks proportional to your text if it is resized.

Percentage (%)
I rarely implement percentages typography to my design, except for tables. Equivalent to ems, percentages are another relative size measurement which can be used both to font sizes and layout except that percentages provide more consistent results than the latter when bumping font size up and down.

If you are more comfortable with percentages measurement than the typography-inspired ems, use its value instead since the results are almost the same.

Whatever it is, fonts and typography represents major role in creating a successful blog. Use them wisely and most importantly, do not annoy your readers as best as possible. Click here for conversion table.

digg reddit delicious stumbleupon technorati furl ma.gnolia
Does this post useful? Subscribe to RSS Feed for updates.
Posted on: July 2, 2008 | Under Blogging Basics 
 

3 Responses to “Guides to Fonts and Typography”

  1. Simon on July 6th, 2008 12:53 am

    As what I was looking for. Great info indeed.

  1. Guides to Fonts and Typography
  2. Bookmarks about Typography

Share your thoughts




Speak your mind