Typography can make or break your WordPress site. The right typography makes your content more readable and keeps visitors around for longer. Bad typography is distracting, makes visitors work too hard, and pushes up your bounce rate.
The web is massive. I don’t need to bore you with statistics about how much information is out there, but you can be sure that the content you have to offer on your website is available somewhere else. Running a successful content-driven website becomes a matter of balancing the never ending process of creating great content while fine-tuning user experience.
One aspect of user experience that is often set and then forgotten is typography. So if it’s been a while since you last reviewed your site’s typography, here are some things to keep in mind when picking and implementing typography on your website.
When it Comes to Fonts, Less is More
A good rule of thumb when selecting fonts is to use fewer than 10 different fonts.
Don’t overload your site under a mountain of fonts. Each font has to be downloaded and rendered by the browser, so the more fonts you use, the more time it will take for your visitors’ browsers to download and render your website.
To be clear, I’m recommending no more than 10 fonts, not typefaces. For example, if you use the Open Sans typeface, and select all 10 font styles that are available from Google Fonts, then you’ve maxed-out your font allocation by picking all of the fonts available for a single typeface.
If possible, use between one and three typefaces and hold your total font count to between five and seven fonts – and certainly no greater than 10.
When it Comes to Typefaces, Simple is Better
Sure, the typography you select needs to fit the personality and style of your site, but it is even more important that the selected typefaces render your content in a clean and readable way. Limit the use of really unique typefaces to branding and top-level headings. Use styles that are supremely readable for lower-level headings, lists, paragraphs, and tables.
In the past, it was common knowledge that serif fonts were a poor choice for small text such as paragraphs and lists, but a good choice for large text such as headings and branding. However, modern computer monitors render serif fonts well enough that it’s OK to use either serif or sans-serif fonts.
The key is to pick fonts that are easy to read and to avoid using display, hand-lettered, or script styles for paragraphs and lists since they will quickly strain a website visitor’s eyes.
When it Comes to Typography, Size Matters
Typography built on small font sizes and justified paragraph text produces solid blocks of text that are aesthetically pleasing and absolute rubbish to read.
Select simple fonts, style them conservatively, and size them generously.
If your content can’t be read comfortably, it won’t be read at all. Also, avoid using justified paragraph text. Browsers do a poor job of handling justified text, so unless each linebreak is managed manually you’re likely to end up with some very poor results.
When it Comes to Your Audience, Don’t Leave Anyone Out
Think about all of your site’s visitors when making typography choices.
Web Accessibility In Mind has published a guide to selecting fonts and typography for accessibility, which you should read if you’ve never considered the topic before. Key principles to keep in mind when designing typography for accessibility include:
Select typography with readability as the primary consideration. In addition to selecting readable fonts and sizing them generously, make sure there is plenty of contrast between the color of the text and the background color.
Limit the use of bold, italicized, and text in all-caps. Not only can these types of text be harder to read, some screenreaders may actually interpret words in all caps as acronyms. For example, ABOUT US might be interpreted by some screenreaders as about U.S..
Never use font styling to convey information. For example, if a form field is required, indicate that it is required with an asterisk rather than coloring the field label red.
Avoid text that moves or blinks.
Great Typography in the Wild
Now on to the fun stuff. First, let’s get inspired.
A quick Google search will turn up an avalanche of examples of great typography. Two sources I find particularly useful when searching for typography inspiration are Typewolf and Awwwards.
Typewolf is a really fun site. It features a different website with great typography every day. The detailed description of every featured site includes a list of the fonts used by the site and links to font shops where you can get the fonts.
Awwwards recognizes the best of the web. Use the faceted search filters to find designs that have been selected for excellent use of typography. There’s a lot of great design to take in, just keep in mind that Awwwards is geared toward designers, and award winners often push the design envelope forward in unconventional ways that may or may not be right for your own site.
A Few Personal Favorites
I like to think I can spot good typography when I see it. Here are four sites that I think have done a great job of designing typography that is readable, fits the personality of the site, and adds to the design of the site without distracting attention away from the content.
A List Apart is one of the most important design blogs on the web. As such, you would expect them to employ well-designed typography, and they do. Typography at A List Apart is subtle and seems basic at first glance, but the longer you look the more nuances you notice. Body text is a carefully sized serif typeface: large enough to be readable yet small enough to avoid looking clumsy. Second level headings provide a clear break in the flow of article content by switching to a heavy sans-serif font in a conservative red hue. Differences in size are also used throughout the site to highlight introductory text and to signal bits of text, such as informational text and comments, that are secondary in importance to the article body and headings.
It would be easy to try out a complex typography design like what you see at A List Apart and get it wrong. A List Apart gets it right.
It would be hard to make a website more readable than Medium. Typography at Medium is simple. Fonts sizes are sized consistently and generously. Typeface selections are conservative and chosen for readability. While the typography at Medium isn’t going to win any design awards, I list it here because it does what it should do: slip into the background so that the story, and not the design of the site, is the focal point.
If you’re using WordPress to build a blog you could do a lot worse than to take inspiration from Medium.
Bet you didn’t see this one coming.
My last choice is something completely different: W3Schools. Now, before you bounce away from this article, hear me out on this one.
What is the point of typography? Typography is used to make content as readable as possible and to fit the brand and personality of the site. The typography at w3schools is boring, but it does what it is supposed to do while presenting very challenging content.
Have you ever tried to write a tutorial that consisted of lots of section headings, code samples, and very short paragraphs? I have, and let me tell you, layout of a code tutorial is a real challenge. Tutorial typography must be clean and well thought-out or the tutorial comes out looking jumbled and confused. It’s a lot easier to pick typography for long-form blog posts than for choppy code tutorials.
While the design of W3Schools isn’t going to win any awards, it is readable and organized. Given the challenging nature of the content of the site, that’s a major win in my book.
Tools for Crafting Great Typography
Now that you’re inspired, the next step is to start picking out fonts. Here are some tools to get you started.
Most websites make use of at least two different typefaces: one for paragraphs, lists, and a few lower-level headings, and a second typeface for high-level headings and design elements such as logos. Pairing fonts is an art, not a science, and if you have a great eye for design, you may not want any help.
For the rest of us, help is here.
Dozens of beautiful font pairs are just a click away! At Font Pair, you’ll find pairs of fonts matched up by design agency Mills Digital. Since all of the fonts are available from Google Fonts, they’re free to use.
Font Combinator is a browser-based tool for testing out Google Font combinations. The tool is JavaScipt heavy and includes a mountain of web fonts, so give it a minute or two to load after pointing your browser at it. Once your browser has finished downloading all of the fonts the tool is actually quite snappy. You can adjust typeface, font size, line height, and color until you’ve happy with what you’ve created. Then make a note of your selections and duplicate the effect using Google Fonts and CSS on your own site.
All three of these free font services include quite a bit of overlap, but their font catalogs aren’t identical. Google Fonts offers considerably more options that either Font Squirrel or Adobe Edge Web Fonts. However, both Font Squirrel and Adobe Edge Web Fonts make up for their comparatively smaller font offerings by doing a better job of curating the list of available fonts to include only high-quality options.
All the best typography theory in the world isn’t going to help you one bit without a way to apply those changes to your website. Don’t worry we’ve got you covered. If you’re using Upfront, support for Google Fonts is built right in, and if you aren’t, there are plugins you can use to implement any font.
Using Google Fonts in Upfront
Virtually all Google Fonts are available in Upfront. I say virtually because when a new font is added to Google Fonts it isn’t available in Upfront until it’s added during a theme update. With that one caveat in mind, you have complete access to Google Fonts through Upfront without installing anything extra.
Once you’ve picked out the fonts you plan to use, adding those fonts to Upfront is really as easy as setting those fonts up in the Theme Fonts Manager and then fine-tuning any edge-cases, such as navigation menus and text-based brand logos.
Before launching the Theme Fonts Manager create a new page that includes all of the text elements you plan to use on your site. I did this by creating a blank page titled Typography Tips, adding a Text element to the body of the page, and then copying and pasting some text from Codepen into the text element.
For this example, I’ve settled on Raleway for H1, H3, H5, and H6 elements. I’ll be using Alegreya for H2, H4, paragraph, list, and blockquote elements.
To launch the Theme Fonts Manager, select Theme Settings from the Upfront menu and click on Theme Fonts Manager. This will launch a menu titled Theme Text Fonts.
From this menu, any Google Font can be added to the theme by typing in the name of the typeface, selecting the desired font styles, and clicking on Add. Fonts can also be removed from the right-hand column by clicking the X that appears next to the font name when it is selected. Once all desired fonts have been added and unused fonts have been removed click OK to save the changes.
Now that the fonts have been added to Upfront they can be assigned to the appropriate elements.
Individual font styles are applied to the elements of the theme by using the Theme Settings menu on the left-hand side of the page. A typeface, font style, color, size, and line height can be set for every text element. Changes will be updated automatically, so you can see the fruit of your labor as you go–which is why you should go through this process with a sample page set up to display all of the different text elements.
Once you’re happy with the results, just save the changes and all of your font selections will be updated.
If you want to finetune certain elements beyond what is possible using the Theme Fonts Manager, the best place to make those adjustments is by navigating to Theme Settings > Typography > Global Theme CSS and typing custom CSS rules for any additional styles. For example, if you want to tighten up the letter spacing in all H1 headings you could do that by using the letter-spacing CSS property and the h1 selector in the Global Theme CSS style sheet.
The last step is to adjust typography for unique situations, such as the primary navigation menu, page titles, and any other locations where you want to make a unique adjustment.
Let’s use the primary navigation menu as an example. To edit the primary navigation menu typography take the following steps:
Click on the menu,
Select the Edit Elements option that appears,
Click on the menu again, and
Select the gear icon to open the Navigation Settings menu.
Next, go to Navigation Settings > Appearance. A warning will appear letting you know that you’re about to edit the default preset settings. Instead of editing the default preset, type in a name for a new preset. I used the name main nav.
There are a couple of basic menu options to configure and then you can define typography for the Static, Hover, and Focus states of the menu items.
You can repeat this same process to create custom typography for any element on your website. Just select the item you want to control, select the gear icon to edit it, create a custom preset, and adjust it until you’re happy with what you see.
Typography Plugins for WordPress
I know that not everyone is a WPMU DEV member with access to Upfront, all of our plugins, the WPMU DEV Academy, and 24/7 support. Or maybe, like me, you are a WPMU DEV member but don’t use Upfront exclusively. If either of those situations describes you, there are several plugins in the WordPress plugin directory you can consider to make it easier to add fonts to your WordPress site.
Here are a few of the best font plugins in the WordPress plugin directory.
Easy Google Fonts
Anytime I build a WordPress website and don’t use Upfront, I use Easy Google Fonts. This plugin makes it easy to define custom typography for every element on your site and lets you choose from all 700+ Google Fonts. It also works in the Customizer, so you get a near-live preview of what your changes will look like as you go.
Easy Google Fonts does have lots of competition. As a responsible WordPresser, you should probably take a peek at those before plunging forward with my recommendation–although I’m pretty confident you’ll end up using Easy Google Fonts.
As of right now, there is one plugin (that I could locate) in the WordPress plugin directory that makes it easy to add Adobe Edge Web Fonts to a WordPress site. Sure, you could always add them manually if you know how to use FTP and aren’t intimidated by the idea of adding code to the header.php file in your child theme. Then again, this plugin makes it easy to test out and use any Adobe Edge Web Font on your site without downloading any font files or firing up your FTP client.
Font Squirrel is a popular free web font service. What it lacks in depth of options it makes up for in quality. Use this plugin to get Font Squirrel goodness in any WordPress site without having to add the @font-face rule manually.
The three plugins mentioned so far are great for adding web fonts to your site, but what if you have a font file you need to use? Well, you’ve got two options: add them manually–a process we’ve covered before–or use a plugin. Make things easy on yourself by trying out Use Any Font to upload, host, and use any font right from your WordPress admin dashboard.
This final plugin is something completely different. Font-resizer is all about accessibility. With font-resizer you can easily add a font-size control element that makes it easy for your website visitors to increase or decrease the font size so that it’s as readable as possible on their device.
Follow the tips in this article, use the font pairing tools and plugins suggested, and you will be able to develop and implement sitewide typography that gets out of the way and lets your website content do its best work.