Follow these 19 tips to NOT suck at typography.
A mega thread π§΅
A mega thread π§΅
Before we begin, if you wanna see more content like this:
β‘οΈFollow me @webdesign_noman.
β‘οΈ RT the above tweet.
Now let's continue with our thread...
β‘οΈFollow me @webdesign_noman.
β‘οΈ RT the above tweet.
Now let's continue with our thread...
1. Chose Fonts Carefully.
Chose fonts that are easier to read.
There is no point in using cool fonts if the reader cannot understand your content.
Chose fonts that are easier to read.
There is no point in using cool fonts if the reader cannot understand your content.
2. Use The Minimum Number Of Fonts.
Too many font styles can make the site look unprofessional and hard to read.
Try to limit yourself to a single font and two options for saturation, for example, normal and bold.
Too many font styles can make the site look unprofessional and hard to read.
Try to limit yourself to a single font and two options for saturation, for example, normal and bold.
3. Font Size.
If your text is too small...
No one is going to read it.
Keep the size at least 16px (or even higher) for the best reading experience.
If your text is too small...
No one is going to read it.
Keep the size at least 16px (or even higher) for the best reading experience.
4. Line Height.
On long form body text...
If line height is too little...
The text becomes harder to read.
If the line height is too large...
The text looks awkward.
Keep the line height to 160% of the font size for the best readability.
On long form body text...
If line height is too little...
The text becomes harder to read.
If the line height is too large...
The text looks awkward.
Keep the line height to 160% of the font size for the best readability.
5. The smaller the font size, the more generous your line height.
As the small text is harder to read increasing the line height helps improve legibility.
As the small text is harder to read increasing the line height helps improve legibility.
6. Keep the line length short.
Long text line makes the text difficult to read and look unattractive on a website.
For the best reading experience, a line length of 50-75 characters is ideal.
Long text line makes the text difficult to read and look unattractive on a website.
For the best reading experience, a line length of 50-75 characters is ideal.
7. Donβt Justify It.
Justifying the text creates gaps between the words which donβt look nice and makes the text harder to read.
Justifying the text creates gaps between the words which donβt look nice and makes the text harder to read.
8. Center Align.
Use center alignment if the headline is one to two lines short.
If the text block is longer than two to three lines, it will always look better left-aligned.
Use center alignment if the headline is one to two lines short.
If the text block is longer than two to three lines, it will always look better left-aligned.
9. Avoid Using All Caps For Paragraphs.
All caps text is fine in headings and short sentences.
but for a large amount of text donβt force your users to read all caps text simply because itβs much harder to read.
All caps text is fine in headings and short sentences.
but for a large amount of text donβt force your users to read all caps text simply because itβs much harder to read.
10. Keep Letter Cases Consistent.
Consistency is not JUST important for colors, fonts, etc.
It's also important for letter cases.
So, Keep letter cases consistent throughout your site.
Consistency is not JUST important for colors, fonts, etc.
It's also important for letter cases.
So, Keep letter cases consistent throughout your site.
11. Avoid The Edges.
On mobile...
leave space from the edges for better readability.
I use a padding of 16px from both sides.
On mobile...
leave space from the edges for better readability.
I use a padding of 16px from both sides.
12. Lighten Up The Long Text.
When it comes to long-form content, using pure black text can be a little harsh on the eyes.
You can easily fix this by choosing something like a Dark Grey (ie; # 1A1A1A) to make that text lighter and make it a little easier on the eye.
When it comes to long-form content, using pure black text can be a little harsh on the eyes.
You can easily fix this by choosing something like a Dark Grey (ie; # 1A1A1A) to make that text lighter and make it a little easier on the eye.
13. Align The Text To One Axis.
Align the text to one axis to make it easier to scan and read.
Align the text to one axis to make it easier to scan and read.
14. Keep The βRagβ Clean.
When working with a block of text with a left or right alignment, be sure to keep the rag (the uneven side) clean without any sudden βholesβ or awkward shapes.
You can achieve a clean rag by adjusting the line length or the font size.
When working with a block of text with a left or right alignment, be sure to keep the rag (the uneven side) clean without any sudden βholesβ or awkward shapes.
You can achieve a clean rag by adjusting the line length or the font size.
15. Contrast.
Avoid using light grey text on white background.
Ensure that thereβs enough contrast between the text and the background so that itβs easily readable.
Avoid using light grey text on white background.
Ensure that thereβs enough contrast between the text and the background so that itβs easily readable.
16. Text over an image.
When placing text over an image...
Add a dark overlay on the image to make the text easily readable.
When placing text over an image...
Add a dark overlay on the image to make the text easily readable.
17. Proximity.
Headings should not hang between paragraphs.
they should be closer to the paraph they belong to.
Headings should not hang between paragraphs.
they should be closer to the paraph they belong to.
18. Not sure what font to use on your site?
Try these...
Try these...
19. Avoid Walls Of Text.
Unless you are writing a blog, keep the text simple, brief, and to the point.
Too much text can be discouraging and overwhelming for the users.
Unless you are writing a blog, keep the text simple, brief, and to the point.
Too much text can be discouraging and overwhelming for the users.
That's it for this thread folks π₯
Found it valueable?
Don't forget to like the first tweet and retweet it π
Found it valueable?
Don't forget to like the first tweet and retweet it π
Loading suggestions...