Is it functional?

When choosing typography, it is always helpful to notice how practical it will truly be for your web design. Asking yourself ‘Is this readable?’ sounds like an obvious sentiment, however top designers still struggle with the balance of finding unique, custom typography, which provides the clarity that classic typeface choices have provided people for decades. For example, John Boardley hails Helvetica as: ‘The Sweatpants of typefaces’, so there’s still a clear argument to be had that classic fonts are still readily in-demand by users which crave the familiarity and usability of them.

Kevin Larson, a Psychologist from the Microsoft team, conducted a study into the ways in which typography and the way it is presented has an effect on readers and their engagement with text. He presented two different versions of an article written by The New York Times to two separate groups of 10 people.

• Group 1 were given a clear, well-formatted page of writing, with font pleasing on the eye and definitely getting brownie points for its presentation.
• Group 2 were handed a poorly-formatted page of writing, which resulted in frowning, frustration, and taking a considerable longer time for the group to digest the information.

Meanwhile, the participants who read content from the good reading layout, felt like it took less time to read and felt better.

Treating the presentation of words carefully, and thinking about elements such as formatting and spacing really can make all the difference for your web design clients. In 2019, with our attention occupied by screens and information each and every day, it’s all the more important to really make text stand out and attract clients.

What feelings do you want to evoke?

In the words of veteran Graphic Designer Paula Scher, ‘Words have meaning, type has spirit’. Creating an ’emotion’ or a  ‘feeling’ with typography, is a great way to create a unique experience for your client. Using fonts to tell a story is a thoroughly effective way to communicate your web design ideas to your audience, especially in an age where trending large-scale photography often takes centre-stage. Some examples of how web designers have implemented fonts which captivate an emotive response, are Creative Doc, which presents an impressive, dramatic and page-filling type-face heading. Using size and boldness to dominate a home-page can also embolden clients to interact with the site more. With a design layout asking the viewer, quite simply – ‘look at me’ has been captured by Creative Doc in such a brilliant way. Similarly, Van Holts Co showcases a dramatic, action-packed design and evokes sense of fluidity too.

Step 2: Fonts – To buy or not to buy

So you’ve established what you’re wanting to ‘say’ to your clients, and now it’s time to think about implementing these fonts into your web design. Although it’s tempting to splash out and purchase the latest custom font designs on the online market, this may not be the best path for everyone.

In this step, we’ve highlighted some of the pros and cons of both free and paid custom typography tools online. There are also some apps available to help with your search too.

Typecast by Monotype

• simple, easy-to-use interface
• brand-focused and great for web design
• Heavily focused on accommodating websites, which rely heavily on literary information
• Can export production-ready HTML & CSS to share by URL

MyFonts (WhatTheFont!)

• Interactive ‘drag-and-drop’ method of selecting fonts / themes for web design
• Allows you to add a picture with a font you’re inspired by and it will generate fonts to choose from
• Personal and creative approach to typography which lends itself to web designers specifically
• Prides itself in the balance between visual web design and typography and presenting a coherent design

Step 4: Making it personal

With these in mind, what are you wanting to emphasise with your chosen web design typography ?

Whatever tools, paid, unpaid or subscribed fonts (which can be found on sites such as Font.com), it’s always good to remind yourself that no one font fits the bill for every site. Although top designers and creatives in the field heavily rely on type-faces: Helvetica, Trajan, Garamond, Futura and Bodoni to name a few – individuality is key.

Another aspect of choosing typography from the above applications is focusing less on the popularity or trendiness of new fonts, as eye-catching as they are. But going back to step 1, and reflecting on what exactly you as a web designer want to present to your clients keeping functionality and creativity at the fore-front of your creative process.

Font for one site may function may be really ineffective for another. For example, if we look at the site We Ain’t Plastic, which adopts a minimalist and arboreous feel, its an effective result of using simplistic fonts for a portfolio, which can be found in places such as Google Fonts. Something like this design is perfect for a portfolio neatly displaying a work and academic profile, but would perhaps not be as appropriate for a site, which is heavily devoted to sharing media such as photography and film – it would probably seem bare in comparison.

Taking a glance at highly visual websites such as Pittori di Cinema, with its rustic and clearly custom typography heading typography –  the main body of the site is however, reminiscent of Crimson font, which is a highly versatile font found in thousands of websites. Playing around with the different ways we can present information is really just about selecting which key components you want to personalise more than others. We see this a lot in websites, not just with typography but also in the way we position elements themselves. Choosing a fantastic font can be a fundamental your web design layout and can leave a lasting impression to clients too, the more immersive the better.

Step 5: Keeping up-to-date with trends and remaining flexible

With hundreds of fonts to choose from online, it can be hard to really pick apart what typography consumers are interacting with the most. Whether you have embedded a free font to your website or you have purchased a bundle of web fonts to implement into your new web design project, you’ll want to make sure you are implementing these web fonts in a way which allows for further flexibility in the future.

In this step, you’ve selected your desired typography for web design, you’re perhaps now wondering how to use the font which is right for your web design specifically. And this takes some trial and error, the process of embedding the code into your website (which is very simple with free font engine providers) and testing whether it presents what we talked about in step 1.

Some key things to remember from the embedding process to testing typography and font in your website:

• Don’t throw all of your fonts into one basket so-to-speak, play around with custom fonts highlighting things such as headings in order to attract clients
• Keep it simple, if you’ve chosen a font which is unique and eye-catching, think of where you want to lead clients towards in your site e.g. blog, contact details or an enquiries page
• Don’t be afraid to update your selected typography choice as time goes on, take inspiration from large brands such as Pinterest, Spotify, Airbnb and Burberry to name a few brands who have updated their typography in recent years

Taking into consideration these five simple steps in choosing the right typography for your web design, you’ll be well on your way to presenting writing which will attract, captivate and inspire your clients on all of your web design projects in the future.