Improving Your Website Design with Google Fonts
When it comes to website design, one of the most overlooked aspects is font selection. Many people never give a second thought to the font they use on their website. However, if you are developing your own theme or editing an existing one, choosing the right font should be a significant part of the process.
In the past, selecting a font or font combination for your website was a simple and boring task. There were very few web-safe fonts available for use. But now, with the vast number of web-optimized fonts continually being created, it can be challenging to figure out which ones to use.
Google Fonts has become one of the greatest font resources available on the web today. With over 900 font families that are open-source and can be created and enhanced by anyone, designers who create fonts have to go through a consideration process to have their font included in Google’s directory. This means that as well as having access to thousands of designers around the world, fonts cannot be added to the directory without first ensuring they are complete and web-optimized.
Using different fonts in the past meant that people had to have the font installed on their own computer to allow the browser to display them properly. With Google Fonts, all of the fonts are directly accessed from the Google directory, ensuring that they will work on practically any machine with any browser. This opens up an unprecedented amount of design freedom for developing websites.
How to Use Google Fonts on Your Website
Some WordPress themes, such as the Total WordPress Theme, include options built into the theme for easily altering your Google fonts. Just navigate to the Customizer and click on the Typography tab to edit main fonts, font size, font weight, and even line spacing for elements throughout the theme.
However, if you are using a different theme, you could add Google Fonts manually or use a plugin. One of the best free plugins for adding Google Fonts to your site is by using the free Easy Google Fonts Plugin, which you can download from the WordPress repository. Another great plugin for customizing your fonts on the site is the Yellow Pencil Live CSS editor plugin.
Which Fonts Should You Use?
The greatest strength of the Google Fonts Directory can also make life difficult for you. There are such a large number of fonts available to use that finding and choosing a decent font combination can be a challenge.
The fonts you choose will depend entirely upon what you are trying to convey with your design. Fonts are used to capture the interest of the site’s readers. They are used to draw attention to various aspects of the website, and a great designer can do wonders with very subtle differences in the fonts they use.
One thing you need to understand is the difference between a font and a typeface. A font is the complete collection of letters, numbers, symbols, etc. When referring to the design of that collection, you would call it a typeface.
There are various classifications that can be applied to typefaces, such as Serif, Sans Serif, Display, Handwriting (or Script), and Monospace. Serif typefaces have a tail that hangs off the edge of each character, while Sans Serif typefaces have no tails. Display typefaces are unusual and decorative, while Handwriting typefaces look like handwritten cursive or block writing. Lastly, monospace fonts are composed of characters that each take up the exact same amount of space.
Fonts Best Practices for Web Design
There are a few best practice guidelines to follow when choosing which fonts to use. It is a good idea to avoid using more than two different fonts in your site design. It can be difficult to balance more than two fonts, and mixing more than two typefaces on one site can cause serious visual issues.
If you are using two different fonts, for example, one for titles and one for content, make sure that you don’t choose them from the same typeface classification. It’s best to combine typefaces. In other words, avoid using two different Serif fonts or two different sans-serif fonts.
There are fonts that work really well for titles but are not ideal for body content and vice versa. Content fonts should be clean and easy to read, whereas title fonts should be used for maximum impact and to draw attention to specific areas of your site.
Wrapping up Google Fonts for WordPress
Choosing fonts for your website design can be a tricky and involved process. There is much more to the decision than simply choosing any two fonts. Make sure your header class hierarchy is balanced and that header tags reduce in relative size. Half the battle of good site design and typography is to be consistent with your font choices. That includes font sizes, weights, and spacing.
Using Google Fonts and the Google Typography plugin makes this entire process far easier than it has ever been. Even with these resources, having professional and balanced typography is still a challenge. If you are still unsure of the choices you are making and get lost when you are trying to figure out the differences between all of your options, it may be time to have a professional designer take a look at your site.
Have you implemented Google Fonts on your website? Have you built a theme from scratch that includes Google Fonts? We’d love to hear your thoughts on typography and your favorite fonts in the comments below.
