Viralogy

For many, building a website means hours upon hours of drafting up designs and even more time trying to get it all together. Still, one area that few take the time to think about is the website font. While it is important to have a great logo to represent your company, having the right font and font size is just as important as it can play a big role in overall customer experience and most importantly, conversions.

For companies that are in the process of building a website, the font they choose may seem like a simple process, but in fact, it can be quite difficult depending on the presentation and ‘personality’ you want your website to present.

What Size Font?

Probably the best answer is to not have a set size font. By this, we mean that by ‘locking’ in an actual font size, you are in fact limiting yourself and also potentially causing problems for the visitor to your site.

Rather than setting your sizing to size 10, 12, 14 and so on, the smart decision would be to choose font size relative to the rest of the content on your site. By using percentages, this will provide flexibility for the user who is viewing your website.

Example:

When a user comes to your website, if you have locked in 12 PT font, what if the person viewing your site has poor eyesight and is has trouble reading it? While this may seem easy to read to you, you need to be conscious of the fact that there are many factors that go into how your content is displayed on others screens.

Because of differing DPI’s on Mac’s and PC’s as well as screen resolutions, font size dynamically changes from user to user. By using percentages, content can adapt to the visitors browser font settings which will in turn ensure that your site is readable and also to the visitors standards. Additionally, CSS allows you to change your font size based on the rest of your content.

Example:

Through the use of H1, H2, and H3 tags, font changes proportionally. This not only visually shows content importance, but it is also great for search engine crawlers who translate these into ‘weights’ for your content.

What Font Style?

The second part to the equation is what type of font style you will use on your website.

While the average Joe is used to font’s like Arial and Times New Roman, the key thing to remember is that not every computer have these fonts installed. As a result, instead of choosing just one font style or ‘typeface,’ the better choice is to select a ‘font family’ when building your site.

To ensure that your website content is displayed in the font style that you want, be sure to include at least 2-3 fonts that are similar to each other, followed by the generic font family that they belong to.

Here is an example of how this would look in the HTML:

Remember that although you may have hundreds of different fonts at your disposal, your visitors may only have a handful installed on their computer. Always have alternatives and always adapt to the situation.

If you need further reference for font families, here is a great list from Font Tester:

font-family: Arial, Helvetica, sans-serif;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif;
font-family: ‘Comic Sans MS’, cursive;
font-family: Courier, monospace;
font-family: ‘Courier New’, Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: ‘Lucida Console’, Monaco, monospace;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-family: ‘MS Sans Serif’, Geneva, sans-serif;
font-family: ‘MS Serif’, ‘New York’, sans-serif;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;