Now that we’ve established how to format our text in a way that pleases the reader, we can move on to planning and implementing color styles. Color can be either a powerful tool or a crippling weakness. The important thing to remember is that having a hammer does not make everything into a nail.

The example above seems to be very simple in terms of color, using 3-4 colors at most. The color palette consists mostly of different shades of brown, and the entire page follows that trend. By not throwing a plethora of different colors onto the page we can keep the readers focused on what we want them to see as they follow the natural flow of the page. Empty space also plays a larger role in defining areas of importance (such as the navigation menu).


At the Web 2.0 Summit in November 2006, Marissa Mayer of Google gave a talk on an internal study which indicated that a half-second delay in terms of page loading can cause up to a 20% drop in site traffic (a more in-depth description of her presentation can be found¬†here for those interested). Since then, there’s been a swarm of development over tools related to trimming down websites, and subsequently decreasing load times, all without taking away from the desired user experience.


Text Example

There are a lot of different things one must consider when making a website. Many of these are specific to the sites purpose, but a number of general practices can go a long way towards making your page more accessible and easy to comprehend for your users. This post will focus on the styling and formatting of text to make it easy to read and enjoyable to look at.

For a few of these points, we’ll use the following image as an example:

Let’s start by looking at the title (“What Is Lorem Ipsum?”). It immediately draws attention because it’s larger than the body text and uses a Serif Font. Simply from looking at it we can infer its meaning and importance, and it manages to do this without breaking the flow of the page. The text remains aligned to the left, and feels consistent with the following content.



Layout Style

Header Style

Accent Color