Web Design: Font Sizes

Web Design: Font Sizes - Dustin SmithSo I have been doing some website design lately and thought this would be a good topic to discuss on the matter. I’m no pro web designer, but this is good information for anyone that picks up web design.

There are lots of site builder programs out there that require no coding experience whatsoever. This is both great and a tragedy. For the small business owner who is a professional in their niche but a novice in the world of programming, it’s certainly a winning idea. They can just throw what they know into templates and hit publish.

I’ve spent some time with some of these site building programs and I wasn’t the biggest fan. I know there are some great ones out there, but you have to be careful not to trust these until you spend time with them. The Sitebuilder I experienced was incredibly restrictive in a few ways, but we will focus on a couple for the sake of this post.

1) Source code access. There was no way to edit the actual HTML and CSS. The only way you could change the site was through the sitebuilder, which brings me to my primary complaint and the focus of this post.

2) Font size. There was only one unit option for font sizes through sitebuilder: “Point size“. This doesn’t alarm most people as that is the unit of font size that we use every day in Word. So why is this a bad thing?

There are many different browsers out there and browsers read code in different ways. There are also different devices we use to browse. This means that you should be defining your font sizes in a relative manner so all the different devices and browsers can adjust the font on your website accordingly.

Absolute Size and Relative Size

Absolute size doesn’t allow the user to manipulate the font size in every browser. For example, setting font size using pixels allows Firefox, Chrome and Safari to resize the text, but not Internet Explorer.

A better unit of measure is the “em”. 1em is the users browser default font size, 2em is twice as large, .5em is half the size of 1em, etc. This remedies many of the sizing issue between browsers, unfortunately there is still an issue with IE when making the font larger and smaller.

(Relative)Mix of em and Percent:
The method that works in all browsers is a mixture of percent and em definitions. You set the body text to 100% and then manipulate the header texts with em sizing. 100% = 1em, so you can manipulate the headers accordingly.

You can see examples of all of these cases at w3school.

Like I said I’m not an expert, please feel free to comment with ideas, thoughts, suggestions, corrections, etc.

Thanks for reading!
Dustin Smith
Connect with me on LinkedIn
Friend me on Facebook
Like my Facebook Page
Follow me on Twitter for current topics and articles
HootSuite - Social Media Dashboard