Gal Harel
Gal Harel
November 1st 2018
Design 
3 min read

Web Design Critical Typo-Tips

Hi, this is Gal. I’m a graphic and UX designer at Marvilix. Today I wanted to share with you some thoughts and tips to better understand typography use on web. 

Typography is an inseparable part of design. When used well, it can deliver a message with no images at all. When designing, typography plays a vital part. Good typography is crucial for communicating a message, especially on the web, where most of the information that comes to us is in a written form of media. In order to keep your reader attentive, the typography should make the act of reading effortless. To do so, there are numerous variables to keep in mind. This article is dedicated to some of the most important Do’s and Don’ts regarding web typography.

 

Effortless Readability

One of the most important things to keep in mind, is the user’s experience while reading. The text they read should be read with zero effort. Here are some pointers to keep in mind for readability.

Line length – When the length of a line is too long it is tiring, and the human eye finds it hard to keep track. Nevertheless, when the line is too short it can be just as irritating. When designing, you want to find the right length of a line for the paragraph to be just right.  An estimated 60-characters-per-line in web design, and a 30-characters in mobile design should do the job.

 

Leading, Kerning, Tracking – these three “siblings” play such an important role in the typography world.  Each of them influences the others. Leading – the spacing between the lines. A paragraph without enough leading can cause it to look like a “black” and uninviting rectangle. No one wants to work hard in order to read. The lines should be able to “breath”. Exaggerating in the opposite direction is harmful too. Tracking is the overall spacing between characters, and words. It is often used to distinguish between different kinds of headings and gives the design a neat look. Lastly, Kerning the spacing between the letters themselves. When designing a heading, or a logo there is often a need to intervene and space between characters, it is also influenced by the font family. Some font families have issues with specific letter combinations, while others are better designed (space-wise).

 

Color contrast – avoid using dark typography on a dark background, or light typography on light background. Try reading it yourself and make sure it feels comfortable and effortless.

 

Great Combinations – Make it Appealing

This typo-tip is relevant for any form of typography; web or print. Having the right “tension” between a heading and the paragraphs that follows it, is a must for great typography. Correct hierarchy can make or break a design. As a designer, you want to control where the users eyes go first, while keeping in mind where the most important piece of information is, the next most important, and so on. The right image below shows a title that separates itself from the body text, while on the left side both the title and the body text carry the same “weight” and therefor there is no tension between the two.

Another basic tool every designer has for making great combinations between a title and a paragraph, is combining serif typefaces with san serif typefaces. This can only add to your design, when done right.  However, keep in mind that while serif fonts might be considered the more readable fonts for print, on screens they often tend to be pixelated on small low – res screens. Having said that, consider using serif fonts for titles, heading, and small paragraphs. Below are a couple do’s and don’ts when combining the two.

 

Responsive Web

When designing a mobile version of the website, don’t make the font sizes significantly smaller, just because the screen is smaller. Try aligning the page differently. Here is an example:

 

Hope you enjoyed the read and will keep in mind a thing or two on your next design mission 🙂

creative & technology
Explore our work!