Font Size Measures: Options and Preferences

By / Feb 8, 2011 / Tips
shares

What is the Most Important Element in Designing Your Website? When you begin to design that perfect website, what do you think is the very first thing that you should be concerned with? Color? Templates? Graphic design? No. The first thing on the agenda should be font size.

“Font size,” you say? “Why should one be concerned with something as mundane as font size when there’s a whole website to be concerned about? So, you must be joking, right?”


Image Credit: Dekar Font from Fontfabric

Font Size Must Be the First Consideration

Sorry, this is no joke. Font size can, and will, make or break your website. The fact is that if your website is not readable, no one will stick around to try and decipher it, no matter how attractive the site may look at first glance.

The font size needs to be considered with care; a too large font can be just as unreadable as a font that looks like an array of tiny dots, no matter how hard you try to focus.

Four Ways to Consider Font Sizes

Fonts sizes are usually defined in four specific ways:

1. Absolute
2. Relative
3. Length
4. Percentage

Font sizes that are absolute are defined by the user-agent. These include the familiar xx-small all the way to xx-large; the default size usually being the x-medium. When a font size is relative, it means it is relative to the parent element, which makes it either larger, smaller or the exact size.

Length usually means a font that has some absolute measurement, such as an inch or centimeter, while a percentage is an absolute font that is relative to the parent element.

Reader Accessibility is Top Priority

One thing to remember in selecting the correct size for your typography is how accessible it will be to your readers. If your readers are mostly young adults, a smaller size may work but if you are wanting to appeal to a more mature audience, then your best bet is to choose a font size that is not only larger, but extremely readable.

Ems or Pixels?

A good accessibility trick is to create your design in ems. This function lets your chosen fonts become larger or smaller according to your readers’ individual browsers. Designing in ems allows the size of the font to become relative to the parent element. On most websites this would designate the font to be sized relative to the user’s browser.

One word of caution – one issue to consider in the use of ems is the possibility of not controlling the look of your site. With ems, your website fonts will scale relative to the default size of the browser, which can sometimes create a rather wild font size.

If desiring control over the look of your site is a must, then the alternative, and possibly best option, is to create in pixels. Pixels are the standard and results will usually hold few surprises in the look you want for your website.

Just remember, whatever decisions you make for website viewing, always consider your reading accessibility and the comfort of your visitors. This one area can make or break your website.

About the Author

Aimee Sway blogs for PrintExpress.co.uk, providing premiere business cards printing services. Follow her on Twitter @PrintExpressUK and like on Facebook!

7 Comments

  1. Fredrik
    February 8, 2011

    never use ems but i will try it now after reading this:)

    Reply
  2. typegoodness
    February 8, 2011

    I agree, Font size is very important! Thanks for the article.

    Reply
  3. Simon Day
    February 9, 2011

    If using em’s you may find this useful: Set the body font-size to 62.5% and then:
    10px=1em
    11px=1.1em
    12px=1.2em

    Just makes life a little easier :)

    Reply
    • Richard
      February 10, 2011

      Just remember to set your text elements to 1.6ems.
      16px is considered the best size for general text, which is probably why most browsers default size is 16px.

      Reply
  4. Zachary Kraft
    February 9, 2011

    This pretty much sums up what needs to be seen around some parts of the web today, and even I could benefit from some of it http://www.creativeautomaton.com.

    Reply
  5. Buzz
    February 10, 2011

    I agree type size is really important (the same as it is in print)… I must admit I find it a pain to work in ems in anything other than a freeflowing text page.

    Reply
  6. Mat
    February 11, 2011

    The article is right in saying that font size matters (it does) but it would be more worthwhile if it actually gave tips to help determine if your site needs to be adjusted, and how to do that

    I’m currently designing a site where typography is giving me a headache. It’d be great if I could find some tips on how to fix things to make it read better.

    Reply

Leave a Reply