As you develop your website, eventually you get to the question of what fonts to use on my site. This is one of the most exciting and frustrating stages of creating a new website. One the one hand, if you’ve made it to thinking about fonts you’ve made it beyond the initial design stage. You’re now thinking about content and how things are laid out. On the other hand, there are SO many fonts to pick from that it can become very overwhelming to get just the font you want. After all, there’s a reason there are sites with the names of “1000 fonts”. With such an overwhelming selection, it’s easy to go a little crazy with your fonts. This often results in very unprofessional looking sites. So here are some ways to help you find fonts that make you look professional.
Font selection guidelines
1. Limit How many fonts you pick
One of the tell-tale signs of an amateur site is the overuse of fonts. It’s so tempting to pick every neat font you see out there. I know because I’ve done it when I first started out.
Now, I work hard to limit my sites to 2 or 3 fonts at most. To create a variety of looks on the site, I vary instead color, intensity (e.g., bold or font-weight), and size. I can accomplish as many varied looks as I used to have and have it look 10 times more professional.
2. Build consistency
If you have a font you’re using in your logo already, stick with it. If you use a particular font for titles in one area, use it in all areas. Building that level of consistency will help make your site look more polished and completed.
The easiest way to accomplish this is through having a good theme that uses clean CSS classes and then only changing the fonts through your stylesheets. This way you can apply the same style across all pages of your site and be ensured they remain the same.
3. Avoid jumping medias
Fonts on a website appear two forms: graphics or text. Either you have a graphic that’s been created that has some level of text in it or you have HTML which has generated the text for you.
There are advantages and disadvantages to both, which we will not go into here but will cover in other articles on this site. But for the purposes of this discussion, the thing to note is that text which is saved in an image does not always look the same as text next to it which is in HTML.
There are several reasons for this:
- The font in the image file may have been manipulated in terms of spacing or height
- The font in the image file may have smooth or crisp techniques applied to them to look more or less blended with the image
- HTML may not have been able to locate the font and thus not able to render it properly
- Different monitors/systems pull from different types of font files which will cause them to look different
So, whenever possible, avoid having the same font appear in both image format and text format next to one another.
4. Clearly identify heading styles
When you work with a good designer, they will often do this for you so you can see what the different fonts look like on their own and next to one another.
This later step is very important to do as the comparison of how fonts look together often changes your decision and how you feel about fonts.
If you haven’t done this before, it’s very simple to create. If you’re trying to do this on your website, you can create a DRAFT post. Click on the “Text” in the upper right side so you can enter HTML code directly and enter the following:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <p>Normal paragraph with a <a href="#">link</a>. <blockquote>Block quote</blockquote>
Now view this page and you should be able to see all the various common tags that you would have on your website and what they will look like. When you’re considering the sizes, colors, and fonts, you need to consider each of the different types of areas listed above. If you’re working with a designer, they should be able to produce something like this for you as you work through the details of your site.
5. Choose clarity over fancy
I love script fonts. They look neat and give your site a unique, non-serious look. But when picking fancy fonts like this, you need to be careful that the content you deliver is still legible. I tend to limit the fancier fonts to just things like the major titles of pages or key spots on the site.
For the main text of the site, I recommend sticking with more traditional fonts like: Arial, Helvetica, Georgia, or Times New Roman. There is a difference in these fonts that is distinct and you should pick one that best suits your site.
In addition, be careful with your color selections and font size. I’ve seen sites where they’ve used font colors very close to the background and the text is lost. I’ve seen sites where the fonts are so small even I have to zoom the page to read the text or sites with fonts so big I can’t see more than a few lines of the text at a time.
Choosing the right sets of fonts is very important to ensuring your website looks professional and sharp. Have some favorite fonts you like to use? I’d love to see them. Link or post them below and share.