25 April 2018

How Important is the Choice of Font for Your Website?

0 min read
How Important is the Choice of Font for Your Website?
Gavin James-WeirWritten ByGavin James-Weir

Gavin is Propeller's Lead Designer. Since joining the team in 2011, Gav has lead the way for innovating web design and UX for Propeller and client work.

The fonts you chose for your website affect not only aesthetics but also the usability of your site; they can strengthen the messaging of content, enhance your branding, help to define the hierarchy for longer pieces of content or simply give a good reading experience.

Every project will have its own requirements and there isn’t a “one-size fits all” font. A designer will prioritise the most important factors in determining the best font for each project.

Enhance your brand

You may have an existing brand or be in the process of developing a new brand personality. It’s important to keep brand consistency across digital and other marketing collateral and ideally you’d use the same font across all platforms, however, not all typefaces are suitable for use online.

Some older fonts were never intended to use online and are either aesthetically unsuitable or become illegible at smaller sizes. Others don’t render well or are difficult to read as body copy. Sometimes the best option may be to have a set of fonts for print use and a set of similar alternatives that you use for digital in order to maintain a good readability.

Legibility / Readability

Understanding legibility and readability

Understanding legibility and readability

A generous x-height (the height of the lowercase letters) rather than the font size is important when choosing a font for body copy. If the x-height is too small the typeface will appear smaller overall and the capital letters will have too much emphasis which interrupts smooth reading.

Equally, if the x-height is too high you won’t be able to easily distinguish between the capital and lowercase letters. An optimum generous x-height will allow the type to be set at small sizes and still be legible.When we read long copy we’re reading word shapes rather than individual letters; therefore, it’s easier to read words set in sentence case rather than all caps or all lowercase.

Sans serif v Serif

Some designers would argue that a sans serif typeface is more legible due to its open characteristics, however, serif fonts can help to define letterforms, specifically differentiating between ‘1’ lowercase ‘l’ and uppercase ‘I’.

The most popular typeface is Arial (according to bonfx.com/fonts–of-the-world/). It’s used by Google and is plain, simple, easy to read; however, from a style point of view, it’s lacking in personality.

A well-chosen typeface for body copy should have some personality but not so much that it distracts from the content or experience of reading; a further injection of personality can be added with display fonts. For short amounts of text, for example, titles or headlines, a display font can be used to reinforce brand direction or emphasise hierarchy of information.

Hand-lettering / Script fonts

Bespoke hand-lettering can give a depth of craft to a brand or an artisan quality but would need to be added to a digital project as an image. To create a handwritten look there are fonts which have been created from handwriting, some more successfully than others. It can add a friendly touch to a design although long sections of copy can become more challenging to read.

EXAMPLE: ZIZZI – USES HAND-LETTERING STYLE FONTS TO DRAW ATTENTION TO THE CALLS-TO-ACTION AND NAVIGATION

EXAMPLE: ZIZZI – USES HAND-LETTERING STYLE FONTS TO DRAW ATTENTION TO THE CALLS-TO-ACTION AND NAVIGATION

EXAMPLE: HUMBLE GRAPE – USES A HAND DRAWN FONT ON A LARGE SCALE TO CREATE IMPACT IN THE TITLES

EXAMPLE: HUMBLE GRAPE – USES A HAND DRAWN FONT ON A LARGE SCALE TO CREATE IMPACT IN THE TITLES

Weights

Type families such as Myriad Pro, designed by Carol Twombly and Robert Slimbach contain a variety of weights. These can be used to create hierarchy and pace in the design, by increasing the typographic possibilities. With a font which can be so varied by weight, one font can be used throughout the site and look very clean but still maintain interest.

EXAMPLE: MAINSTAY GROUP – MYRIAD PRO IN CONTRASTING WEIGHTS

EXAMPLE: MAINSTAY GROUP – MYRIAD PRO IN CONTRASTING WEIGHTS

Pairing

One typeface can be enough to say what you need to say, two can complement each other but more than that would need a reason – like trying to achieve a certain aesthetic, replicating a vintage poster for example. The most important part of pairing typefaces is to ensure that there are two distinct typefaces. Typefaces that are too similar can confuse a design’s visual language.

One of the easiest ways to quickly create balance and contrast in typography is to choose a serif and sans serif pairing. It can produce a cohesive look that emphasises the hierarchy of information.

Combining more than one display or script typeface is usually a bad idea. There are exceptions to every rule but these typefaces have so much personality that one is usually plenty.

EXAMPLE OF TYPE PAIRING: HELLO STUDENT - PORTRAIT TEXT WITH MR EAVES MODERN

EXAMPLE OF TYPE PAIRING: HELLO STUDENT - PORTRAIT TEXT WITH MR EAVES MODERN

Remember

The choice of font can set the tone of a website and improve the overall experience of reading the information. It’s an important decision and a designer uses their knowledge to pick the right one to enhance the company’s branding and personality as well as making the information presented easy to digest.

Read More

Product page design: Ten top tips

Product page design: Ten top tips

For eCommerce brands, where the real goal of the website is sales, the main focus must be on the product pages. In this article, we give our top tips on product page design for high conversion.

Read
Gavin James-WeirGavin James-Weir