(translation) the use of letter spacing to improve the readability of all capital text

   All capital text is like spice , Don't overuse . Use a small amount of all capital text in the page content and menu title , Help to contrast with the text . But if there is too much all capital text in the title , Users need to work hard to understand . All capital text is easy to find , But it's hard to read .

Letter spacing for all uppercase text

   To make all caps easy to read , The letter spacing should be increased . An all capital style without letter spacing , The letters are all crowded together , Difficult to distinguish words .

   All words have similar outlines Right angle rectangle , This means that each letter has the same height , There are no strokes rising or falling . The rising and falling parts of strokes It can improve the recognition of words , Without them, users' attention will be more focused to recognize words , Reduce reading speed .
   Increase letter spacing , Change word outline from straight line to tooth shape , Let each word have a unique outline , Improve word recognition . Users don't need to pay much attention , You can quickly browse the content at a glance .

Avoid excessive letter spacing

   All capital text will be difficult to read without letter spacing , Too much spacing can also affect readability . The letters are too wide apart , Users may not be able to associate letters with words .
   In general , All capital text is spaced between letters 5-12% Within the scope of . Use CSS when , Can be letterspacing Property is set to 0.05-0.12em Within the scope of , Select the most suitable value according to the design experience of the designer .

Example of letter spacing

   Apple Music app The letter spacing design of the content and menu title in is very appropriate , The spacing is small but sufficient , Allow users to read all capital text at a glance .
   Apple Music app The title of is in full capital text , Contrast with the text . In fact, you can also use the font thickness and size to distinguish between the title and the body , There is no need to use all capital text , For manufacturers , Choose whichever style can increase the brand appeal .

When all capital text is easy to read

   In some cases , It is easy to read all capital text without letter spacing , For example, large full capital text is generally easy to read , Because usually any large text is easy to read .
   In another case, all uppercase text contains only 1~2 Word . If there are few words , Make it easy for users to read without much benefit , The main purpose of using all capital text is to attract users' attention , This is where it can be used .
   Letter spacing applies to all capital headings that contain many words , This is especially important for users who need to read the title . All capital text does have a place in the user interface , But it needs designers to use it correctly , Avoid affecting readability .

Original address ：https://uxmovement.com/content/how-letterspacing-can-make-all-caps-easier-to-read/