News

How to pick the perfect headline font

Selecting the right headline font is not as simple as you might think. Check out these suggestions to find the perfect option

Build background transitions with CSS and JS

Screen shot 2014-11-26 at 14.40.54

The art to selecting the right headline font is having a good understanding of the subject and being sympathetic to the tone of the writing (or the company/brand). This is where your inherent skill as a designer or creative is required. You have to ‘feel’ your way through potentially hundreds of typefaces before you know you’ve hit upon the right one.

This is something that only improves with time, and the quickest way to get better at finding the right typeface is to do as much work as you can and to keep practicing. Each time you read an article, see a design or open a magazine, notice the font that’s been selected and how it relates to the subject. Ask yourself how you’d do it if you had the chance or how it has inspired you.

NO CODES OR PROTOCOLS

There are no hard and fast rules that must be applied to selecting headline type, but there’s a few guidelines that can assist in adding that touch of professionalism to your design. Focus on readability first (see previous page), test out lots of different typefaces, use a type testing tool like Typecast app, and ensure they also have the right feel for the design of the site.

TABLOID HEADLINES

If we look at newspapers for their approach to titles you’ll notice tabloids generally favour large sans serif, impact fonts set in uppercase while more traditional broadsheets opt for serifs set in lowercase. This comes back to the content; tabloid headlines tend to be more sensationalist with attention grabbing phrases, whereas broadsheets have more subtlety, which is reflected in the fonts they have chosen.

TWO LINE TITLES

If using all caps on titles, be sure to play with letter spacing in CSS to ensure the greatest readability. Also, if your design looks great with a title on one line, how might it look if titles are longer and run onto two lines, or more? Line height may also needs adjusting

GREAT HEADLINE FONTS

We’ve selected 4 top headline fonts that range from the old faithfuls through to the young upstarts of web type

FONT: Helvetica
TYPE: Sans serif
URL: www.fonts.com

No prizes for originality but it wouldn’t be right to not mention this milestone of design in an article about type. Helvetica is to type what black is to fashion – it goes with anything. Coupled with its vast range of variations from extra-light through to rounded bold, Helvetica gives instant gravitas to any design.

FONT: Glober
TYPE: Sans serif
URL: http://bit.ly/1vq61ap

Despite being a new typeface, Glober has an instantly familiar look with a wide variety of feels thanks to its 18 available weights (two of which are free). Based on simple geometric shapes, Glober’s modern design is also optimised for web, making it an ideal consideration if you’re after something a little different.

FONT: Baskerville
TYPE: Serif
URL: http://bit.ly/1tGCmry

For class and tradition you can’t go far wrong with Baskerville. It works as well in uppercase as it does in lowercase. While not ideal for smaller body copy, its unique characteristics, such as its beautifully distinctive capital Q and lowercase ‘g’, make headlines stick out a mile.

FONT: Adobe Caslon Pro
TYPE: Serif
URL: www.adobe.com

Simple, classic and inherently legible, Adobe’s Caslon has some of the most inspiring italics and small caps around that offer a real sense of calm to any page design. This face has a maturity about it that brings instant respect to designs across all platforms at varying sizes.

×