Design process: Picking a font

Picking a font

When I select fonts for projects I tend to use Google Fonts. The collection is free to use, available to download and works across the web.

Gone are the days that websites could only use system fonts that come with computers. OK, in 2020, email is still an issue but pick a similar fallback and go forth with your edgy font selections.

Google fonts

Visit Google fonts and set some parameters based on what you think you need. Need something modern? Pick Sans-Serif. Something more traditional? Choose Serif.

You can enter some text like a brand name and then scroll and browse through thousands of fonts.

Set your own font for maximum context

You can create a short list of fonts as you cycle through them and they’ll be available to you for a quick review.

I build a shortlist of fonts that I like and then review and delete them to pin point a shorter list.

Google fonts and short list
Create a shortlist as you go

Pair your fonts

One of the best features of Google Fonts is the insight they can provide from their own usage. They can provide suggested pairings so you can select a body font to match your feature font.

Font pairings based on real usage

How to use Google Fonts

When you’re ready, the easiest way to use these fonts differs depending on the medium.

Using it in a website? Just load the font direct from Google.

Link to the font in the head of your HTML then just reference it in your CSS.

If you’re using it in design software or in a Word document, you can download it and install it on your system.

How to install it on your machine

If you’re a Mac user, then install Sky Fonts. It’s better than your built in Font Book and will keep your fonts in sync.

Download and install Sky Fonts

You can install Google Fonts using Sky Fonts, just follow these instructions (once Sky Fonts is installed)

  1. Visit the Google Web Fonts page
  2. Select ‘Browse Google Fonts’
  3. Search for the font you want to install
  4. Select ‘Install entire family’

The font will install and be in sync on your device, it will be available to use in your design software.

The next post will take the colours and fonts from the previous posts and attempt to combine them in some initial designs.

About Andrew Smallwood

Experienced digital strategist with a foundation in web development and analytics. Leads multi-disciplinary teams in content creation and digital marketing ensuring data is at the core of decision making.

Posted in:

Leave a Reply