Creating website structure with fonts

Wednesday, November 09, 2011 by Richard Howe

The typography used in a good web design can really make it all come together, and give a touch of individuality.

The use of good type alongside suitable colours and images, can create a website structure which helps the reader to move across the page.

Bold types

Keeping things simple is often a very effective way of drawing attention. But keeping things simple and looking good, is not always an easy task.  

For titles, keep things short and snappy. If you find your headlines are running over about 12 words, take a look at them again and see if there is any way of cutting them down. This may mean sacrificing a few keywords, but so be it if it means the visitor gets a better experience.

Another good idea is to take note of what newspapers have been doing for years...using a subtle shade (white) with an opposite type colour (black) which provide a total contrast to each other. This is also great for your website accessibility too! It doesn't have to be black and white though. Just 2 simple colours which work well together.


Taking a leaf out of the book (or newspaper) of publishers again...nothing makes a better impact and draws attention like a big font.

This is something your visitors can't miss, and it improves your content hierarchy due to the contrast with other web page copywriting.

Although you can get creative with your web page headers, it's quite often the standard, simple fonts like Georgia, Helvetica and Futura which work best in these formats.  These fonts have become popular due to how the letters flow together. They are highly readable and won't leave your reader wondering what that title actually says. 

White space 

Managing the use of white space around your text offers the readers relief from all the information a user has to absorb from a web page. Concentrate on giving the reader the information they want, without cramming all the text you can into a space which can seem daunting to plough through.

Using images with your body text can also work well to create interest and accentuate your design. By using the image shapes, you can draw attention in an unusual format, creating a partition to your site without the use of a horizontal line or several breaks.  

Lines and borders

The use of horizontal lines or border-bottoms can create some really good effects. Not only does this let the reader know "this is definitely a title", but it creates a physical obstacle between the web page headline and body, stopping everything from blending together.

Unusual fonts

Decorative web fonts can really set your website apart from everything else out there, providing they are still practical. A creative web design with cool fonts can add character and create a mood for the whole site when used carefully. When I say carefully I really mean sparingly, as too many different fonts can become distracting. 

Limit the variations to no more than 3 under usual circumstances. When applied appropriately, they can be a fantastic site addition. If there is no consistency, users are going to find it a big distraction.

Your comments

Post has no comments.

Post a Comment

Captcha Image

Request a callback

Filter by category

Post archive

When I began my first start-up adventure, I knew that building a full-featured e-commerce site would be challenging, but Richard made it feel easy!

First and foremost, Richard is a talented designer, who was able to hear my vision for my site and then make it a zillion times better. I could not be happier with the site, which is beautiful, clean, user-friendly and professional.
While his design skills are superb, I will hire Richard again and again because he is an excellent partner.

As a non-technical solopreneur, I needed a designer who could work with - and manage - me. He is an excellent communicator, who made sure I understood and could anticipate what was needed from me at each stage of the building process. He is also a patient and willing teacher.

Thank you, Richard! I could not have done it without you.

What's next?

Get in touch with us today on 01865 522525 and let's kick-start your project.

Colour Rich custom website design

Web design trends in 2020

Wednesday, March 18, 2020

Web design trends in 2020Web design has changed an awful lot over the years. Most people would assume that web design is as changeable as fashion design - a constant flux of styles and trends which are hot one second and not the next. But, one of the biggest overarching movements within web design has been the growing dominance of focusing on user feedback to guide design decisions.  Read more

© Copyright Colour Rich. Privacy