Call us  Call us 01733 308198

email: info@grafixbiz.co.uk

Using typography to boost your web design

Typography in web design - trends for 2015Typography – the style, arrangement, or appearance of letters on a page – continues to play a big part in modern web design. After all, as beautiful as your website looks and as stunning as your images are, it’s the words you use to communicate your message that will really influence whether someone stays on your website or navigates away. And the font you choose can dictate whether or not someone reads those words.

Web design in 2015 is all about creating high impact, user- and mobile-friendly websites that clean away distractions and communicate a clear message about what’s on offer. It isn’t enough that the aesthetics of a font appeal to you in some way – the buzzword all web designers need to focus on when choosing the typography for a website is legibility.

Does your font choice make your content easy to read on any device or screen? If it doesn’t, it’s time to go back to the drawing board.

Every font has its own personality

Every font has its own personality – some are brash and loud, some entertaining, some classy, some understated. When choosing the typography for a website, it’s best to think about the personality you want to communicate and the message behind your words. Choose two or three (as a maximum) fonts that complement one another rather than having fonts that are likely to clash or, on the flipside, fail to make an impact.

There’s a great article on typography.com about combining fonts and understanding their personalities.

As a rule of thumb, it’s a good idea to choose two fonts from the same family and/or with similar traits that still look different. Choose one of the fonts as your ‘headline’ font – the one that sets the tone and personality of your site – and a second, stabilising font for the body copy.

In some cases, you may want to pick a third ‘display’ font, which is more creative, quirky or trendy. Display fonts tend to get used for headlines, calls to action or on image-based artwork.

Classic fonts are built to last

Although it can be tempting to opt for bold or popular new fonts, they can date your website quickly so you should use them with caution. Instead, you might want to go for a classic web font that includes regular, bold and italic in the set, as well as lighter and heavier weights of the same font.

It’s worth remembering that a font can look drastically different on different devices and on different browsers.

Typecast.com by Monotype is a free service that lets you check the rendering of your typography across different devices to help you create beautiful, readable content however it’s being viewed.

Current typography trends

Web designers need to keep up-to-date on the latest typography trends to ensure that your website looks and feels current. So what’s happening in website typography right now?

  • Modern serifs

Serif fonts are those that have a small line attached at the end of a stroke in a letter or symbol. Modern serifs are big news right now, although, far from being new creations, many of them date back to the 18th century or represent a modern reimagining of classic serif fonts. You can spot a modern serif thanks to its vertical axis and stroke width.

You will probably see modern serif fonts being used for large headers, although sites such as Vogue use serif fonts throughout for an elegant, stylish look.

Popular modern serif fonts include: Georgia, Leitura News, Cheltenham, Savoy, Grad, Sentinel, Plantin, Guardian, and Parkinson.

  • Lightweight fonts

Another big trend is the use of lightweight fonts – both serif and sans-serif – to give websites a clean, fresh feel. Lightweight fonts tend to be used for headings and should be fairly large for impact and to make them easy to read.

Popular lightweight fonts include: Code Light Free Font, Glober Thin Free Font, Aileron Ultra Light, Penna Free Font, BonvenoCF, Marvel, Roboto Slab, Wire One, Quicksand, Rosario and Open Sans. Many of these fonts are available in other weights too if you want to use two fonts from within the same family.

  • Increased letter spacing

A subtle but effective typography effect is to increase the spacing between your lettering. This can be achieved by editing the CSS file for your website to add the following code:

h2
{
letter-spacing: 2px;
}

A popular font for widely spaced lettering is Josefin Sans.

  • Slab serif fonts

In typography, a slab serif font is a type of serif typeface characterised by thick, block-like serifs that tend to have a bold effect that works well in headlines but less well as body copy. These fonts often have a late 19th century feel to them.

Popular slab serif fonts include: Tienne, Halant, Alegreya, Arvo, Bree Serif, Museo Slab, Podkova, and Roboto Slab.

  • Sans serif fonts

The popularity of sans serif fonts continues, especially for the body copy of websites. Although serif fonts dominated print until recently, the arrival of Helvetica saw a swing towards sans serif fonts, especially online. Sans serif fonts tend to be associated with no-fuss, minimalist and modern design.

According to Typewolf, the ten of the most popular sans serif fonts are currently: Brandon Grotesque, Proxima Nova, Apercu, Futura, Avenir, Gotham, Neuzeit, Franklin Gothic, GT Walsheim, and Circular.

Size and colour

Finally, the size and colour of your typography will have an impact on both its aesthetics and that all-important legibility. Even the best typefaces can get lost against their background if you choose the wrong colour.

The big trends for 2015 are big text, especially on headers, and multi-coloured headlines.

What are your favourite fonts? Have you spotted a typography trend that we’ve missed? Does your website feature a great use of typography?

Or do you need help deciding on the typography for your website? Give us a call on 01733 308198 and we’ll be happy to help you make a statement with your website design.

 

Using typography to boost your web design was last modified: by
Post Tagged with

Leave a Reply

Your email address will not be published. Required fields are marked *