Product Design

Dec. 19, 2016

/ product design

Principles of typography in web projects

Paweł Pacura

To be a good web designer you have know by heart a lot of principles and rules. Some regard typography – forgetting about them will result with simply feeble projects. That's why I decided to write them down and help in making web a great (and readable) place. Check out the teaser of my article and get a link to download FOR FREE my whole eBook!

Through hundreds of years, a classic typography has developed a vast number of logical rules related to the composition of the text. Sometimes they were the result of technical or functional limitations, and at other times they were established because of aesthetic reasons.

Patterns of traditional typography penetrated the computer typesetting, and thus the composition of the text on web pages. The Internet has also created its unique principles, which arose from the specifics of this medium - primarily from imperfections in browsers; display and the need to show the same content on different devices.

Below I described the most important rules and guidelines concerning typography in web and application design. A large part of them is universal and applies to all media.

  1. Choosing the right typeface

Choosing the right typeface is crucial for every project. Regardless whether the project is for a newspaper, a book or an Internet, it’s very important to approach this task analytically and to not to make a random decision.

Know your topic well

Designers should always know the topic of their work and understand the vast context of creation and functioning of a brand, product or service. They should know the current style of communication, what are client’s expectations and who is the potential customer. It’s also a good idea to find out what style is dominant in client’s industry.

Wide knowledge of clients' brands and their products can be very inspiring during designing. It allows to “empathize” with the project, as well as to avoid misunderstandings and proposing completely misguided ideas.

It’s also very important to thoroughly understand the structure of website/application that is going to be created. You also have to count all types of headers, tables, necessary boldings, forms, validation, buttons etc.

Choose the typeface that fits the topic

Typeface should always match the topic of the project. Don’t choose it on a whim. It must refer to the content in a cultural, historical or formal way. It can highlight a specific value or be transparent in such a way, that it will be almost invisible.

For example, for a website of an innovative technology company you should use simple sans serif fonts, such as Helvetica or Univers. You can also use their thinner, "lighter" varieties - Thin and Light. This choice of typography will emphasize the specialized nature of the company.

Bad practice on the selection of fonts is to non-reflectively and intuitively choose them without a thorough knowledge of the subject. When creating a mobile application for the HR industry you simply should not use serif fonts from the 18th century, such as Bodoni. These fonts won’t create positive associations in people that are seeking employment or want to hire new employees.

It’s also a big mistake to ignore the subject and implement your own vision by any means necessary. The effects of such designs are non-relatable to the content of created website or application. This approach results in the unification of many websites, which begin to look very similar, regardless whether they are dedicated to funfairs of funeral homes.

Test different variants of typefaces

Web Desing - different variants of typefaces

In the project, you always have to distinguish such content as headers, links, quotes, placeholders or button texts. It is, therefore, convenient to use for this a variety of different thicknesses or styles.

A good practice is to limit the amount of varieties used in the project. Three types of Light, Regular, and Bold should be sufficient for distinguishing the most important parts of the project. You should also use a italic typeface in quotations and sometimes in small expansions headers.

It is also important to create a reasonable interval between those versions of the typeface, thanks to what their differences are visible and clear for customers. Only using Thin, Light, and ExtraLight varieties in the project is therefore not a good solution. Such small differences are poorly visible and as a result, don’t fulfill their functions - distinguishing elements from each other.

The lack of at least three varieties in the project significantly narrows the means of expression. It forces designers to change the color or size of a letter every time they need to highlight it. It’s especially problematic during the development of a CMS website, when a person that enters the data starts to create their own colorful differentiators and ends up with a website that’s significantly different from the project.

Choose the typeface that has a webfont

Web Design - diacritical marks of used language

This may seem pretty obvious, but it is very important that before you start designing you have to check whether the chosen type has a web version. You also have to know if the webfont works well when it comes to displaying content on popular devices, systems, and browsers. Unfortunately, sometimes fonts that look good on one device/system are much worse on another. Additionally, It’s also necessary to check all the varieties that you are going to use. Sometimes display errors are not visible in a Regular variety, but Light or Thin can have a problem with display on every device.

Choose the typeface that has diacritical marks of used language

It is worth checking whether the selected style has diacritical marks of every language that created website/application is going to be displayed in. Of course, sometimes it can narrow down the selection of available typefaces (especially if you use a free library), but it will allow for consistency in the appearance of all language versions of the page.

Choose the typeface with a set of needed glyphs

When designing the website that is going to be complemented by clients (CMS) you can never predict what types of glyphs they will use. When the font doesn’t have its own additional characters (such as @ or $), then used browser will add characters from a different font. The designer then loses control over the aesthetics of the project.

Before you start designing, it’s important to check whether the typeface has its own glyphs. It’s particularly important in such projects as mathematics e-learning websites.

Use trusted sources

You can find hundreds of free fonts on the Internet. Unfortunately, sometimes websites that offer free fonts contain pirated versions of paid products. It’s, therefore, crucial that you always check the exact source of the font, read the license and check the author.

Want to know more? Download the whole eBook form Awwwards - its free!

We use cookies on this site to improve performance. By browsing this site you are agreeing to this. For more information see our Privacy policy.