In this post we will be taking a look at some tools and plugins that can make it easier for you to get typography right on your WordPress website. If you are looking for ways to optimize your content and improve the user experience on your website, typography could be one untapped area that could yield great results.
An understanding of the art of typography is a valuable skill to possess for anyone working in publishing, including bloggers and web designers. While it’s not something you can expect to master in a single blog post, by the end of this article you will have discovered some tools which can give you a shortcut to the end goal of having great looking written content on your website.
In a recent post on making your website content more engaging we touched on the importance of typography and some rules to follow to present your written content in the best possible way.
However, in this post we go into the topic of typography for WordPress users in more depth. You will learn how to easily add over 600 fonts to your website, customize the way the typefaces are used, choose the right combination of size, spacing, and line height, and add inline front-end editing to WordPress, plus a number of other tips and tools for ensuring your typography isn’t letting the rest of your site down.
So let’s get started with a free and easy way to add hundreds of high quality web fonts to your site and start making changes to the default typefaces in use by your theme.
Easy Google Fonts
Some modern WordPress themes include Google Font integration out of the box, giving you access to over 600 fonts at the touch of a button. However, if this isn’t the case with your current theme, don’t despair as this is something that can easily be rectified.
One way to open up a world of typography options for your website is to install the free Easy Google Fonts plugin. Not only does this give you over 600 Google Fonts to choose from, but this plugin also adds a set of visual controls to your website for using these fonts to customize the typefaces in use on your site, without the need to edit any code.
After the plugin has been installed on your site, when you go to the theme customize options, there will be a typography section.
Through the Typography controls you can now choose from all the available fonts from Google to change the typefaces of the paragraph, heading, and other styles on your website. As well as changing the fonts used, you can also edit the sizes, line heights, and letter spacing to get the right look for your site and its content.
If you want to change the fonts for any of the styles on your theme that aren’t listed on the customizer, you can easily add a custom control though the settings page of the plugin.
However, now that you can customize the fonts for every element on your site, it doesn’t mean you have to. Try to limit the number of fonts you use on your site to two: one for headers and one for the main body text. Less is definitely more when it comes to typefaces.
Golden Ratio Typography Calculator
Have you ever been to a website that just didn’t look right, despite using a nice theme or design? That is was probably because they had gotten their typefaces and font settings all wrong. Thankfully this is a problem you can easily avoid.
The Golden Ratio Typography Calculator is one online tool that can help you find the perfect combination of typefaces and font settings to ensure your written content is pleasing on the eye and easy to read. As badly formatted text can be just as off-putting as badly written text, it’s worth taking a few minutes to find the golden ratio for your content.
To use the calculator, simply enter the font size you plan to use and the width of the content area on your website. The tool will then tell you which settings to use for optimal typography. You can also scroll through the available fonts to get a preview of how your content will look on your site should you use these settings.
Once you’ve found the perfect ratio, you can use the above Easy Google Fonts plugin or the custom controls of your theme to make the necessary changes to your site.
You can find more about the theory behind this typography calculator and why you should use its recommended settings here.
Use a Grid System for Precise Control
If you’re a dedicated pixel pusher and are happy to spend your time nudging items around a page until you have the perfect layout, then the FireGrid plugin for WordPress will appeal to you.
The plugin adds a small set of controls for logged in users of your WordPress site. The controls can then be used to display a grid layout, in a range of sizes, to help you line up your content elements and text perfectly.
While this tool will be more useful for theme designers, content creators with a focus on presentation will find it helpful too.
Get More Control over Your Text with WP Typography
Now that you’ve found the perfect fonts for your site and established the ideal ratios for their sizing and other attributes, now is a good opportunity to gain more control over the granular settings that apply to your typography.
By using the free wp-Typography plugin you can improve the appearance of the text on your website by making a number of small tweaks which add up to make a big difference to how your readers evaluate your content and website as a whole.
Some of the things this free plugin can do include fixing the hyphenation issue, giving you more control over spacing, smart character replacement, and a few more little touches that go a long way towards attractive looking text. While the plugin hasn’t been updated in some time, it still works fine with the current version of WordPress (4.0.1).
Add Front-end Inline Text Editing to WordPress
Once you’ve chosen your fonts and typefaces and tweaked them perfectly to match the theme you are using and the type of content you are creating, all that is left is to start writing some great content.
However, thanks to the way WordPress works, writing in the post editor, then switching to the front-end to preview your content is a less than intuitive way of going about crafting content that is not only engaging, but also looks great on the page.
Thankfully there is a free and easy way to eliminate these steps and start writing and editing your posts on the front-end of your website. By being able to see your content as your visitors will when you are writing it, you can easily see when it’s time to start a new paragraph and break your text up for improved readability.
The free WordPress Front-end Editor plugin is an essential tool for all content writers who want to remove a few steps from the content creation process. Simply click on the Edit Post button on the front-end of your website and you can start editing your posts inline, with a live preview. The plugin is still in beta mode but seems to be working well.
Use Drop Caps in WordPress
The free Simple Drop Cap plugin is a great way to use the drop cap effect on the first letter of your posts and pages. This is a classic typography effect that has been used in some form or other since as far back as the 5th century and now you can use it on your WordPress website with ease.
By installing this plugin you can either opt to automatically use this effect on all of your posts and pages, or use a shortcode to apply this style on a manual basis. When adding drop caps, there are two options for doing so: floating and normal, and you can also use them in widgets and elsewhere on in your theme.
Through the settings you can also customize the colour and other styling by entering your own CSS.
Include Code in Your Posts with Style
If you are writing about code and want to share snippets and examples with your readers, the free SyntaxHighlighter Evolved plugin is one way to include codes in your WordPress posts in a very user friendly way.
After installing and activating this plugin on your site, you can begin adding code snippets to your posts for your readers and to illustrate your tutorials.
Through the plugin settings you can choose from a selection of colour schemes, enable a range of presentation options.
To add this effect to the code you include in your posts and pages, simply use the appropriate shortcode to denote the type of code. The code area features its own horizontal scroll bar to prevent line wrapping.
Conclusion
As you can see there is more to typography than just choosing a font and bolding important words. However, you should now have a good set of tools and resources at your disposal for getting typography right on your website to ensure your visitors stick around long enough to read your great content and take action after following your advice.
If you have any questions about typography for the web, please leave a comment below.
