Web Typography 101

Andréa Crofts
Apr 26, 2016 · 5 min read

Curated with love for the HackerYou community.

Image for post
Image for post

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.

Image for post
Image for post

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*

Image for post
Image for post

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:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post

Letter spacing is one of my favourite tricks for adding a touch of .class to mundane paragraph headings.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post

Karla on Google Fonts

Libre Baskerville on Google Fonts

Image for post
Image for post

Roboto on Google Fonts

Cardo on Google Fonts

Image for post
Image for post

Montserrat on Google Fonts

Yeseva on Google Fonts

Image for post
Image for post

Oswald on Google Fonts

Vollkorn on Google Fonts

Image for post
Image for post

The following are some of the resources I’ve been inspired, educated and enlightened by over the years.

Image for post
Image for post

Typewolf Google Font Roundup

Image for post
Image for post

100 Days of Google Fonts — A project by Doo-Hoo Kim

Image for post
Image for post

On Web Typography — A Book Apart by Jason Santa Maria

Image for post
Image for post

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store