![]() ![]() You can use the following values as a starting point and then edit them to what seems right to the typeface of your choice: But there are always exceptions (“SF Pro Text” guidelines suggest using positive letter-spacing only when a font size is 11px or below). 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). ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |