“Happy type” is a phrase that many designers take for granted, but what makes type “happy”?
Happy type means that when someone comes to your website the type should make them… feel happy, whether that’s in a literal sense or in less obvious ways. The type should be legible, accessible, beautiful, and ring true to the personality of the client or business that it represents. It should be effortless to find what you are looking for, and shouldn’t get in the way of whatever pathway your user is going through.
A number of factors help make happy type, and here are just a few:
Headings
When you use headings properly, this helps people find your website through search. Every page should have one H1 (Heading One). This helps people find you when they are searching for what your website offers, and also helps them make sense of the content on that page.
Past H1’s, we use a technique called nesting. For example, if your H2 is the main topic you are discussing, the H3 would be a subtopic within the H2. Headings in general also help the visitor to quickly scan and find that they are looking for easily.
Content (on a technical level)
You need content to make typography happen… literally. In this context, content means strong headings, subtitles, body copy, captions etc. You can have all of the beautiful typography in the world but without good, impactful content your typography can’t do its job. Content and good typography work together to communicate the appropriate message to the desired audience.
Contrast (Matt Satchwill’s Rule of Three)
Contrast means both visually making your typography different enough from its background in terms of colour and size, and making the levels of hierarchy different enough from each other.
Our good friend Matt Satchwill came up with the rule of three—to differentiate 2 different things, you should change 3 things between them, including: weight, size, spacing, colour, visual attributes, etc. This is all necessary to make sure the audience knows what the different levels of hierarchy are, so they can find what they are looking for more easily, and scan the content more quickly.
A quick note on type colour: here at Kobot we don’t like to use pure black as part of our colour palettes because it’s too harsh on the eyes. Instead, we use (and you should too!) a really really really dark grey OR a really dark version of another colour in the brand. BOOM. Branded.
Size
Size has to be considered in making sure the typography on your website is accessible. I am a huge lover of tiny type, while Bryan is a big fan of BIG type. My love for tiny type unfortunately cannot be pursued on the web…for the most part.
To make sure your typography is accessible for everybody, it needs to be large enough to read. Usually, this is 21 px or larger on desktops (mobile is another story). Size should also be considered when designing out the styling of your headings and hierarchy levels. The different sizes of your headings should be obvious for the audience visiting your website. Depending on the client, you can use type in multiple ways to enhance the experience of the website, whether this is using animation to warp the type in certain ways, using type as image, using HUGE type to amplify a message, etc.
White space
A designer’s favourite phrase, amirite? In regards to type, white space can mean the space between the lines (leading), the space between the characters (kerning), the space between the headings and the body copy beneath it, or the spacing around the blocks of content—lots of space talk.
You don’t want to suffocate your audience with dense blocks of type, give them some breathing room!
Choice of typeface
This depends on a number of factors. How do you choose the right typeface? There’s no 100% accurate way to do this. But you can take a few things into account to help you make an informed decision.
First, branding. Does the brand that you are working with have specific typefaces they are using? They should. Does the brand you are working with have specific web fonts that they use for the web only? A lot of brands do have secondary web fonts to use. If possible, you should also take a look at any other promotional materials they have and see how they are using the typefaces, this can help you keep the brand consistent throughout the website.
Usually, you can portray the most personality through the typeface you choose for the headings. This is because headings are, for the most part, larger and bolder than the body copy. This is not to say that body copy can’t hold meaning and personality—because it definitely can and does! The better, higher-resolution screens that are now on most computers give us the ability to choose some very detailed high-contrast typefaces, that we weren’t able to use a few years ago.
Pairing Type
When choosing what typefaces to pair together, at Kobot we usually don’t use more than three. Going back to the rule of 3 that we talked about earlier, the typefaces you choose should be different enough for the audience to differentiate them. For example, pairing a sans serif with a serif? GREAT! Pairing two similar sans serif typefaces? Not so great. Also take into account that even though you are a type nerd and can see so many differences between these two typefaces, the audience that you are targeting probably won’t be able to see these. It’s a shame, I know. Why can’t we all be type nerds?!
. . .
SO. Happy type?! What it all comes down to is: what are you trying to make the audience feel when they come to your website? What message are you trying to get across? The typefaces you choose, the size you make them, the colours you use, the space you give them should all match this vibe, and enhance their experience. Hopefully you can take these things into account next time you’re making some happy type decisions! BOOM happy type.
This blog post is based on a recent episode of Ask Kobot Anything, our weekly Instagram Live where we let you ask us, well…anything! Questions or comments about this post, or just want to see something discussed on the show? Email us! Check out our Youtube for more past episodes. And catch Ask Kobot Anything every Friday at 11:30 MST on our Instagram.