Browse By

Font Size? Options & 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.

Originally posted 2012-04-12 12:00:25.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.