A common problem on many amateur-made websites is a lack of a consistent style. This is more than just a style issue, though. It can hurt how well a website generates business.
As an example, a heading might be bold and red in one instance and then non-bold, black and all-caps in the next instance. Or a block of text will be flush left in one paragraph and centered in the next. I think you get the idea.
So What’s the Big Deal?
A lack of a consistent style causes a number of problems. First of all, it can make it difficult for visitors to make sense of the information on a page. A consistent style helps visitors visually organize information.
Additionally, a lack of a consistent style makes a page look disorganized, sloppy and unprofessional. Visitors are less likely to trust what you’re trying to tell or sell them. A website is like a job interview. You want to always look your best.
How Do You Create a Consistent Style?
Set Styles for Each Element Type
To make your site easier to read and look more professional and trustworthy, set a style (color, font face, font weight, background color, margins, padding, size, etc.) for each type of element. Elements include body text (aka paragraph text), top-level headings, subheadings, sidebar widgets, etc.
If your subheading in one section has a font-size of 24px and a line-height of 32px and a font-weight of normal, then the subheading for the next section should have the same exact style, unless you have a good reason for it not to.
Limit Font Faces and Colors
Also limit yourself to two or three different font faces, usually one serif and one sans-serif. Typically one font is used for all headings and the other is used for body text. Using too many fonts can create that ransom note effect. Don’t want to scare your visitors away!
You also want to limit your colors. Adobe’s kuler app is a great tool to help you choose a color scheme.
Repeat Non-Text Styles As Well
Other non-text elements (button styles, bullets, etc.) need to have a consistent style as well. So if one button has rounded corners (aka border-radius), drop shadows and a blue color, use the same style for all buttons. It helps to pull it all together.
Need More Help?
If you liked this article, be sure to sign up for your FREE subscription to the Nickel's Worth of Free Advice newsletter where we send helpful articles every Tuesday and Friday. You can either fill out the form on the right side of this page or visit the Nickel's Worth of Free Advice signup page.
We're also happy to provide assistance directly. Just send an email to email@example.com.