Usability: Text Formatting

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:

Text 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.

Now that we’ve established a clear and concise title, we can begin to format our text. Aside from the fact that the text is smaller than the title, it also employs a Sans-Serif Font, which is generally easier to read on-screen. The text is nicely spaced out, allowing the readers eyes to easily focus on the line of text they are reading. Bolding is used to emphasize important selections, while links to other pages or sections are easily distinguished by an underline and a green hue. Note that the only time the text changes color is for the links, making them easy to pick out in a large body of text.

By keeping our spacing and formatting consistent, we have made it easier for our viewers to quickly and easily find what they’re looking for and do what they want to do. We also avoid having to tell the browser to render sections of text differently, and though it may not seem like much, it prevents the page from being bloated and slowed down by unnecessary layers of font styling.

The principles we’ve employed here can be seen all over the web on some of the biggest sites, including Webs! Not only do we adhere to these guidelines on our own website, we build them into our templates so that you can have a professional looking site of your own.

Leave a Comment

STYLE SWITCHER

Layout Style

Header Style

Accent Color