March 29, 2024

Font Size Measures: Options and Preferences

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.

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. Richard Reply

      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.

  1. Buzz Reply

    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.

  2. Mat Reply

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *