There are a few things that make a great website, and the fonts that you choose for your website is one of them.
I used to be really into fonts when I first started trying to get into graphic design. When I first started doing web design I wanted some of the cute and fun fonts on my websites.
Back in the day, a person viewing the fonts your website would only see the font you chose for your website if they had the same font installed on their computer. That meant if you had a fun unique font on your computer and you wanted it on your website, everyone else would see it as a different (most likely boring) font.
We combatted the boring font problem by using images with the fonts we wanted in them. It wasn’t very practical as the images would take a bit longer to load and that different size screens would view them differently and they might not be a readable size.
Thankfully technology has changed. Now there are different places that will show the fonts on your website for you. There are more fonts with free licensing that you can use and they will be seen globally.
My favorite font website is Fonts.Google.com.When you are using Google Fonts you are able to browse through quite a few different fonts. They have a couple of cool tools so that you can pick the perfect font.
Google Fonts Search Tool
Start your search for a font for your website by browsing based on Category.
- Serif fonts are the fonts that have the little lines that accent the edges of a font. These are known to be good for easy reading (think blocks of text) and they help lead your eyes to the next word quickly. IE: Times New Roman
- Sans Serif fonts are fonts without the little lines on the edges of each letter. These would be great for headings. IE: Arial
- Handwriting These fonts are the fun and cute ones, but they are not always easy to read. Use them sparingly as accents.
- Monospace fonts have evenly spaced letters. A small “i” takes up as much room as a “w”. Think typewriter fonts
- Display fonts are for large headings
The other cool parts of the search bar are that you can insert some of your own text to view what it would look like instead of the example phrases that they have preloaded on there. The only thing to think about is that you may not think to view all of the letters in the alphabet, so check those out to make sure you like the entire font. Add your text in the box that says “Type Something”.
As you are looking through the fonts notice the little red “plus” symbol in the corner. That will allow you to add the font to a collection. I do this when I have a few different contenders. This will allow you to compare all of the fonts you select on one screen and also to send the selection to someone else if you need help choosing. You will notice that the collection shows up at the bottom of your screen. When you click on it find the red arrow pointing to the right. That will bring your collection to a new screen.
This will bring you to view the fonts altogether and to type in your own text again to compare it letter for letter.
Google Fonts Popular Pairings Tool
When you click on a font name, it brings you to the font page. It will show you all of the characters and any other pertinent information. My favorite part of this page is that it shows you other fonts that go well together, with examples included.
Using these tools will help your website look much more professional and unique, which will keep more website visitors on your website for longer.