The Forgotten Element in Web Design – Typography

As web design has advanced, it's clear that most design is driven by visually appealing and powerful imagery. However, we can't ever lose sight of the fact that typography is an essential element that holds effective design together. Typography is, quite simply, the art and technique of arranging type. It's central to the work and skills of a designer and is about much more than making the words legible to the viewer on the screen. The choice of typeface and how one makes it work in regards to layout, grid, colour scheme, design theme and so on will make the difference between a good, bad and great design.

 

Here are some elements to think about in regards to typography and web design.

 

Macro- and Micro-Typography
Macro-and Micro-typography are both essential elements in developing a typographic system. Macro-typography focuses on the overall structure of the type, how it is presented in the context of your site's layout, and it's general aesthetic in relation to the colour scheme, images and other website elements. Micro Typography is where the structure is fine-tuned and improved in regards to readability and appearance of text.

Font
There is an astonishing array of professional fonts to choose from. However it's important not to use too many in the one design. Limiting the use of fonts will create a clean and smart design for your website. The purpose of a font is to convey the character, asthestic or purpose of your content and website. Your choice of typeface needs to reflect the intention you wish to convey.

Size
All typefaces are not created equally. Some are fat and wide; some are thin and narrow. So words set in different typefaces can take up a very different amount of space on the page.
We generally recommend a font size of 16. Many may think that this is too big for a website, however it's important to remember when building a website that its purpose is business exposure, communication and to make money. Majority of people skim the words and text on a screen or page and so a decent font size allows the viewer to easily take in the key words and phrases.

 

Alignment

Alignment is an important consideration. The way you align and arrange your text on your site helps to guide your readers through the content and impacts on the time spent on each webpage, and the mood you are trying to convey. Traditionally, there are four types of font alignment. These are right, left, centered and justified.

Leading
Leading refers to the vertical space between each line of type. It's called this because strips of lead were originally used to separate lines of type in the days of metal typesetting.
For legible body text that's comfortable to read, a general rule is that your leading value should be greater than the font size; anywhere from 1.25 to 1.5 times.

Hierarchy and Scale
If all type was the same size, then it would be difficult to know what was the most important information on the page. In order to guide the reader, headings are usually large, sub-headings are smaller, and body type is smaller still.
Size is not the only way to define hierarchy – it can also be achieved with colour, spacing and weight.

 

Type Colour
Another important aspect to consider is colour. Sometimes, web designers fail to create enough contrast between the background colour and that of the text, essentially drowning the text and making it invisible. Black text on a white background creates the most contrast, but there are many type colour combinations that can achieve great results.

Consistency
Effective typography implements a set of guidelines used throughout the site, creating a simple hierarchy of messaging. Headlines, titles and calls to action all need to be presented consistently within the design. Failure to establish such a system can lead to a site looking and feeling busy and unorganised.

The important thing to remember is that in web design you are integrating brand messaging with design. A focus on typography to draw site visitors in and direct their attention to key elements in the layout is paramount to good web design. It's important for brand and navigation to be clear and easy to locate. Effective design will use typography to draw attention to “calls to action” and high-level brand messaging. Typography and the font-faces we choose has a huge impact on multiple aspects of web design including readability, mood, perceived article length, user experience and much, much more. With typography accounting for over 90% of the design, the relationship between the page, paragraph, word and letter all combine to create a pleasant relationship with the viewer, and guide the readers through the website.
To ensure all the elements of web design are present in your website and to make sure you are getting the most out of your brand/business online speak to the Central Coast Web Design Team and see how we can help with your web presence today.