Web Typography 101
Curated with love for the HackerYou community.
T ypography is one of the most powerful communication mediums on the web, and one that is far-reaching in our daily lives. It’s the voice of your design; a means of wielding wit and meaning in your written words.
As a junior designer and/or web developer, mastery of the basics of typography will serve you well; 90% of the information of the web is conveyed using typography.
Think of this article as a cheat sheet for injecting sexy, semantic, and legible typography into your next website. We’ll cover basic do’s and don’ts for formatting text to make your type treatments look ‘verrrrrrry niiiiiiiice.’
*Cue Borat voice*
Line height is a key tenet of text legibility. Tightly spaced lines of text can appear overwhelming to a reader. By giving your words room to breathe, you’ll give your reader (and your copywriting) a breath of fresh air.
Here’s a hot tip that ensures you’re giving your text enough breathing room:
Paragraphs become much more legible when they are short and sweet. Breaking up key thoughts into groupings of sentences makes your content approachable and digestible for readers.
Similarly, avoid dense text that stretches like a horizontal horizon line, spanning the full width of your website’s primary content container.
Countless heat mapping studies have shown that readers are much more likely to read written content when it is displayed in compact columns.
It’s widely understood that in most cultures, a reader’s natural reading pattern is directed from left to right.
Another key learning from heat mapping studies is that many readers scan the left margin for content clues. Therefore, left-aligned text is favourable because it follows the reader’s natural optical patterns.
When selecting a font family for your website, look for fonts with multiple weights. This gives you a number of possibilities for text formatting, and is a better solution than using multiple font families due to shorter page load times.
Letter spacing is one of my favourite tricks for adding a touch of .class to mundane paragraph headings.
The good news: you have a mind-blowing amount of options to choose from.
The bad news: you have a mind-blowing amount of options to choose from.
Font libraries are a dime a dozen, and more fonts are available to you than ever before (many of them for free). This paradox of choice can be overwhelming. With great power comes great responsibility.
I’ve listed some of the most versatile Google Font pairings to help you get started on your path to wrangling the wonder that is web font pairing.
May the font force be with you.
Libre Baskerville on Google Fonts
The following are some of the resources I’ve been inspired, educated and enlightened by over the years.
100 Days of Google Fonts — A project by Doo-Hoo Kim
Thank you for giving this a read!
The possibilities for typography on the web are virtually endless, but my hope is that I’ve armed you with some basic tips and tricks for harnessing this powerful medium of communication.
Questions? Typographical emergencies? Tweet me at @andreacrofts.
