{"id":16610,"date":"2018-12-11T11:00:37","date_gmt":"2018-12-11T11:00:37","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=16610"},"modified":"2020-09-03T11:28:06","modified_gmt":"2020-09-03T10:28:06","slug":"great-interfaces-made-good-typography","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/great-interfaces-made-good-typography\/","title":{"rendered":"Great Interfaces Are Made Of Good Typography"},"content":{"rendered":"

Digital interfaces make a huge impact in our lives. We frequently use websites or digital applications to accomplish certain goals. Indeed, when interacting with an interface, we are surrounded by typography and our experience is driven by the words and messages we read and understand. In one of his articles<\/a>, Oliver Reichenstein confirms the importance of typography in all websites with the following statement:<\/p>\n

<\/div>
<\/svg><\/div>

\"Web Design is 95% Typography.\"<\/p><\/span><\/blockquote>\n

Over the last couple of years, I decided to learn how typography works, since it\u2019s one of the most important assets we have as designers to communicate clear and efficient messages, engage people emotionally and convey the appropriate brand\u2019s characteristics into the interfaces we design. Unfortunately, I noticed that several websites display disjointed looks and emotions, since many designers and developers ignore the importance of typography.<\/p>\n

Consequently, those websites communicate ineffectively and affect the user experience and brand perception.<\/strong><\/p>\n

The purpose of this article is to help designers and developers to understand how to work with typefaces, in order to create great interfaces.<\/p>\n

Typography, brand and\u00a0users<\/h2>\n

When a user interacts with an interface he also interacts and connects with the brand. To optimise the user experience, typefaces have to be consistent with the website brand\u2019s tone and voice. In my opinion, MailChimp<\/a> is one of the best examples which illustrates this concept. They have done this remarkably on their website by choosing for their headlines, the typeface called \u201cCooper light\u201d.<\/strong> This typeface has some personality and conveys a friendly and approachable style claimed by the brand.<\/p>\n

\"\"<\/a>

Screenshot of MailChimp\u2019s website<\/p><\/div>\n

As people don\u2019t come to a website to enjoy the design but to read the content, it is important when choosing a typeface to understand how we want them to feel while reading it. For example, do we want them to feel relaxed, happy or agitated? This should be aligned with the brand attributes and art direction of the website.<\/p>\n

The takeaway here is that anytime you choose a typeface, start by making a list of words which reminds your brand tone and voice. This will help you describe the feelings and moods you want to distillate with the fonts for the texts across your design.<\/p>\n

By understanding the relationship between typography, users and the brand, you will be able to select the best typeface with confidence which will help your design achieving its goal.<\/p>\n

Choosing the right\u00a0typeface<\/h2>\n

To choose the right typeface, it is fundamental to consider the context of use and the purpose of a font into the interface. You should always ask yourself: Is the font I am choosing going to be applied to headlines, body copy, links, call-to-actions or navigation? These questions will help you to apply correctly the typeface into your design.<\/p>\n

Choosing the right typeface also means taking into consideration a set of fonts optimised for extended texts, since for users reading on screen may become tiring at some point, especially if the website is content heavy.<\/p>\n

To search for typefaces, I usually like to explore fonts in Google Font<\/a> or Adobe Fonts (Typekit)<\/a>. They both provide a selection of high-quality typefaces optimised for the web. I avoid using any typeface coming from free websites or unknown resources, as often they don\u2019t provide great and well-tested typefaces. Also, as a rule of thumb, it\u2019s recommended to choose two typefaces maximum in order to keep the design of an interface consistent.<\/strong><\/p>\n

When working with typography for the web, there are two main principles you must know as a designer to make the content accessible and legible: Readability <\/strong>and Legibility.<\/strong><\/p>\n

Legibility<\/h2>\n

Legibility is the ability of the reader to distinguish letterforms when reading. Here are the factors which contribute to a typeface legibility:<\/p>\n

Display typefaces<\/h2>\n

We call \u201cdisplay typefaces\u201d the ones designed to be used at large size. Those are perfect for headlines as they are clear, noticeable and they stand out. However, these typefaces are less readable at smaller size and shouldn\u2019t be used for body copy. One of my favorite typeface for headings is \u201cBEBAS NEUE\u201d.<\/p>\n

\"\"<\/a><\/p>\n

Serif and Sans Serif typefaces<\/h2>\n

On the web there are mainly two groups of typefaces we work with, Serif and Sans Serif. Traditionally, Serif typefaces have always been more legible and are often used in print for long passages of text. As the web and design trends evolve, we can find more websites using Serif fonts for some body copy. When well-chosen this works well.<\/p>\n

\"\"<\/a><\/p>\n

However, Sans-serif fonts are more commonly used for body text due to their simple letterforms. It\u2019s great to choose fonts with a slight \u201ctouch of personality\u201d, but not decorative as it can increase the cognitive load of the users and affect their reading experience.<\/p>\n

\"\"<\/a><\/p>\n

Based on my experience with typefaces, I prefer to use Sans-serif fonts for body text and Serif font for titles, if it\u2019s necessary. At the end, try some combinations and judge what works and feels the best for your design.<\/p>\n

X-height<\/h2>\n

The X-height is an important characteristic to take into account when evaluating a font. The fonts which work the best for body copy are the ones with a larger x-height. The taller the x-height, the more legible the typeface tends to be. It is an important rule to remember when choosing fonts for body text.<\/p>\n

\"\"<\/a><\/p>\n

Readability<\/h2>\n

Just because a font is legible doesn\u2019t mean it\u2019s readable. In fact, readability<\/strong> is the level of comprehension and visual comfort when someone reads a text. If you find yourself stopping to admire a font instead of reading the text, chances are that the font is not readable. Here are two examples to visualise the explanations above:<\/p>\n

Line height<\/h2>\n

Line height also known as leading defines the space between baselines in a block of text. A true ideal line-height doesn\u2019t exist, because every typeface is different. However, a good starting point with line-height is between 1.2 and 1.8. Small line-height can make the text difficult to read as lines are close to each other. Generally speaking, if users have trouble reading the font applied to a text on a website, they will consider the content of it hard to read and understand.<\/p>\n

\"\"<\/a><\/p>\n

Line spacing<\/h2>\n

Line spacing is the space between paragraphs. Always keep paragraph spacing in the range between\u00a0.75x and 1.25x of the type size.<\/p>\n

Size<\/h2>\n

Size matters when working with typefaces. We need to consider our content to be readable by people of all ages. For the size of the font it\u2019s good to stay at 16px or 1em at smallest. The font should be large enough to be comfortably readable. When browsing a website, people are busy and in a hurry, that is why it is important to make the content clear and fast to read.<\/p>\n

Line length<\/h2>\n

Another common practice that improves readability is preventing horizontal lines of paragraphs to be too wide. Indeed if a line is too long, it stretches the user\u2019s eye and causes fatigue. The rule of thumb here is to set the line length to 40 to 70 characters maximum.<\/p>\n

Hierarchy and\u00a0contrast<\/h2>\n

Good type contrast is essential for readability. This is an important principle to understand while creating good and consistent hierarchy on the website\u2019s content. A successful hierarchy organises the content in digestible parts, easy to scan and accessible to the users.<\/p>\n

\"\"<\/a><\/p>\n

Conclusion<\/h2>\n

In my experience, I have noticed that once you understand these principles and master typography for the web, your design will become stronger and more appealing as typography is content and content is UX.<\/p>\n

It is mandatory to remember that you don\u2019t design websites to be pretty, but to help users achieve a certain goal. Here are a few resources you can browse and explore, that helps me every day to improve my skills in typography:<\/p>\n

Websites:<\/strong><\/p>\n

Books:<\/strong><\/p>\n