Typography is often a neglected aspect of web design. There are numerous sites around the Web with wonderful content that is badly presented and difficult to read. For sites that tend to be heavy on textual content, like blogs, readability and typographical elegance should be of prime concern.
If you’re using a good-quality theme, the typography will, for the most part, be taken care of, but, should you want to tinker with your type, go beyond the basics, or are a perfectionist when it comes to getting proportions and line spacing just right, there are some great resources available.
Typography for Dummies
We’re not going to go deeply into the nuances of typographic design here; it’s a complex subject, but there are a few basic principles, which, if followed, will almost always have a pleasing result.
1. Keep it Simple
Too many typefaces on the same page will not look good. A basic rule of thumb is to stick to two typefaces – one for the headings, and one for the body text. Of course, you can use more should you choose, but as you add typefaces the difficulty of achieving a cohesive appearance increases. Some typefaces just do not belong together, and the more typefaces, the greater the chance they will clash. So, unless you’re an expert, it’s generally smarter to stick with two.
2. Use Serif and Sans Serif typefaces in Combination
The classic arrangement is to use a Sans Serif font for headings, and a Serif font for the main text, but it can also be done the other way around.
3. Correct Contrast and Color
Ensure that there is sufficient contrast between type and background. It may sound like common sense, but a primary cause of websites looking bad is that the foreground and background color have either too much contrast (black on white), too little (light gray on slightly darker grey), or combine poorly with each other (red on dark blue).
4. Maintain a Proper Hierarchy of Headings
This helps with both appearance and SEO. Headings give a web page structure and help the reader’s eye to easily navigate the page.
The WordPress Typography Plugin allows users to tweak and swap the fonts on their site to their heart’s content. It works across themes and is compatible with Google Fonts, Cufon fonts, and standard fonts. Fonts are managed according to their CSS selectors, and features include font replacement with nearly 300 fonts available, font color selection, size, line height, letter spacing, text transforms and many other aspects. It is probably the most comprehensive typography management tool available for WordPress.
Pull quotes are a great way of highlighting parts of your text, and can give blog articles a magazine-like appearance. The plugin adds a button to the WordPress HTML and rich text editors so that writers can quickly include pull quotes in their content.
7. Hyphenator
Getting hyphenation right is not straightforward, but doing it poorly, especially on a page of justified text can leave pages with odd gaps in the text. Hyphenator uses a Javascript hyphenation engine to properly wrap and break lines on the client side, which means it can account for different displays.
Ensuring that code is displayed properly in WordPress posts and pages can be vexatious. WP Code Highlight allows users to display properly formatted and highlighted code snippets in their text.
Of course, this is only a selection of the available typographic plugins available for WordPress. Feel free to give a shout out to your favorites in the comments or add some typography advice of your own.
Graeme works as an inbound marketer for Nexcess, a leading provider of Magento and WordPress hosting.
No comments:
Post a Comment