

It will be a good starting point for you, but you can always apply additional adjustments: I’ve tested several guidelines for letter-spacing and the one that was published by Bazen Agency works for a lot of popular typefaces. These exact numbers are not going to work that well for other typefaces, but after trying different approaches I can state that it’s a common pattern. If the font size is bigger, letter-spacing becomes negative. Headlines from 20 to 48 pixels have either a positive letter-spacing value or none. Let’s take a look at the “Roboto” and “San Francisco” typefaces (the first one is used in Material Design and the second one in Apple’s ecosystem). It means you don’t have to apply it to all your text, but in order to have an understanding when it’s necessary, you should know some basic principles, and use good typefaces. The fun part is that they won’t even notice it - that’s the whole point of the job.īear in mind that typographers think about letter-spacing and kerning when designing a typeface. By adjusting letter-spacing to the environment you are working with you will help readers consume your information faster, and more efficiently. Words act differently depending on their size, color, and the background they are on. The main purpose of letter-spacing is to improve the legibility and readability of the text. I believe that practice and a lot of observation will change the way you treat letter-spacing in your work as well. Kerning is best left to type designers, besides which, unlike letter-spacing there is currently no way to control kerning in CSS. Some people confuse it with kerning, but these two are different letter-spacing affects the whole line of text, whereas kerning adjusts the space between two individual letters at the time. Letter-spacing is about adding and removing space between letters. There are many aspects to typography, but one of the things that helped improve the quality of my design was letter-spacing.

The resulting table is the same, visually, but without all the unnecessary paragraph marks! Now, you can modify, add, and even delete headings without messing up the format of the heading row.Most of the information we consume happens through reading, so it makes a lot of sense to pay attention to the words when designing.


