Developer’s Basic Guide to Typeface: Part 2
The initial visual impact of a project is paramount to its success, thus why type and design can be a great way to communicate a message. In most instances it can be useful to pair a striking header font with a small and simple body font. Font pairing isn’t a science and is subjective to the project, designer, and brand. Like most things in life there’s a fine line to walk; by following some basic typeface guidelines you can ensure that the project will come across to readers fluidly.
Pair a serif with a sans-serif
A good and simple place to start is to pair a serif type face with a sans serif creates a distinct yet clean contrast. Using 2 serifs or 2 sans serifs can often come off awkward because they are too similar yet not the same. Same rule goes for scripts or slabs.
Differentiate with size
Font sizes are by far the easiest way to differentiate a title line from the body text. Not only is this paramount to a basic outline of an article but sizing can be used boldly or subtly depending on the severity of the subject matter. Find harmony by with a black or slab font as a header and a light font for the body. Similarly, using one single font with different sizes creates a simple yet powerful image.
Consistency!
Try to only use a few type faces in one project, ideally three at the maximum. Assign each of these typefaces a job, i.e. one for the header, one for the body, one for subtext and so on depending on the project that you’re working on.
Don’t use two distinct fonts
If you find a bold and exciting font for your title line allow that to become the memorable aspect of your visual brand. The body and subtext of your project should remain smart and simple, to support the main text. This way, the viewer has less to process visually, allowing them to focus on the subject of your work.
Contrast
Contrast in fonts and layout is good, but do so tastefully. It’s important to be mindful of the boldness and kerning of a title line compared to the subtly of the text of the body or subtext.
Match your message
By complicating your fonts throughout your project you complicate your message. Match the mood of your content the mood of your typeface. You wouldn’t use the same tone inviting someone to your child’s birthday party as you would telling someone that if we don’t reduce greenhouse gas emissions by 45% in the next 12 years, the damage will be irreversible leading to more frequent and deadly natural disasters, higher death rates and health concerns, higher sea levels, and much more.
Take the same approach when picking your typefaces.
Using typeface as a way to convey a message is an often overlooked aspect of design and front end development. Developers often don’t have time or skills to create logos and branding. By using some basic typeface pairing, you can easily take a site from 0 to 100!
