{"id":5017,"date":"2020-06-03T13:19:00","date_gmt":"2020-06-03T13:19:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=5017"},"modified":"2020-08-19T13:52:22","modified_gmt":"2020-08-19T13:52:22","slug":"letter-spacing-a-guide-for-web-designers","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/tutorial\/letter-spacing-a-guide-for-web-designers\/","title":{"rendered":"Letter Spacing: A Guide for Web Designer’s"},"content":{"rendered":"\n

Most of the information we gain comes through reading, so it makes a lot of sense to pay attention to the words when designing. There are many aspects of typography, but one thing which helps in improving the quality of design is letter-spacing.<\/p>\n\n\n\n

Letter-spacing<\/strong> is about adding and removing space between letters. 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. Kerning <\/strong>is best left to type designers, besides which, unlike letter-spacing there is currently no way to control kerning in CSS.<\/p>\n\n\n\n

I believe that practice and a lot of observation will change the way you treat letter-spacing in your work as well.<\/p>\n\n\n\n

The Purpose of Letter-Spacing<\/h2>\n\n\n\n

The main purpose of letter-spacing is to improve the legibility and readability of the text. Words act differently depending on their size, color, and the background they are on. By adjusting letter-spacing to the environment you are working with you will help readers consume your information faster, and more efficiently. The fun part is that they won\u2019t even notice it \u2014 that\u2019s the whole point of the job.<\/p>\n\n\n\n

Bear in mind that typographers think about\u00a0letter-spacing and kerning<\/a> when designing a typeface. It means you don\u2019t have to apply it to all your text, but in order to have an understanding when it\u2019s necessary, you should know some basic principles, and use good typefaces.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

How Letter-Spacing Affects Legibility and Readability<\/h2>\n\n\n\n

The legibility and readability of your text depend on things like line-height, paragraph length, font size, typeface choice, letter-spacing, and much more. Regarding letter-spacing, if you are just getting into typography, the best thing you can do is not overuse it. What I mean by that is simply don\u2019t make the distance between letters too big or too small; even if you think it looks good, people will struggle reading it, and that will ruin their experience.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Letter-Spacing Capital Letters<\/h2>\n\n\n\n

Capital letters are designed with the intention that they will appear at the beginning of a sentence or proper noun, in combination with lowercase letters. When capital letters are next to each other, the space between them is too tight. So in order to achieve better readability, space needs to be increased. This applies to both large and small font sizes.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Letter-Spacing Headlines<\/h2>\n\n\n\n

If you are using well designed fonts, you can be sure that they are calibrated well, and you won\u2019t need to make any major adjustments to them. However, the problem with headlines is that at larger scales the space between letters looks unbalanced. It can be fixed by increasing or decreasing the letter-spacing value.<\/p>\n\n\n\n

There are no strict rules for letter-spacing \u2014 there are a lot of typefaces and all of them require an individual approach \u2014 but if you look at how big companies like Google and Apple treat their typefaces, you can find a lot of valuable information there.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Let\u2019s take a look at the \u201cRoboto\u201d and \u201cSan Francisco\u201d typefaces (the first one is used in Material Design and the second one in Apple\u2019s ecosystem). Headlines from 20 to 48 pixels have either a positive letter-spacing value or none. If the font size is bigger, letter-spacing becomes negative. These exact numbers are not going to work that well for other typefaces, but after trying different approaches I can state that it\u2019s a common pattern.<\/p>\n\n\n\n

I\u2019ve tested several guidelines for letter-spacing and the one that was published by Bazen Agency<\/em> works for a lot of popular typefaces. It will be a good starting point for you, but you can always apply additional adjustments:<\/p>\n\n\n\n