Website Style Guide, Part 1 - Visual Style
Developing a style guide for your website will help to maintain consistency and a professional appearance as your website evolves and grows. These in turn will improve usability for your readers.
There are several different areas that your website style guide should touch on. In the next few blog posts, we will go over some of the more important ones to take into consideration, starting with Visual Style.
Visual style is an aspect of your web design, involving layout, fonts, and colour choices. Visual style is often the easiest type of style to get right—you can usually nail it by following one simple rule:
This is because your website already has built-in rules for how things should be styled. It already knows what fonts and sizes to use and where, it knows how to colour your text, headings, and links, and it automatically lays out everything according to pre-defined templates. By doing nothing at all, you allow these rules to take effect, and your web designer’s best intentions can be realized. All you need to do is decide what the functional role of your text should be. For instance, what is a heading, what is a list, and so on. In the editor, your text will be shown using a generic functional styling, but after you submit it, your website styles will take over and show you how it will appear to visitors.
Colours: In some special cases, you might find it helpful to break with the rule of not setting colours. For example, when quoting from an extensive set of rules and regulations, you may not be able to alter the formatting to highlight the passages of interest. In that case, you might choose to use colour to highlight the important words. Avoid colours that will make the highlighted text look like links.
Fonts: Your website already has its preferred fonts set up. Don’t override those settings, or your pages could end up looking like a ransom note. But there are cases where you may find it helpful to override those settings. For example, technical text (like code) often works best using a monospace font. (Note that there is a code tag in HTML that makes this easy for you.)
Layout: Be very cautious about playing with your text layout. Multi-column layouts, floating images, and other such effects will work on one type of viewer (eg. computer desktops), but not on others (eg. mobile phones). Do not even try to get text placements or line breaks exactly right, because there are a wide variety of viewing devices and they will all lay out the text in completely different ways. In the end, you may find that you are only managing how the text appears on your own screen. Best practice is to keep it simple so that those different devices can understand what purpose the text serves, and do something reasonably clean and consistent with it.
In short, follow the K.I.S.S. principle, and keep it simple! The whole point of a good graphic design is that you should not need to think about your visual style at all when making website updates.