Typography in Web Design

7 Minutes time to read
Typography_Ester_Digital

All you have to do to notice the typography design is to look around. There are advertising banners on the street, food packages in the store, and fresh newspapers on the table with different fonts of text, shapes of the numbers, and line spacing. People face it everywhere and so often that they rarely pay attention to how creative and diverse typography can be. 

Consequently, it’s not surprising at all that typography design is a must-have element of the professional skill set of most web designers. Knowing what typeface to choose and how to make it work with the website layout or color scheme is crucial since the wrong choice can destroy the hard work. In this article, our UI UX design agency will talk more about all the terms and tips you need to know to create something truly magnificent, but for now, let’s start from the very beginning and find out where the roots of typography come from.

Brief history of typography in web design

In essence, typography design is the way of using text to express a certain message. It demands the skill of arranging letters and words with style and the ability to make the copy clear, readable, and visually attractive. Even though web designers aren’t required to create their own letterforms, they still have to choose among various typefaces, point sizes, and so on. 

Due to the digital evolution, it can be done relatively quickly on a laptop or mobile phone. However, even now typography with its rules keeps on changing, which sometimes causes specific difficulties. 

What about “before?” Well, as far as we know, movable type was created by Johannes Gutenberg in the 15th century, but people had been yearning to bring books into existence long before it. Of course, they had to do everything by hand back then. Even when there was a lack of paper and writing tools, they used other ways to transmit written messages, such as carving the symbols into the wood. 

Today, people turn to both hand and digital ways of typing. It’s hard to deny that such merging can bring some unexpected results for the typography design, but that’s what makes it even more interesting, isn’t it?

How typography influences the messaging

There is no point in pretending typography can’t mess with people’s emotions. In proper hands, it is a powerful tool that can actually add personality to the printed text, making it more appealing to the human eye. Moreover, it can insert particular messages into the readers’ minds, helping them to understand the received information even more easily. 

So, typography is some sort of body language that makes the first impression and impacts how the words of the message are perceived. The specific typeface, size of type and line spacing are the most influential factors when it comes to typography design. 

As this study claims, larger font sizes can provoke stronger emotional connections, and it shouldn’t come as a shock since smaller font sizes make texts harder to read. The fonts themselves can play a big role in how the text makes a person feel. It can look dull and plain, edgy and aggressive, elegant and appealing — you can find a font for whatever message you want to deliver.

To learn better what exactly influences people the most, you need to understand web typography terminology. So, before jumping to the tips, we suggest you take a closer look at the list below.

Want your message to be straightforward yet captivating?

We definitely know how to achieve that

Explore

Web typography terms

  • Typefaces and Fonts

We all probably know basic typefaces such as Times New Roman, Arial, Calibri, etc. But what is a typeface? Generally speaking, it’s a particular set of both alphabetic and numeric characters that have a common design. They get easily confused with the fonts, which are just a specific case of a typeface in reality. 

Sounds simple, right? To have an even more clear understanding, keep in mind that fonts also have a definite weight and size within a typeface. For instance, they can be lighter or bolder, rounded or unrounded, 16px or 30px. To sum up, there are some small differences between a font and a typeface, but the last is still counted as the style category for a set of different fonts, and that’s why it’s sometimes called a font family. 

  • Kerning

Kerning is the spacing between individual characters. It’s usually applied to enhance readability and get rid of unnecessary gaps. Sometimes text looks awkward at smaller/larger sizes, or some fonts might be just too wide to look well, and that’s where kerning makes an appearance. It can influence aesthetics and communication through type as well. 

  • Tracking

Tracking is similar to kerning: it also defines the spacing between characters. Their main distinction is that tracking takes care of the overall spacing between the characters of an entire line or even a piece of text while kerning concentrates more on the spacing between two distinct characters. 

  • Leading

Now, we have leading — the vertical spacing between multiple lines of text that is normally measured from baseline to baseline. For web designers, it’s one of the easiest ways to make text look better. The trick is to leave enough space between the lines so it wouldn’t be too squashed or loose. 

  • Hierarchy

Lastly, there is a hierarchy. You must have noticed how the content on most websites is divided into different sections and groups — and that’s what it is about. 

Hierarchy is vital in order to improve readability and successfully transfer your message to the website visitors. It makes their navigation easier and allows them to jump right to the parts they are looking for. Typography hierarchy ensures the proper choice of font sizes, weights, styles, and so on. It’s imperative for text to start with a headline (“H1”) with the section headings next (“H2”, “H3”). Then goes the text body with the font that is usually smaller.

What to consider when choosing: best tips

Every single thing matters when you’re trying to provide your readers with a pleasant experience. Apart from typeface and type size, there are different colors, letter shapes, and line sizes. When everything is considered, readers don’t even pay attention to the typography — all of it merely seems natural to them. 

Here we have the best tips that’ll ensure your website’s typography meets all the required criteria to make visitors stay longer and genuinely enjoy the reading. 

  • Use only one or two typefaces on your website

The first rule is simple: there is nothing good in mixing and employing numerous typefaces across the website. Your content should always stay consistent, which is almost impossible when you use more than two typefaces (and even when it’s just two of them, choose those that are visually distinctive).

  • Select standard fonts

If you’re not sure what to pick — stick to the standard options. Of course, we understand the desire to stand out and use something authentic, but it has its own pitfalls.

For example, sometimes browsers can’t recognize certain styles and display the basic ones (such as Times New Romance) instead. Meanwhile, standard choices are great for any type of browser and device. 

Another thing you should consider is your readers’ familiarity with the basic fonts. Since they are applied everywhere, users’ eyes are highly accustomed to them. It means that it’s much easier to scan the text with a standard font than to try to decipher the unique one. 

  • Befriend a sans serif font

Yes, serif fonts are pretty common, and there is a reason for that. Sans serif fonts are easily readable on digital devices, and that’s why choosing them for your body text is usually so beneficial. 

Fear not — it doesn’t mean you shouldn’t use anything else. There are titles, heading, and quotes that need readers’ consideration, too. Hence, it may be smart to use something more dramatic for them, leaving our old good sans serif font for the larger text blocks.

  • Emphasize the text appropriately

What’s the first thing that comes to your mind when you need to highlight your text? We hope it’s not “all-caps.”

That’s right, the all-caps method is not popular anymore. Instead of emphasizing certain parts of the text, it will only make it look intimidating. If it’s not a part of your branding, think of choosing bold text instead. It will arouse readers’ interest just fine, looking far more pleasant at the same time. 

  • Keep an eye on the text size

As you probably already know, web designers use pixels instead of points when it comes to font size. Normally, the size of the body text in printed media is 16px. This is the smallest readable font for most people (without zooming in) that’s also usually applied on websites

However, you’re the one who makes the rules here. If you need to increase the size of the text to meet users’ needs do it. Just keep in mind the hierarchy and make sure that your heading is bigger than the body text. It will create contrast on the page and make it easier for visitors to navigate around it.

  • Aim for the 40-80 characters per line

As we all know, humans aren’t fans of long lines — they demand too much effort and can easily bore them. The short ones aren’t great either — they’ll only make your readers jump to the next line too soon. So, the best thing you can do is to stay between 40 and 80 characters per line. These are the perfect parameters to keep your text legible and visually attractive.

  • Get rid of animations

Even though text animations can seem like a good idea to hold your reader’s attention, they also may distract them and significantly reduce intelligibility. First of all, it’s simply inconvenient for our brains that prefer steady text. Secondly, animation can annoy users or make them think you put more ads on the web page.

  • Don’t forget about whitespace

To make visitors’ experience better, remember about the proper use of whitespace. It’s a great way to make sure they can freely read the text lines one after one, returning when it’s required. Standard spacing for body text is 1.5, but the distance should be bigger for headings. It’s also a good idea to use a spacing of 2.5 between paragraphs and see if there is a need for any adjustment later. 

Lost yourself in numerous typefaces and don't know how to choose one?

Contact us, and we will help

Explore

Best examples

Now, it’s finally time to take a look at the amazing examples of typography. Let’s dig right into it:

01 Pop-up Magazine

This website doesn’t employ the most generic typography and illustrations. Its headline immediately catches users’ eyes with the larger font size, while the main information below is presented in the same smaller font with enough whitespace between the lines.

Pop_Up_Magazine_Ester_Digital
from popupmagazine.com

02 Thrivesolo

This website’s headline is a simple font with distinctive letters and a straightforward message, that is perfect for the case. This typeface is used all across the website, providing visitors with the opportunity to scan everything without any difficulties. 

Thrivesolo_Ester_Digital
from thrivesolo.com

03 The Lincoln Hotel

The Lincoln Hotel has a classy and visually appealing website with the appropriate typography. It’s clean and well distinguishable for people, with an elegant font for the title and a simple yet efficient font for the main body text. When scrolling down, you can notice the phrases with the bold tag that is used for strong emphasis. 

The_Lincoln_Hotel_Ester_Digital
from thelincolnhotel.com

04 Luna

Luna’s typography is just on another level. Apart from the variety of font sizes, there is a color game that undoubtedly accentuates the headline. The contrast works out quite nicely while the not-so-regular typeface (Lexend) just adds the whole page some flavor. 

Luna_Ester_Digital
from luna.io

05 Hix Snedeker Companies

This is another example of how great a website can look with the sans serif typeface for the headline and subheading. You can also notice the mixed colors in the headline, which make it even more highlighted.

Hix_Snedeker_Ester_Digital
from hixsnedeker.com

On a final note

To conclude, there is no doubt that typography is really important in web design. In proper hands, it makes the text easily understandable and legible, while bad typography only distracts users from reading and negatively influences their experience on the website. When working on typography, one should remember that its purpose is to honor content, but not the other way round. 

We hope that knowing how it impacts the text message, in addition to our best tips, will help you to achieve the desired results. However, if there’s any sort of trouble, you’re welcome to contact our team of professionals for additional help. We’re always here for you!

    No problem!

    Enter your email adress below. We’ll shoot you a link.

    Thank you! The link to the article is already in your email inbox.

    Well sometimes it is quite complicated to explain simplicity!

    We let our work speak for itself.

    Explore
    How_To_Create_A_Personal_Website_Ester_Digital

    How to Create a Personal Website

    Without any exaggeration, people look things up on the Internet every single day. Whatever you do, you can find a lot of users interested in your products online, but you’ll need an excellent personal website to become truly successful.  Websites can offer you any type of information, products, or services. If you want to efficiently...

    10_Benefits_of_CRM_System_Ester_Digital

    10 Benefits of CRM System

    In the previous article, we explored the importance of CRM, and today it’s time to unfold its benefits so you can be sure it leverages your performance no matter the business size and industry. CRM, or customer relationship management, is a perfect tool to collect and store all the necessary information, monitor customer communication and...

    CRM_Ester_Digital

    What Is CRM and Why Is It Important for Your Business

    Have you ever had trouble managing all your conversions with clients and leads and not missing a single detail? If so, then you must have pored over mountains of spreadsheets or databases that take a lot of time and require full concentration. Disorganization, in its turn, makes everything even more difficult. Fortunately, there is a...

    Headless_CMS_Ester_Digital

    Top 7 Headless CMS Benefits

    To make their business profitable and popular in today’s world, companies enter the global market. Here, they design their sites, launch numerous applications, attract customers through various social networks, etc. However, the matter of being introduced online is just half a job. It’s also crucial to choose how to present your brand. Accordingly, there are...