02 Sep Guide to Typography and Pairing Fonts for Web
Understanding typography is essential in order to offer your products and content as clearly and effectively as possible. Typography expresses hierarchy and brand presence, and organizes information in an understandable way. Typefaces elicit emotion and communicate different identities, which creates connections with different audiences. Choosing the right typefaces will help distinguish your brand, as well as connect your brand or product with your desired audience.
Think about your brand, values, and the messaging you wish to convey with your product, service, or user interface. Is your product fun and lighthearted or stylish and editorial? Is your content geared toward business professionals or free-spirited creatives? A website or app’s typeface can set the personality of the product or service, and affect your customers’ overall experience, so it’s important to understand typography as one of the components of branding.
Type Categories
Each typeface evokes different emotions, so choosing appropriate typefaces for your messaging and branding will provide greater connection with your audience. Below you will find a broad overview of characteristics that often accompany different kinds of typefaces, but ultimately each typeface will have its own character.
Serif
Serif typefaces get their name from the lines at the top and bottom of the stroke in a letter. They originated in the flourishes of hand-written calligraphy, and first appeared in print in the 15th century. Serif typefaces generally communicate a message of tradition, respectability, reliability, trust, and sophistication.
Sans Serif
Sans serif typefaces are without serifs and pair well with serif fonts. They originated in the 19th century, and are defined by their clean, straight lines. Sans serif typefaces convey modernity, simplicity, and honesty.
Script
Script typefaces are typically best used for accent text and short headers, depending on the project or application. Avoid using script fonts in body copy as they can affect legibility. Characteristics of script typefaces include elegance, creativity, and uniqueness.
Decorative
Decorative typefaces can be great used in logos or short headers. They are often fun, creative, and playful and communicate qualities of uniqueness, and originality.
Choosing The Right Type
Body Text
A good way to start your search is by choosing a typeface for your body text first. The typeface needs to be legible and readable, with a generous x-height to balance out the size of the characters. Also consider a typeface that has low stroke contrast to improve the flow of reading, and even letter spacing to keep a steady rhythm for reading. These fundamentals will enhance your body text for optimal reading. For greatest readability on websites and product design, it’s best to use a serif or sans-serif typeface for body copy, leaving decorative or display typefaces for headings and short copy.
Styles & Weights
Make sure that your typefaces have at least 4 different styles and weights: regular, italic, bold, bold italic, to allow for ample options when creating visual hierarchy and composition on the page.
Connecting With Your Audience
Choosing the right typefaces for your brand, website, or interface will help communicate the emotion necessary to reach your target audience. Investing in quality branding design will ensure your brand stands out amongst the competition, effectively communicating your messaging and values to connect with your audience, while building brand awareness and engagement.
Resources:
- Google Fonts
- Adobe Fonts/Typekit
- H&FJ
- Klim Type Foundry
- Professional Web Typography
- Upping Your Type Game
- Fonts In Use
- How to Make Your Own Logo
This is a guest blog post by Heather Rieder. Heather Rieder is a Visual Designer and fellow female entrepreneur specializing in Branding, UX/UI Design, Illustration, and Webpage Design. Her goal is to create meaningful user experiences following a human-centric design approach and utilizing strategic design solutions to develop and create intuitive ecosystems for mindful design. Stay in touch with Heather at https://heather-rieder.com/.