Five Typography Tips for Better UX
0 likes158 views
The document provides five typography tips for better user experience (UX): 1) Use whitespace to increase readability by 20%, 2) Keep line length between 45-90 characters, 3) Provide sufficient color contrast between text and background, 4) Use large, easily readable fonts, and 5) Select fonts that are simple and clear like Arial.
Five Typography Tips for Better UX
- 1. Five Typography Tips for Better UX
- 2. Improvement in reading comprehension with white space 20%
- 3. I feel squished just looking at this! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elit ipsum, molestie eu tristique quis, dapibus eu nunc. Duis id risus ultrices massa tristique condimentum vel eu neque. Pellentesque tortor diam, vehicula a commodo ut, semper sed risus. Nam euismod ut purus eget hendrerit. Mauris ultricies urna vitae est aliquam convallis. Nam sapien justo, porttitor vitae nisi in, commodo iaculis nisl. Aliquam erat volutpat. Sed metus dui, condimentum vitae molestie quis, pellentesque a libero. In et nisi eget neque viverra pellentesque ullamcorper eget libero. Fusce semper blandit rutrum. Phasellus placerat orci leo, ac bibendum justo efficitur et. Praesent lacinia placerat mauris vitae faucibus. Cras sed nisl ut ante finibus pretium ut ac nunc. Little whitespace (negative space)
- 4. Some whitespace helps I feel better now that my words can breathe! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elit ipsum, molestie eu tristique quis, dapibus eu nunc. Duis id risus ultrices massa tristique condimentum vel eu neque. Pellentesque tortor diam, vehicula a commodo ut, semper sed risus. ● Nam euismod ut purus eget hendrerit ● Mauris ultricies urna vitae est aliquam convallis ● Nam sapien justo, porttitor vitae ● Commodo iaculis nisl Aliquam erat volutpat. Sed metus dui, condimentum vitae molestie quis, pellentesque a libero. In et nisi eget neque viverra pellentesque ullamcorper eget.
- 5. Line-length 45 characters with spaces I feel better now that my words can breathe! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elit ipsum, molestie eu tristique quis, dapibus eu nunc. Duis id risus ultrices massa tristique condimentum vel eu neque. Pellentesque tortor diam, vehicula a commodo ut, semper sed risus. ● Nam euismod ut purus eget hendrerit ● Mauris ultricies urna vitae est aliquam convallis ● Nam sapien justo, porttitor vitae ● Commodo iaculis nisl Aliquam erat volutpat. Sed metus dui, condimentum vitae molestie quis, pellentesque a libero. In et nisi eget neque viverra pellentesque ullamcorper eget. 45 - 90 characters of line length (measure)
- 6. Line-length 45 characters with spaces About 550 px I feel better now that my words can breathe! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elit ipsum, molestie eu tristique quis, dapibus eu nunc. Duis id risus ultrices massa tristique condimentum vel eu neque. Pellentesque tortor diam, vehicula a commodo ut, semper sed risus. ● Nam euismod ut purus eget hendrerit ● Mauris ultricies urna vitae est aliquam convallis ● Nam sapien justo, porttitor vitae ● Commodo iaculis nisl Aliquam erat volutpat. Sed metus dui, condimentum vitae molestie quis, pellentesque a libero. In et nisi eget neque viverra pellentesque ullamcorper eget. 45 - 90 characters of line length (measure)
- 7. Am I easy to read? Am I easy to read? Am I easy to read? Am I easy to read? Am I easy to read? Am I easy to read? Am I easy to read?
- 8. This is some text that you might want to read. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elit ipsum, molestie eu tristique quis, dapibus eu nunc. Duis id risus ultrices massa tristique condimentum vel eu neque. Pellentesque tortor diam, vehicula a commodo ut, semper sed risus. Nam euismod ut purus eget hendrerit. This is some text that you might want to read. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elit ipsum, molestie eu tristique quis, dapibus eu nunc. Duis id risus ultrices massa tristique condimentum vel eu neque. Pellentesque tortor diam, vehicula a commodo ut, semper sed risus. Nam euismod ut purus eget hendrerit. 8
- 9. This is some text that you might want to read. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elit ipsum, molestie eu tristique quis, dapibus eu nunc. Duis id risus ultrices massa tristique condimentum vel eu neque. Pellentesque tortor diam, vehicula a commodo ut, semper sed risus. Nam euismod ut purus eget hendrerit. This is some text that you might want to read. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elit ipsum, molestie eu tristique quis, dapibus eu nunc. Duis id risus ultrices massa tristique condimentum vel eu neque. Pellentesque tortor diam, vehicula a commodo ut, semper sed risus. Nam euismod ut purus eget hendrerit. Fails accessibility tests 9
- 12. Look at this font! Look at this font! Look at this font! Look at this font!
- 13. Arial - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel turpis convallis, faucibus massa placerat, pretium urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed mi mi. Curabitur egestas dolor eu erat auctor, ac finibus turpis condimentum. Curabitur vehicula risus id eros dapibus, a vehicula erat ornare. Quisque dapibus libero in condimentum ornare. Bangers - orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel turpis convallis, faucibus massa placerat, pretium urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed mi mi. Curabitur egestas dolor eu erat auctor, ac finibus turpis condimentum. Curabitur vehicula risus id eros dapibus, a vehicula erat ornare. Quisque dapibus libero in condimentum ornare.
- 14. Summary 1. Use white space to increase readability
- 15. Summary 1. Use white space to increase readability 2. Keep your line length (measure) short
- 16. Summary 1. Use white space to increase readability 2. Keep your line length (measure) short 3. Provide good contrast for your text
- 17. Summary 1. Use white space to increase readability 2. Keep your line length (measure) short 3. Provide good contrast for your text 4. Ensure fonts are large enough
- 18. Summary 1. Use white space to increase readability 2. Keep your line length (measure) short 3. Provide good contrast for your text 4. Ensure fonts are large enough 5. Use easily readable fonts