We all struggle at times with basic typography elements. With these basic rules of thumb, you can prepare good, readable content. You do not have to be a designer to work with these elements. It is just common sense.
1. Design for mobile
You can narrow the screen of the browser to up to 320 pixels, and see if your content is clearly viewable on a mobile screen. You can select the font type accordingly, and adjust the other properties for better readability. Put it to test on an IOS simulator to test. You can adjust the viewport meta tag for better viewing.
2. The paragraph font size should, at least, be 1em
This size makes it comfortable to read. It is advisable not to go below this size as it makes it difficult for the eye to read.
3. Begin with a line height of 1.5
The line height of 1.5 works well with many font typefaces. If it goes below this size it is difficult to distinguish each line differently. You can increase the height as per your requirement if you like, but do not go below the mentioned height. If you experiment with a smaller height size, you will observe that the text looks cramped, but once you gradually increase the size to 1.5, you will see how your text opens up.
4. Distinguish your paragraphs with line height
This makes space between your paragraphs. The line space value should be equal to the line height for consistency. If you have chosen the ideal line height of 1.5 as mentioned above, then your space should also be 1.5 in value.
5. 66 characters are the best
The readability is good with this size. There has been menu rule of thumbs, such as 55-75, 45-90, but the ideal one is 66 character per line. As there is more character per line, your height also increases. It is better to adjust the height till its 66 characters. It sits well with the background.
6. Target 30-40 character per line for narrow paragraphs
The 30-40 character is a rough guideline, which can vary from font to font. A Georgia font will be fine with a 40 cut off, however, a Verdana font is wide and you might have to decrease the characters so that it can fit well.
7. Try to use a max width with ideal length
Select the max-width property. You can select by trial and error till you achieve the length to achieve the 66 character rule.
8. Aim 30-40 character per line for narrow paragraph
The 30-40 guideline is a rough benchmark. A 40 character Georgia will fit well whereas a Verdana, which is a wide font will not fit within 40 characters.
9. Left align paragraphs
Justification is good as wide spaces, making it difficult for the eye. There are excessive spaces that do not look good. Left align your paragraph for good readability. You do not even have to set the CSS.
10. Learn from designs in the wild
When you design the web page, try to learn, how they did it. Try to understand the font, style, typeface, letter space, white space, etc.
11. Tweak the height
- Increase the line height
- Decrease the Line Height
- Thinner lighter text
- Heavy, thicker text
- Dark text on light background
- Light text on dark background
- Smaller x-height font
- Laser ‘x’ height background
- Narrow lines, full character per line
- Wider lines, more character per line
With these simple to-dos, you can make even simple copy look attractive. A good readable text is better than cluttered ones, no matter how good the content.
May your garden teem and throng with customers
Pigtail Pundits essences the expertise from 700+ projects in 22 years on the web. Explore digital marketing services that hypnotically draw customers to your business.
Entrust your digital marketing to experts today.
We specialise in Pay-per-click advertising, Social Media Outreach, Search Engine Optimisation, Conversion Rate Optimisation, Premium websites that convert, Content Marketing that works, and Awesome Training for your In-house Teams on digital marketing.
Come, share this article and show us some comment love.
If you found this article to be interesting, do share it with your friends. Wish to comment on it with your own observations? Go right ahead and use the comment box.
The Pigtail Pundits Network
- Web Audits for Leads
- School Marketing CMS
- Conversion Optimisation Hacks
- Websites built on ProcessWire
- Online Marketing that Yields Results
- Content Management System
- Content Marketing
- Conversion Optimization
- Information Architechture
- Social Media
- Web Design
- 6 Qualities That Differentiate a Great Programmer From an Average One
- 6 Reasons Why Front End Web Development Is a Great Career Choice
- 3 ways how digital marketing will boost your web-development career
- Short Copy, or Long Copy? Heads I Win, Tails You Lose.
- Tips for Restaurants to Thrive Amid COVID-19 Outbreak
- Masterclass on ROI-Driven Websites Receives A Huge Response