How to

WEB FONTS: Spot a trend, choose a font, create great typography

Where do you look for the latest trends? What decisions do you need to make and how to get your body copy right. It’s not as easy as it seems.

webfonts

HOW TO SPOT A TREND

It’s a well known fact that many trends, whether it be colour, pattern, music, or even typefaces stem from fashion design.

Part of a fashion designer’s job is to see into the future as they design clothes people will want to wear, not this coming season – the one after. It’s how ideas filter down to high street shops. Most of the inspiration behind it is current culture, but designers are not adverse at going backwards to go forwards. Designers study what people are wearing and how, the music and art being made now to get a feel of the current vibe. Sometimes they’re far off, other times, just around the corner, but nine times out of ten if you look at a collection or an idea from a big designer this season, you can expect to see it everywhere in a year or two.

Colour group Pantone uses fashion as their reference for seasonal colour trends and we can do the same in type. The look currently on its way out is the stark, Gotham Black or Bold set in uppercase, from around five years ago. At present we’re deep into geometric and rounded fonts such as Circular or Sailec set in regularly capitalised case often seen around in a Windows default blue.

And next? I’m predicting more futuristic, digital looking fonts that represent a clean, modern efficiency. The example opposite is set in a very modern, square type. Watch out this will be everywhere soon.

HOW TO CHOOSE A FONT

1. WHAT’S THE MESSAGE?
Always start with the message. This informs everything in design – including the font selection. Ask ‘what’s the vibe’ and frame it as an emotion: is it excitable, sombre, relaxed or tense?
___________________________________________________

2. HOW HAVE OTHERS DONE IT?
There’s no shame in taking a long look at competitors and other brands or people doing a similar thing to see how they’ve elected to deliver their message. Try to prepare a list and highlight the good and bad points.
___________________________________________________

3. CREATE A MOODBOARD
Dont jump into the design yet, simply create a large canvas and start typing. Take the key words from the content and try it out in various different fonts – you’ll soon see which is starting to work best
___________________________________________________

4. TEST YOUR PAIRINGS
It’s usually good to select a couple of fonts at this stage. So look at headings and body copy separately. Check out www.typewolf.com for expert help and guides on which styles work well with other styles. 
___________________________________________________

5. TYPOGRAPHIC TWEETING
Finally, once typefaces are chosen, begin looking at how you can set it out on the page. Will titles be tracked out? Upper or lowercase? What size will everything be set in? Once done, start designing.

HOW TO GET YOUR BODY COPY RIGHT

1. DON’T MAKE LINES TOO LONG
Keep your line length between 35 and 70 characters. Anything over 100 characters per line starts to become difficult to read.
___________________________________________________

2. KEEP THE LINE HEIGHT RIGHT
Keep your line height around 1.5. Web designers tend to go overboard with line height – a larger overall line height may make your design look “open and breathable” but it hinders easy readability.
___________________________________________________

3. BREAK PARAGRAPHS UP
Avoid “walls of text” on the web. Online readers tend to skim more, so breaking paragraphs up into smaller chunks can make your content easier to digest.
___________________________________________________

4. KEEP IT NORMAL
Don’t set body text with a display face and avoid using the 100 or 200 weights that many fonts contain. The 400 weight (also known as normal, regular or book) is usually the best option for paragraphs.
___________________________________________________

5. ADD COLOUR, KEEP CONTRAST
Text can still be perfectly readable if it isn’t black on a white background—try experimenting with color. As long as you are using adequate contrast, you can create a stronger, more memorable brand.

×