Why choosing the right typography for web design actually matters

In 2019, as we scroll through endless social media feeds and swipe through e-mails on our daily commute, it’s probably not something we often think about – the importance of choosing typography for web design.

What might be even less on our radar, is that there’s some science behind the ways the presentation of words can actually have an effect on how we feel. We’ll delve into that a little later.

Our simple step-by step guide, we will hopefully get you well on your way to finding the best fonts for all your future and personal web design endeavours.

Step 1: Functionality and emotion

Rather synonymous with the way our left brain is responsible for the logical, strategic structure of our lives, and the right favours handling the creative and emotive sides of all of us, so too should we think about choosing typography considering the following. And yes, expect more analogies as we take you through each step.

It’s also handy to mention that we’ve noted some of the key principles of web design in the digital age, which is a great starting block before deciding on typography in 2019 and beyond.

With the sheer volume of fonts available online, its easy to fall into a rabbit-hole of font browsing for hours.

In order to simplify the process, it’s good to ask yourself a couple of questions, before your gut-instinct begins to to take the wheel:

Is your typography functional?

It is always helpful to notice how practical your use of typography 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 and something new. For example, John Boardley hails Helvetica as: ‘The Sweatpants of typefaces’, so there’s still a clear argument that classic fonts are still readily in-demand by users craving 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. When you have strong typography, implementing vibrant colour schemes becomes simplistic and hassle-free. That’s what we did with the brand identity ‘space‘, which is shown below:

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.

Encompassing your brand identity with typography is something which can be done very successfully. It’s something we love working on too, which you can find out more about here.

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 inserting 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.

Applications such as What the Font by Typecast are also great online sources for typography…

Step 3 – Trial and Error

It’s important to see the forest for the trees when it comes to selecting and embedding fonts into your web design. Taking the time to test the functionality of selected fonts and how well they work in your site is essential. It’s a bit of a tedious process, but it will save you a lot of time when it comes to updating your web design! Once you’re able to identify and perhaps take a note the typography which worked well with your web design, and others which didn’t quite hit the mark – this brings us onto step 4.

Step 4: Making it personal

With these in mind, what are you wanting to emphasise with your chosen 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.

In our recent blog post highlighting the best web design trends for 2019, we discuss some of the best visual experiences users are loving this year, and it’s certainly something to think about when it comes to choosing your typography too.

Typography that works really well for one site, may prove to be ineffective for another. For example, if we look at the site We Ain’t Plastic, which adopts a minimalist and arboreous feel, it’s 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: Remaining flexible

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 using these web fonts in a way which allows for further flexibility in the future.

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. If your web design is heavily focused on the visual and graphic side of things, our work in graphic design might spark your imagination too when it comes to selecting font with imagery.

I guess you could say it’s easy as A-B-C, right?! Well, we certainly think so..

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.