Table of Contents
Creating perfect web typography is important for success in today’s digital world. There is abundance of websites focusing on use of imagery and videos. Where number of these website fall flat is web typography. The truth is that some designers ignore this piece of design and focus just on making everything “pretty”. Pretty design and imagery will not safe user experience if web typography is ignored. In this article, you will learn about six simple secrets to fix this. Use these secrets and turn web typography into one of your strengths!
Elements of web typography
Let’s start this article about web typography by taking a look at the most often used elements. Content of every website, or almost every, is composed of some body copy and headings. From the point of headings, you can go from h1 and h2 to h6. In case of the body copy, the majority of content will probably exist inside simple paragraph (p element). Some people also like to wrap text in plain divs. I think this is not a good idea. Anyway, this is usually the bare minimum you can find.
What if we decide to make our content richer and move beyond this very strict palette of elements? Then, we will get much broader pool of elements. We have along with headings and paragraphs, we can use lists, strong, emphasis, abbreviations, blockquotes, acronyms, marks, small text, links, pre, code, cite, sub, sup and so on. We could spend a lot of time just talking about all these and other elements. However, this is not what is this article about.
Whether you want to use all these elements or just a few is up to you. This decision will also depend on the project you are working on. I wanted to just briefly mention all these elements. My hope is that this will give you some idea about available elements of web typography. All these elements can help you create perfect digital design. I also wanted to make sure that you are familiar with all options. Many people think about web typography only in the terms of headings and paragraphs. Other elements are completely ignored which is, I think, bad.
No.1: Start with body copy
The first secret of perfect web typography is in perfecting the body copy. When we talk about body copy, we talk about the text in paragraphs or, yes, divs. You can have beautiful website with immersive experience. Yet, if body copy is not legible or readable, it doesn’t matter. Your design will never work. What’s worse, overall user experience will never reach its full potential. Let’s now focus on the two terms mentioned, legibility and readability. We should start with definitions.
Body copy and legibility
The first term, legibility is about type’s ability to be easily read. This assumes that we are in normal reading conditions. Meaning, we have sufficient light and are not too far from the screen. As a measurement, legibility helps us specify how easy it is to recognize one letter or word from another. It also helps us find out whether paragraphs of text are easy to read or hard. We can say that, on the scale from zero to 10, 10 is perfectly legible while zero is not legible at all.
The more legible the text on the website is, the faster users can read the content. Content with lower legibility is more demanding on your eyes. The reason is that, when the text is less legible, our eyes have to work harder to decipher the letters and words. Otherwise, we will not be able to make sense of them and understand the information they convey. This fact also suggests one important characteristic of legible text.
How to spot good legibility
Legible text is almost invisible. What I mean is that legible content is so easy to read that it shouldn’t tire your eyes. Well, reading will always make your eyes tired at some point. However, it should not be after reading one or two paragraphs or sentences. Legible text is so clear that your eyes have to wait on your mind to be ready for more. In other words, the more legible the type is the less you notice it when you read the words. Reading legible type is effortless. It is smooth and pleasant experience.
Body copy and readability
The second term was readability. Readability is about the whole experience of reading the content. It is about the aesthetics of the content. Yes, web typography can be beautiful. Readable content should seduce the user to start reading it. Content with high readability is well formatted. It doesn’t have paragraphs that are too long. It uses headings and subheadings the create a solid structure. Content that is not readable is basically one never ending piece of text.
Quick tips for improving readability
If you want to know whether your content is readable, ask yourself if you are tempted to read it. If not, its readability score is probably not high enough. Let me give you a few quick tips to increase readability of your content. First, split longer paragraphs into smaller chunks. These chunks should not exceed six lines of text. However, that doesn’t mean that you should end it with a paragraph with a single line. In that case, it might be better to make one exception.
You can also reduce the number of lines in previous paragraph. Then, you can use these freed lines to increase the size of the last paragraph. Or, you can find some way to add some content and make the content larger. I think you get the idea. Another quick tip for improving readability is to increase line-height. When lines of text are too close to each other, it never looks good. It also makes text harder to read. Therefore, consider adding some white space.
Another tip for improving readability of your content is decreasing the number of characters per line. According to this article, the optimal line length is somewhere between 45 and 75 characters per line. What’s the problem with having too wide or narrow lines of text? When a line of text is too long, it will be harder for readers to focus on the text. Longer line length makes it difficult to assess where the line starts and ends.
On the other hand, when the line is too short you force reader’s eye to travel back to the beginning of the line too often. This breaks the reader’s rhythm. Too short lines also stress readers. It forces them begin the next line before finishing the current one. Therefore, keep the number of characters per line in range of 45 and 75 characters.
Font-size and body copy
Let’s take a look at another factor that will help you improve the experience of reading the content. This factor font-size. If your body copy is too small, it will be much harder for people to read. It will put more stress on eyes and they will get tired sooner. Also, the smaller the font-size, the more characters you can squeeze on one line. Therefore, smaller font-size may encourage you to break the previous rule of thumb about line length we discussed above.
What is some good number for the font-size of body copy? In my work, I never set it below 16 pixels. This is, I think, the lowest number you should try. In a fact, I would encourage you to go the opposite way. Don’t look for the smallest font-size that is still readable without using magnifying glass. Instead, try how big you can go without breaking the layout and harming user experience.
Font-size and some examples from the digital world
The first example o web typography from the digital world is Medium. This website uses 18 pixels as base font-size (on body) and 21 pixels for paragraphs. What if we take a look at another example such as The Washington Post? This website uses base font-size of 14 pixels. However, paragraphs in articles use 20 pixels. The New Yorker? The same thing. This website uses 16 pixels as base size and again 20 pixels for text. Forbes? font-size of text paragraphs is set to 21 pixels.
We should remember that all these websites are focused on providing people with content. The satisfaction of their users depends on their reading experience. Web typography is important part of their work. They have to create reading experience that is as close to perfect as possible. So, what does it mean if people behind these websites think that larger font-size is better? Maybe, we should adopt or at least consider adopting the same opinion. Even if you don’t like this suggestion, try it on your own. Remember that design is all about experimenting.
You don’t have to rush it or go to extremes. You can start slowly and set body copy just 16 pixels. This will work great under almost every condition. Then, you go up just one pixel at the time. Try to set the font-size to 17 and then 18 pixels. Finally, try to reach 21 pixels. I would also suggest that you take a screenshot of every iteration. Then, you can compare all your variations at the same time. This will help you compare each variant precisely instead of relying on your memory.
No.2: Increase font-size and line-height with screen size
Let’s assume that you found the best font-size for your body copy. You probably also created typography scale. This means that you should styles for almost every element of web typography. Now, there is another question you should think about. What will you do with font-size as you go from mobile to desktop screens. The truth is that reading on mobile devices and desktops are two completely different experiences.
Think about the way you interact with you smartphone when you read something. It is very likely that you hold your device closer to your eyes. This is logical since the screen on your mobile device is smaller. We can assume the same about reading on tablet or some type of eBook reader. Since your face is usually not so far from the screen, reading smaller text is not such an issue. In the worst case, you can either zoom-in or bring the device closer to your eyes.
The reading experience on desktop is different. Your desktop screen is usually further away from your eyes compared to the mobile. Also, if text is too small, your options are more limited. You will probably don’t want to hold your notebook or monitor closer to your eyes for a few minutes. Since you are farther away, the same font-size on the desktop will look slightly smaller. This means that you should not use the same font-size for all devices.
Different reading experience on different devices
In the previous section, we discussed proper size of body copy. I hope that I convinced you to use sizes that are rather larger. What we didn’t discuss was on what device should we apply this font-size. You will probably create designs for wide ranger of devices. Today, designing only for desktop is, I hope, dead. Well, I still see a lot of amateur web designer doing this. Anyway, let’s bring our focus back to the main topic of this article, creating perfect web typography.
The idea is that the farther the user is from screen, the larger the font-size should be. Otherwise, she may have some issues reading the content. This means that we should increase the font-size as the screen is getting bigger. This will help us increase readability of the content. It will also work as a compensation for the loss in size due to larger distance. Is there any rule of thumb for responsive web typography for this increase in font-size? You can start with two pixels.
From theory to practice
Let’s say that you start with body copy of 18 pixels. Since we are designing mobile-first, this will be the font-size used for mobile devices. Next, we can add new media query for tablets and similar devices. This can be somewhere around 768 pixels. At this point, you will increase font-size of all default elements of web typography by two pixels. Another media query now for bigger desktops, can be somewhere around 1200 pixels. At this point, you will again increase font-size by two pixels.
CSS code:
html {
font-size: 18px;
line-height: 1.3;
}
h1 {
font-size: 38px;
}
h2 {
font-size: 32px;
}
h3 {
font-size: 26px;
}
h4 {
font-size: 20px;
}
p {
font-size: 18px;
}
@media screen and (min-width: 768px) {
html {
font-size: 20px;
line-height: 1.4;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 34px;
}
h3 {
font-size: 28px;
}
h4 {
font-size: 22px;
}
p {
font-size: 20px;
}
}
@media screen and (min-width: 1200px) {
html {
font-size: 22px;
line-height: 1.414;
}
h1 {
font-size: 42px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 24px;
}
p {
font-size: 22px;
}
}
No.3: Use modular typography scale
In the previous section, I assumed that you have specific font-size for every element of web typography. However, what if you don’t have these numbers in place? Let’s be honest. It can be difficult for anyone to create this system, especially if you don’t have much experience. This typography system is called typography scale. It helps you create consistent hierarchy in your design. It does so by using specific base font-size and ratio.
You can create this typography scale by multiplying the font-size of your body copy with that ratio. The result is then multiplied again with the ratio. For example, let’s say that your base font-size is 16 pixels and ratio is 1.618. In this case, you will multiply 16 pixels by 1.618. The result will be 25.888 pixels. Then, you will take this number and multiply it again by 1.618. This will give you 41.887 pixels. Repeat this process as many times as you need. This is our final typography scale.
CSS code:
html {
font-size: 16px;
line-height: 1.3;
}
h1 {
font-size: 67.773px;
}
h2 {
font-size: 41.887px;
}
h3 {
font-size: 25.888px;
}
p {
font-size: 16px;
}
We can improve and make our web typography scale a better suit for responsive design. All we need is to use relative units, rems to be more specific.
CSS code:
html {
font-size: 16px;
line-height: 1.3;
}
h1 {
font-size: 4.236rem;/* This is equal to 67.773px */
}
h2 {
font-size: 2.618rem;/* This is equal to 41.887px */
}
h3 {
font-size: 1.618rem;/* This is equal to 25.888px */
}
p {
font-size: 1rem;/* This is equal to 16px */
}
When you use rems (or ems), changing your typography scale for higher resolution will get much easier. With this setting, you will need to change only the font-size defined for html. The rest will take care about it by itself. What if you don’t like math or you just don’t want to do this calculation? In that case, you can this tool to get the job done for you.
No.4: Use relative units
We briefly touched this topic about relative units in relation to previous code example. However, I didn’t give you any reason why relative units are good choice for responsive web typography. I also didn’t give you any explanation of what is the idea behind rem units. Well, it is very simple. One rem unit is equal the font size of the html element. So, if you set 16 pixels as font-size on html, one rem will be always equal to this number. This connection is what’s beautiful on rems.
Let’s say that you decide to change the font-size of html. Then, every element using rem unit will be re-calculated using this new font-size. This makes responsive web typography quite easy. All you need is to use few media queries and change the font-size of html. Let’s take a look at the previous example and add some media queries for different resolutions.
CSS code:
html {
font-size: 16px;
line-height: 1.3;
}
@media screen and (min-width: 768px) {
html {
font-size: 18px;
line-height: 1.4;
}
}
@media screen and (min-width: 1200px) {
html {
font-size: 20px;
line-height: 1.414;
}
}
h1 {
font-size: 4.236rem;
}
h2 {
font-size: 2.618rem;
}
h3 {
font-size: 1.618rem;
}
p {
font-size: 1rem;
}
Issue in paradise of relative units
Unfortunately, not even this is bulletproof. There is at least one problem with this solution. Do you see it? Okay. Imagine what will happen if the last media query will be triggered. Our top heading (h1) will have font-size of 84.72 pixels. Let me tell you that is pretty large font size. One possible solution is to use this media query (1200 pixels) and change the value for each element. In the example below, every element “inherits” the font-size of the element below it.
CSS code:
html {
font-size: 16px;
line-height: 1.3;
}
@media screen and (min-width: 768px) {
html {
font-size: 18px;
line-height: 1.4;
}
}
@media screen and (min-width: 1200px) {
html {
font-size: 20px;
line-height: 1.414;
}
}
h1 {
font-size: 4.236rem;
}
@media screen and (min-width: 1200px) {
h1 {
font-size: 2.618rem;/* Font-size of h2 */
}
}
h2 {
font-size: 2.618rem;
}
@media screen and (min-width: 1200px) {
h2 {
font-size: 1.618rem;/* Font-size of h3 */
}
}
h3 {
font-size: 1.618rem;
}
@media screen and (min-width: 1200px) {
h3 {
font-size: 1.309rem;/* 0.618 / 2 + 1rem */
}
}
p {
font-size: 1rem;
}
With this new set of media queries, we no longer have to worry about the headings on larger screens. To be honest, I still don’t like that we have to use more code. However, this is the only solution I know about that doesn’t require any libraries, plugins and other external stuff. There is another way to make our web typography scale more predictable. We can use CSS calc() function and decrease the font-size by specific percentage. Something like:
CSS code:
@media screen and (min-width: 1200px) {
h1 {
font-size: calc(4.236rem * 0.7);
}
h2 {
font-size: calc(2.618rem * 0.7);
}
h3 {
font-size: calc(1.618rem * 0.7);
}
}
No.5: Focus on vertical rhythm
The fifth secret of perfect web typography is great vertical rhythm. This is a concept that originated in either in print or graphic design. This concept is about using consistent patterns of vertical spaces between elements in the layout. Good vertical rhythm makes a layout more balanced and beautiful and its content more readable. In web design, we can establish and control vertical rhythm in a couple of ways. We can use font-size, line-height and we can also use margins.
Let’s say that our body copy has line-height of 25.888 pixels (1.618 * 16 pixels). In that case, we have to do number steps. First, we need to set the font-size of html to 16 pixels and line-height to 25.888 pixels. Second, we will use web typography scale from previous examples for setting font size. Third, we will calculate line-height for each element by multiplying base line-height by three and diving it by font-size of the element. Fourth, we will calculate the top margin by diving the font-size by line-height.
In case of bottom margin, we will use almost the same equation. The difference is that we will also divide the result by two. I will again use CSS calc() function to do the math. Lastly, to convert pixels to rems, I will sometimes multiply the result by 1rem. When you will read the example below, don’t get discouraged by all the math. It may look difficult only at first sight. When you get into it, it will become easier.
CSS code:
html {
font-size: 16px;
line-height: 25.888px;
}
h1 {
font-size: calc(67.773 / 16 * 1rem);
line-height: calc(77.664 / 67.773); /* 77.664 = 25.888 *3 */
margin-top: calc(67.773 / 25.888 * 1rem);
margin-bottom: calc(67.773 / 25.888 / 2 * 1rem);
}
h2 {
font-size: calc(41.887 / 16 * 1rem);
line-height: calc(77.664 / 41.887);
margin-top: calc(41.887 / 25.888 * 1rem);
margin-bottom: calc(41.887 / 25.888 / 2 * 1rem);
}
h3 {
font-size: calc(25.888 / 16 * 1rem);
line-height: calc(77.664 / 25.888);
margin-top: calc(25.888 / 25.888 * 1rem);
margin-bottom: calc(25.888 / 25.888 / 2 * 1rem);
}
p {
margin: 0;
}
p + p {
margin-top: 1.618rem;
}
No.6: Limit the number of fonts
Enough of math for today. This sixth secret of perfect web typography as about limiting the number of fonts you use. I know. Numbers, again. Don’t worry, I will keep it simple this time. What’s the perfect number of fonts to use on a single project? I don’t know. Here is the thing. There is no perfect number just like there is no perfect tool. Every design project will require a little bit different approach. One project may work great with one font while another will need two.
Well, there is one rule of thumb that may help you. Don’t use more than three fonts or typefaces in a single project. I typically use two fonts per project. Seriously. I never exceed this number. What is the problem with using too many fonts? Fonts will draw attention away from the content. In other words, they will be distracting. What’s worse, your design will more like a font gallery and nobody will take it seriously. Use two fonts or variations of one font.
Remember that designer who mastered web typography can do miracles with just one font. Also, the fewer fonts you use, the more consistent your design will be. Don’t try to use different font for every headline or every page. This will make your design confusing and cluttered. So, if you want to use two fonts, select one for headings and one for body copy. That’s all you need.
Closing thoughts on perfect web typography
This is it. You’ve finished this article about crafting perfect web typography! Today, we discussed six simple secrets to help you master web typography. I hope you will be able to use these secrets and improve your work. If you find that something is still not right, try something different. Remember that perfect web typography is often result of many iterations. You make on little change at the time and, before you realize it, these small changes will lead to success. Wish you luck.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
