It’s a common practice when a font size is lower than 13px to increase the space between letters to make it legible.
Unlike headlines and body text, smaller font sizes don’t have many variations in letter-spacing. You can use the following guidelines for body text, which I have tested with several typefaces: By increasing letter-spacing by 1.5% you will see that the text is now easier to read. At a small size, the letters are too close to each other, which leads to poor legibility. Let’s take, for example, condensed fonts. (There’s an argument that he was only referring to blackletter fonts.) Some designers took it as a hard rule and now never adjust the letter-spacing of lowercase text.īased on my practice and by looking at the work of designers I can’t agree with Goudy, because sometimes small changes can make a big difference in how your text performs. If you ever read anything about letter-spacing, you’ve probably have seen this popular wisdom from typographer Frederic Goudy: “Anyone who would letter-space lowercase would steal sheep”.
They are well balanced and it saves a lot of time. If you happen to design a lot of apps or you’re planning to do that, one thing that helps me is using the default Material Design and Apple guidelines for their typefaces. 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. Most of the information we consume happens through reading, so it makes a lot of sense to pay attention to the words when designing.
0 kommentar(er)
