WordPress Theme Design Part 2: Web Typography

• Posted: January 18, 2008
• |
• Author: Chris Murphy
• |
• Filed under: Design, Developement, Tutorial, WordPress, WordPress Themes
• |
• Tags: Layout, Theme Design, Typographic Color, Typography, WordPress Themes

WordPress theme design -- like most disciplines in web design -- bridges many fields of contemporary graphic design. I say that lightly since web design as a discipline involves many other aspects uncommon to traditional graphic design. However, that does not immediately exempt web designers from certain priciples such as those which govern good typography.

In the previous installment of this series, I covered how we can harmonize and control the layout of our design by making consistent use of a strong column measure. In turn, the column measure gave us the foundation for our visual grid. With that invisible grid in mind, a designer can ideally lay out the components of their WordPress theme and ensure that we meet some basic requirements such as good readability, and a clutter-free visual experience.

For this installment, I’m going to focus on another issue that tends to plague web designers — typography.

Before we get started, it’s best that we get a few misconceptions out of the way:

1. Typographic principles for Print Design cannot be applied to Web Design;
2. Good typography requires images;
3. Users only care about content;

For the most part, point three is correct; however, let’s put this into a little more context. Users care about your content — or at least you hope they do if they’re browsing your site — but that does not preclude you from developing a better reading experience for them by applying some straight-forward approaches to typography. I personally hate going to a site only to find that fonts are so tiny on my screen that I have to crank up my font settings in my browser to read it. It is equally annoying if I really want to read the content and am forced to resort to that. It doesn’t hurt to make things a little easier for your readers.

As for the second point, my response to that is typically “know your audience”. I say that because every site is different. Content on one site might require that images be used in place of text, whereas on another site, it is far more important to the audience that content be easily accessible (select, copy, paste, etc). Arguably, it is easier to share text-based content, than it is to share graphical content. Understand who your audience is, and cater to them as appropriate.

Finally, most typographic principles used in print translate beautifully to screen. We have far more advanced tools to develop a better reading experience with CSS-based layouts, which control everything from positioning to formatting. While I don’t want this to turn into an in-depth discussion about usability and web standards, I will say that applying good typographic practices enhances both web usability and accessibility efforts.

Let’s get started.

Issue: Poor reading experience for users

For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse. Source: webtypography.net

I could not have said it any better.

When it comes to developing a good reading experience for your users, typography is an important aspect that needs as much consideration as colour and layout. A good reading experience should leave your users free to do one thing: read. If you can present your content in a way that makes it both easy to read, and requires less from the user than scrolling, you’ve accomplished what many websites fail to do.

Good typography in your design opens up your layout and makes a normally “grey” page appear friendly and light.

Something to think about:

It is inevitable that you will come across older sites — and even new websites — which still seek to compact as much copywriting into a given area as possible. It is not uncommon to hear feedback along the lines of “keep the content above the fold”; every time someone must say this, a kitten dies somewhere. I counter that kind of feedback with this. With current web standards, there is no harm in scrolling a page. It is a natural browsing behaviour; again, this is a good case where it pays to know your audience.

Density or “Typographic Colour”

First off, you need to ask yourself what kind of blogger you are. Are you the type of blogger that publishes short paragraphs with a smattering of links? Are you the type of blogger that prefers to drop lots of images and media with brief explanations? Or are you a copious writer given to generous use of copy, media and links?

If you can identify what kind of writer you are, then you’re half way to understanding your audience. People visit your blog for any number of reasons, but the foremost amongst those reasons is your content. They like what you have to say, what you have to show them, and the information you can point them to.

For the purposes of this article, let’s assume you’re like me — a copious writer. You love your words and your blog is the perfect place to share them.

Given the assumption, here are a few considerations:

1. Large amounts of copy on a screen or piece of paper turn your normal white space in a big grey mass. In traditional typography we call this “typographic colour”. More specifically this is the density of your paragraphs in relation to the space you have given the paragraphs. You can lighten things up by adjusting the “leading” (line-height in CSS), and the “Kerning” (letter-spacing in CSS).
2. Colour as a tool plays a much more important (though subtle) role in good typographic design. You have many colours to choose from, but when it comes to presenting content that is intended to be read, contrast between the background and the type is essential. The better the contrast, the less work is required of the reader to focus and interpret what is on screen. Pick colours that are harmonious with your overall design, but also have a high-degree of contrast. This does not mean you have to stick to black and white; as long as the colour has enough contrast to it, you should be fine. “Cooler” colours (colour temperature, not “cool factor”) for type work best across most screens.
3. The typeface, its size, its leading and kerning all affect the readability of your content. Choose a typeface and set its properties to ensure that it is legible. I cannot stress this aspect enough. I have had one too many debates with designers who transition from Print to Web, arguing that 9pt to 10pt type is more than sufficient for on-screen legibility (this is one of those exceptions where print and web typographic principles do not marry so well). I end these long-winded debates with this consideration: in contemporary graphic design, a designer must design for the medium. The same holds true for web designers. We have to design for the medium, and in our case the medium is the screen. Here is an article that also talks about adjusting typography for the web. It also covers parts of the previous discussion in relation to the column measure.

Here are some examples of density, and how typographic control can affect the legibility of your body copy:

You can see from the thumbnails how the leading affects the density of copy on the page. The tighter the leading (and other type properties) the more dense a single paragraph appears to a reader.

Putting it into practice

Spend the time and go through the motions of playing around with typographic colour in your design application, or if you prefer to deal with your typography in CSS you can use tools like Font Tester or TypeTester. The benefit of these online tools is that you are very quickly able to see the results of your tests as they appear on screen — in a browsing environment. The more time you spend on determining your typographic styles in the design phase of creating a WordPress theme, the better off you will be later in the development process.

Design for the medium

Keep in mind that for web, it is easier to scale back than it is to scale up. We don’t have the restrictions of paper or other physical media — we do have to contend with other issues (we’ll cover that later), but for the most part you’re better off starting larger at first and scaling back if you have to.

Here are some sites that are some examples of web typography that illustrate the design principles I have been talking about in this article:

• http://www.clearleft.com/about/
• http://www.simplebits.com/
• http://www.whatdoiknow.org/
• http://slideshowpro.net/

Some Considerations:

Feedback is always nice to have. If possible, solicit some of your readers about their thoughts on your typographic choices, but remember to put your questions into the proper context:

• “Is it easier to read my articles if I do this or that?”
• “Does the page feel lighter to you if I chose this colour or that colour?”
• “Can you scan the page quickly and find what you need?”

Further Reading:

“The Elements of Typographic Style Applied to the Web” is a site that I have found infinitely useful as a reference and as a sounding board for decisions I make in terms of my typographic design. I encourage anyone who has an interest in web typography to read it — it’s not a long read — quite brief in fact. Keep in mind that as a designer, you the final call on decisions — don’t get caught up in the stress of “I have to adhere strictly to the rules or my design sucks”. Instead, think about your audience. Put yourself in their shoes and consider what works best for them in regards to your content.

• (4) Comments
• Permalink
• RSS 2.0
• 
• 
• 
• 
• 
•