The goal for any brand is to create an experience which resonates with customers emotionally so that they keep coming back to your product time and time again. Designing compelling branding is now more important than ever. As I’ve touched upon in a previous Path Forward article branding is made up of several components: logo, colour palette, texture, imagery, tone of voice, animations, customer service, typography and pretty much any other brand touchpoint. Today we are going to dive a little deeper into typography.
- Learn the difference between font, typeface and typography
- Find out how different type reflects different personalities
- Compare real-world examples of these personalities
What the font!?
Have you ever had an encounter with a designer who started to talk about fonts, typefaces and/or typography? Did it all go over your head? Why are there so many terms for fonts? What do they all mean? Fear not, I’ll break down these terms very clearly so next time you encounter them, you’ll know exactly what they mean.
Put simply, typefaces are families of fonts and these families consist of several different variations of a font, which can have different weights (thickness of the font), be condensed, italicised etc. Take a look below...
Helvetica Neue is a typeface
Helvetica Neue Regular is a font
Helvetica Neue Bold is a font
Helvetica Neue Italic is a font
So what about typography? Put simply, typography is the way fonts are displayed. It’s the combination of different fonts within a typeface or typefaces that give hierarchy and personality to your text.
“Remember, typeface is the family, while fonts are the family members and typography is how those fonts are arranged and displayed.”
Deciding which fonts to use for your branding has implications on how your whole brand personality will be portrayed and the way those fonts are treated (large, small, italicized, underlined, colour, for example) will further influence those perceptions. Past studies (here’s one from 2006) on fonts have concluded certain typefaces match certain personality traits and this is where your brand personality will start to take shape. Let's go over a few of the basic typefaces and fonts and see which traits match each typeface.
Common Typeface Types
Serif: Formal, trusting, mature, prestige, highly legible
COMMON USES: Headlines, body copy. Very versatile
The reason highly legible Serif fonts lean to a more mature and formal tone is due to the fact Serif has been widely used in literature for centuries. It’s been seen in so many important books over that time that people associate it with being trustworthy, educational and authoritative. It’s traditional and people trust history. Use serif fonts if you want to be perceived as trusting, educated, authoritative or experienced.
Sans serif: Informal, agreeable, modern, chic
COMMON USES: Headlines, body copy. Very versatile
Even though Sans Serif fonts are almost as old as Serif typefaces it brings a totally different tone to the table. It’s seen as a little more informal and definitely more modern than Serif. Sans Serif fonts can project a more approachable tone with slender and smooth curves. Sans serif typefaces like Helvetica and Arial tend to be more neutral so if you’re looking for more personality and distinction make you search for a font that has a little more character.
Slab Serif: Sturdy, strong
COMMON USES: Headlines, body copy
Use a bold Slab Serif font for headings if you want show strength of character and confidence. These fonts gained popularity in newspapers in the 1800’s to help grab attention particularly Courier, which was used on the first typewriters. Slab Serifs have good legibility with a tone of confidence and a hint of ruggedness depending on the font you choose.
Script: Typically formal, elaborate, special
COMMON USES: Invitation headlines, decorative applications
Script typefaces are often seen as formal and elaborate with their swooping and overlapping curves. You’ll see these kinds of typefaces used on invitations for weddings, charity events, masquerade balls, etc. They carry a weight of importance and prestige but can become overwhelming and impractical if used too much because legibility becomes an issue. Be careful to only use these in a larger size as legibility will suffer a lot.
Handwriting: Personal, creative, unique
COMMON USES: Headlines, blurbs, signatures
When you use a handwritten typeface it gives your brand personality a very custom and personal tone. If you’re looking for just a hint of personal uniqueness use these typefaces in moderation. Heavy use of these typefaces can skew the tone into one which is very playful and childish, so use sparingly if that’s not how you want customers to view your brand.
Font Treatments and combinations to consider
Picking typefaces from the core groups above will help you get your brand personality off the ground but there are also font treatments to consider. These include;
- ALL CAPS
- all lowercase
- Tightly or loosely kerned (space between letters) Digital term for kerning is letterspacing.
- Size, leading (space between lines of text) Digital term for leading is line-height.
All of these treatments help and add on to the tone you are trying to create.
Then there are typeface combinations to consider. For instance, using a serif with a sans serif font will help give your brand a modern feel with a touch of experience and maturity. Pairing a journal handwritten font with a rugged slab serif may give your brand an adventurous tone while pairing a script font with serif font will no doubt give you a prestigious and formal personality.
Let's take a look at some examples to get a better sense of how type treatments and combinations can affect each typeface we talked about above.
The font of the Big Youth digital agency site uses a bright, italicized, all lower case, underlined serif font that dominates the landing page. The lowercase treatment helps give an approachable feel because it’s less formal, while a feeling of movement is given off by the italicisation.They use a bright colour that’s strong, energetic and inviting. Just from the font and treatment of these 3 words I can gather that an energetic, friendly team of designers want to help me move my product forward. It’s a great first impression without even meeting the team.
This site is a good example of using a single Sans Serif typeface. By varying the size and boldness of fonts in the same typeface you can really achieve a consistent tone. The typeface used here is Walsheim, which gives off a very modern and approachable vibe. There is clear hierarchy on this page and the use of all lower case on the button “about us” is a great example of keeping the tone informal.
The Draft site uses a bold handwriting font splashed across their landing page to help give off a bold and original tone. The ALL CAPS and size shouts they love what they do and you get the sense they start every project by sketching just from this one font, which also plays off their company name, Draft. The handwritten font along with the soft inviting blue also lets users know they can expect a hands on, collaborative approach to their work.
Sans Serif - ALL CAPS
The JD & Co site uses an ALL CAPITALS sans serif font to draw your eye in. Going ALL CAPS brings a little bit of strength and authority to the copy. You’ll notice further down the page they start using Title Case for the headlines as to calm the tone. It’s always best to use ALL CAPS in moderation for that reason. NO ONE NEEDS TO SHOUT EVERYTHING ALL THE TIME. They have hit the right balance of strength and approachability here.
This is great example of a handwriting font because it’s truly custom and used sparingly in a breathtaking way. It’s dominant and so ornamental that it instantly draws your eye right to it and it reflects the artist's specialty of illustration, which helps strengthen her proposition as a first rate illustrator.
Sans Serif / Serif combo
Here, large, bold, red ALL CAPS sans serif font draws your eye in while also giving the sentence a heavy weight. This is contrasted with a serif font that helps give an academic feeling to the site. With a bold, strong, weighty headline material backed up with academy style body copy you get a weighty, historical tone with a flash of modern storytelling.
On the outside, type can seem like such a small aspect of your already heavy workload. You’ll have so many different things to work on while building your company but hopefully now you can see, by diving a little deeper, there is a real benefit to choosing the right typeface. There’s a fine line between being personality-less and bland vs engaging and on brand. Take a little extra time to think through which typeface or fonts match the personality of your brand. Remember though, typography is just one piece of the puzzle in completing your branding. You’ll need every piece of the branding puzzle (logo, colours, texture, imagery, tone of voice, typography, animations, etc) working together to deliver the brand experience that’ll help differentiate you from the pack.
Your customers will notice and it’ll help you build a truly trustworthy and respected brand along the way.
BONUS TIP - REMEMBER FONT USAGE RIGHTS
The last thing you want is to choose the perfect font, implement it on your site or product then be sued for not having the right of usage for it. Be aware that all fonts will have an End User License Agreement attached to them and depending on the specific EULA you could see certain typefaces restricted for print use only or web use only. Some even restrict use to certain geographic locations but those are extreme and rare. Read more about licenses here to learn in detail.
Google Fonts - Directory of FREE web fonts to use. Ideal for startups.
Adobe Typekit - If you are subscribed to the Creative Cloud you can access and use this directory of desktop and web fonts.
Font Squirrel - FREE directory of fonts for print, apps, websites
The Designers Foundry - Very high quality fonts for very affordable prices.
Canva Font Combination - Find fonts that pair nicely.
Type Anything - Font combination discovery