Be The First To Know
Join Our Newsletter
Typography for Websites
Listen up, fellow designers- we can and absolutely should learn how to do typography.
The good news is, it doesn’t need to take years off your life or thousands of dollars to add it to your design toolbox, yet it can elevate pretty much every design you do from this point on.
How it does that depends on the kind of design we’re talking about.
Sometimes we’re aiming for something flashy and memorable, but when it comes to typography for websites, the goal is to be SO good it’s basically unnoticeable.
Well, for typography nerds like us, we’ll totally notice and appreciate a thoughtful design. But the best website typography design is so readable, accessible, and logical that the user doesn’t even notice it!
Readability
So many typographic elements factor into readability. So, let’s start by talking about the “Triadic Relationship.”
Hold up! Before you hit the 'back' button because this sounds a whole lot like math, don’t be scared. It’s actually super simple!
The Triadic Relationship refers to the harmony between type sizes, line length, and interline spacing; when you adjust any one of these three, you will be helping or hurting the legibility of your text.
You can learn to control all of these elements beautifully in our typography course online, but for now, let’s get the basics down. We’ll tackle spacing first.
Spacing
There are a few ways to adjust the spacing of your text.
‘Letter-spacing’ is about adding and removing spacing between letters. Often confused with kerning (which can’t be controlled in CSS), letter-spacing impacts the entire line of text.
And, ‘line-height,’ also known as leading, refers to the vertical distance between two lines of type. It’s measured from the baseline of one line to the baseline of the next.
Too close together and the letters can blur into one, or the eye might return to the same line over and over again.
Too far apart and the ideas being expressed seem less connected to each other which may lead to readers skimming right past the most important bits.
For body text, a spacing of 1.5 is recommended. For headings and between paragraphs, spacing should be greater. Start at 2.5 and make adjustments from there.
This is a great time to activate your inner Goldilocks and keep trying until you get it juuuuust right!
Line Length
Using the right line length is crucial, partly because breaking things up makes them literally easier to read, but also because the human brain is just so picky.
Because if someone rolls up to your site and sees line after line after line of text- they’re bouncing. Don’t make people read too much!
We tend to be most comfortable with lines made up of about 40 to 60 characters.
Any shorter and we get distracted by our eyes moving too much between lines.
Any longer and we might get bored or even lost, trying to travel back to the beginning of the text block for the next line.
This isn’t true for every person or for every type of content. There’s always wiggle room, especially when displaying your text on different types of devices.
Size
The ideal type size also has some flexibility. Generally, for body text on websites, you want to keep it between 16px and 20px.
Responsive typography automatically scales your text to the device that it’s being viewed on, so you’ll want to make sure that the style you’re using scales well.
Default styles are sometimes just fine, but using larger accessibility type sizes can make your content easier to read for everyone, especially on phones or tablets.
The Triadic Relationship makes for legible typefaces, but there are plenty of other things at play in readability like using common types, staying away from italic type if possible, and keeping it simple with as few typefaces as you can.
However, using different font sizes can create a logical flow to your content as well!
Structure
Now that we can physically read the page, we’ve gotta arrange the content in a way that makes sense and makes people want to keep on scrolling.
So, how do we do that?
Hierarchy
By breaking up our content into sections, of course! And breaking those sections up into smaller sections, and maybe breaking those up into even smaller sections... you get the idea.
Mostly, it tells us which paragraphs support which points so that we can jump to the information we want to know quicker.
Typography translates those different levels into an implied hierarchy through the use of different font sizes, font weights, and font styles.
So we get something like this:
When it’s done well, folks don’t give a second thought to which part of the page has the information they need—instead, their eye naturally figures it out because you’ve done your typography homework.
They come to the site, find the info they want, and leave knowing this is the place to be to get the right answers as quickly as possible.
In other words: they’ll be back and likely act on those CTAs.
Navigation
Typography for websites is not always static.
Having a clean, accessible user interface as opposed to a messy interface can influence how much time someone spends on a website.
We know a single page can be easier to navigate based on how clear the content is, paired with an easy-to-understand hierarchy. But is the website itself easy to navigate?
Does the text behave in a way that is to be expected?
For example, what happens when you hover over a link or click on a menu?
We suggest physically plotting out the interface before you start connecting everything on the site. Creating an accurate interface mockup for individual pages can guide your design and help you focus on a central vision.
Testing, Testing
Once you bring that vision to life and everything’s in place, don’t pop the champagne just yet!
You gotta test it out. Extensively. On all browsers and devices.
A little louder for those in the back- test your work!
Don’t take this step lightly- you worked really hard to get to this point and you want to make sure that your hard work goes “unnoticed” in the finished product.
Ready to learn more? Check out our free typography manual, and join our typography class online today.
Typography for Websites
Listen up, fellow designers- we can and absolutely should learn how to do typography. The good news is, it doesn’t need to take years off your life or thousands of dollars to add it to your design toolbox, yet it can elevate pretty much every design
Listen up, fellow designers- we can and absolutely should learn how to do typography. The good news is, it doesn’t need to take years off your life or thousands of dollars to add it to your design toolbox, yet it can elevate pretty much every design
Listen up, fellow designers- we can and absolutely should learn how to do typography.
The good news is, it doesn’t need to take years off your life or thousands of dollars to add it to your design toolbox, yet it can elevate pretty much every design you do from this point on.
How it does that depends on the kind of design we’re talking about.
Sometimes we’re aiming for something flashy and memorable, but when it comes to typography for websites, the goal is to be SO good it’s basically unnoticeable.
Well, for typography nerds like us, we’ll totally notice and appreciate a thoughtful design. But the best website typography design is so readable, accessible, and logical that the user doesn’t even notice it!
Readability
So many typographic elements factor into readability. So, let’s start by talking about the “Triadic Relationship.”
Hold up! Before you hit the 'back' button because this sounds a whole lot like math, don’t be scared. It’s actually super simple!
The Triadic Relationship refers to the harmony between type sizes, line length, and interline spacing; when you adjust any one of these three, you will be helping or hurting the legibility of your text.
You can learn to control all of these elements beautifully in our typography course online, but for now, let’s get the basics down. We’ll tackle spacing first.
Spacing
There are a few ways to adjust the spacing of your text.
‘Letter-spacing’ is about adding and removing spacing between letters. Often confused with kerning (which can’t be controlled in CSS), letter-spacing impacts the entire line of text.
And, ‘line-height,’ also known as leading, refers to the vertical distance between two lines of type. It’s measured from the baseline of one line to the baseline of the next.
Too close together and the letters can blur into one, or the eye might return to the same line over and over again.
Too far apart and the ideas being expressed seem less connected to each other which may lead to readers skimming right past the most important bits.
For body text, a spacing of 1.5 is recommended. For headings and between paragraphs, spacing should be greater. Start at 2.5 and make adjustments from there.
This is a great time to activate your inner Goldilocks and keep trying until you get it juuuuust right!
Line Length
Using the right line length is crucial, partly because breaking things up makes them literally easier to read, but also because the human brain is just so picky.
Because if someone rolls up to your site and sees line after line after line of text- they’re bouncing. Don’t make people read too much!
We tend to be most comfortable with lines made up of about 40 to 60 characters.
Any shorter and we get distracted by our eyes moving too much between lines.
Any longer and we might get bored or even lost, trying to travel back to the beginning of the text block for the next line.
This isn’t true for every person or for every type of content. There’s always wiggle room, especially when displaying your text on different types of devices.
Size
The ideal type size also has some flexibility. Generally, for body text on websites, you want to keep it between 16px and 20px.
Responsive typography automatically scales your text to the device that it’s being viewed on, so you’ll want to make sure that the style you’re using scales well.
Default styles are sometimes just fine, but using larger accessibility type sizes can make your content easier to read for everyone, especially on phones or tablets.
The Triadic Relationship makes for legible typefaces, but there are plenty of other things at play in readability like using common types, staying away from italic type if possible, and keeping it simple with as few typefaces as you can.
However, using different font sizes can create a logical flow to your content as well!
Structure
Now that we can physically read the page, we’ve gotta arrange the content in a way that makes sense and makes people want to keep on scrolling.
So, how do we do that?
Hierarchy
By breaking up our content into sections, of course! And breaking those sections up into smaller sections, and maybe breaking those up into even smaller sections... you get the idea.
Mostly, it tells us which paragraphs support which points so that we can jump to the information we want to know quicker.
Typography translates those different levels into an implied hierarchy through the use of different font sizes, font weights, and font styles.
So we get something like this:
When it’s done well, folks don’t give a second thought to which part of the page has the information they need—instead, their eye naturally figures it out because you’ve done your typography homework.
They come to the site, find the info they want, and leave knowing this is the place to be to get the right answers as quickly as possible.
In other words: they’ll be back and likely act on those CTAs.
Navigation
Typography for websites is not always static.
Having a clean, accessible user interface as opposed to a messy interface can influence how much time someone spends on a website.
We know a single page can be easier to navigate based on how clear the content is, paired with an easy-to-understand hierarchy. But is the website itself easy to navigate?
Does the text behave in a way that is to be expected?
For example, what happens when you hover over a link or click on a menu?
We suggest physically plotting out the interface before you start connecting everything on the site. Creating an accurate interface mockup for individual pages can guide your design and help you focus on a central vision.
Testing, Testing
Once you bring that vision to life and everything’s in place, don’t pop the champagne just yet!
You gotta test it out. Extensively. On all browsers and devices.
A little louder for those in the back- test your work!
Don’t take this step lightly- you worked really hard to get to this point and you want to make sure that your hard work goes “unnoticed” in the finished product.
Ready to learn more? Check out our free typography manual, and join our typography class online today.
.png)
.webp)
