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.
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.
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 🙂