Learn a little about typography to make a big improvement to the UX of your website.

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

10. 10
https://webaim.org/resources/contrastchecker/

11. 22px
20px
14px
24px
16px
18px
12px

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