Do you have style?

What is style anyway?

In a previous post I mentioned a style guide and suggested that you add your colour scheme to your style guide.  However people are wondering what on earth a style guide is?  So this post is all about building a style guide for your site!

Style guide contents

A style guide is a document that sets out for potential content authors and editors what is acceptable for your website and what shouldn’t be done.  It is primarily used on sites and publications when many people are contributing – like a national newspaper.  However it can prove useful for smaller websites too.  It ensures that over time a consistent approach is used and that in turn gives your visitors a good experience and hopefully makes visitors want to come back and visit again.

So what should go in a style guide?

A style guide should cover at least the typeface (font) used and the colours used in your website.  However there are a lot more things that it can cover too.  For example you might include in the style guide the use of your logo and branding:

In some instances the logo should be portrait and some landscape.  In addition you might want a separate logo that prints well in black and white.

Imagine a scenario where someone is adding new content and that content includes a pdf, a photo, and three paragraphs of text.  In this case your style guide needs to tell them

• Font size and typeface for the body text
• Font size and typeface for the Page heading text
• Font size and typeface for the Paragraph heading text

Font size and typeface for and label text that goes with pictures and pdf downloads

In addition you might want to state that there must be a page heading and state that is should be no more than 5 words which must use the page heading text style.  The article must also have a heading before each paragraph of no more than 5 words and must use the paragraph heading style.

You could also say that each picture must be 72dpi (to allow quick download) and no more than 350px wide.

You get the idea.  You think through various scenarios that a content contributor might follow and then write some simple to follow rules for them.  This can include supplying a library of photos that are acceptable to use throughout the site and “standard” text to cover contact info etc.

Although it might seem like a lot of work to produce a style guide you’ll find that it proves its worth quickly.  You’ll end up using it not only for your website but probably for all of your communications and publications too!

7 easy steps to writing a style guide

1. decide the typeface you want to use
2. define the size of the typeface for each of the text styles: heading 1, heading 2, heading 3, paragraph, picture labels
3. state the general length for: sentence, paragraph, heading, label.
4. define what level of reader the text should be aimed at: complex sentence structure or simple sentence structure.
5. define image sizes at 72dpi and give a maximum width and height. You could also state when thumbnail picture should be used instead of a larger picture (perhaps when clicked the thumbnail changes to a larger picture)
6. define the use of labels for thumbnails and figure and images.
7. define the colour scheme for your site. Set out the colours that should be used.  This should include any text colours if not already defined.

The steps themselves are straightforward, however getting agreement amongst interested parties can be a bit more tricky!