Typography is the most common element in your website, after all visitors come on your website to read the content. No doubt, layouts and graphics play a key role but column width, type size and line heights are equally important. Typography is very important in providing an easily readable content to the visitors and gaining their trust. Web designers should be aware about basic rules that are necessary for a good typography.
It can be very helpful for designers to effectively communicate with their users and helping them to build a creative website that is easy for the visitors to use. Majority of the content that you see on the internet is based on the text so; it becomes an exciting challenge for the designers to set the type.
Do’s And Don’ts Of Web Typography
It is very important to make sure that your selected text is readable. You should also give some visual indications between your texts; it will make your text look powerful and more attractive to the reader. This is a very useful tool in encouraging your reader to quickly look at the important information while it is also useful to make a bond between large paragraphs so that reader can easily grasp it.
However, those designers that are experienced in their work know how to handle the typography and make the content look beautiful. But, what about those who are just starting out? Don’t you guys worry because, this post is for you. I would be sharing a list of some do’s and don’ts of Web Typography that will prove to be very helpful for you in your recent and all future designing projects. Here goes the list:
1. DO: Create a Typographic Structure
Always make sure to structure your typography properly. You can arrange the type by using different methods such as; color, bold, size, contrast and weight. It will help the user in finding the content. When you give a proper structure to your content, it becomes easy for the user to scan and read it. Keeping your entire text in one size will make it difficult for the readers to judge between headings and the body of the content.
DON’T: Keep The Text Small
It becomes very difficult for everyone to read when the body text is small. Always keep your default text size large so that, readers can easily see what’s written. Some people recommend the text size of 14-16 pt. Having a large text will create a good impression of your website because not everyone can read small text. However, other readers can easily adjust the text size from their computer screens. Also, keep your headings in large fonts so that readers know it as soon as they see it.
2. DO: Give Spaces In Your Text
Negative spacing is very important in making your content easily readable to everyone. If you give no room between your texts, your readers will be lost in following the text from one line to the next. The best way is to make line heights bigger so that even you can easily read it. Remember, use negative spacing as your power weapon to keep your readers focused on your content.
DON’T: Use All Caps For Text
When you have your text in all caps, you are actually making it difficult for your reader to focus on it and read it. It creates a bad impression such as you are shouting at the readers in an aggressive manner. While promoting any product or service, using all caps can be taken as spam by the readers and thus making your work worthless. Therefore, always have a control on when and how to use all caps for your text.
3. DO: Keep the Paragraph Lines Short
Readers can easily loose the focus on the text when you have long paragraphs lines for them to read. While keeping the lines too short is also a bad technique because, it can disturb the rhythm of the reader. They can miss words when you have very short lines for them to study. Many expert designers recommend the line length of your paragraph to be not more than 40-60 characters per line.
DON’T: Allow Centered Text in Your Content
Due to the un-even edges of the text block, centered text can be very difficult for the readers to understand. When every line is starting from a new point, it becomes harder for the readers to scan. Centered texts are considered un-professional because, they don’t align with other elements on the page. Always use left aligned text as default and if you have to use centered text, do it with proper control.
4. DO: Adjust the Spacing Between Text
You should always adjust the spacing between your lines and characters manually when you are working on a really important project. Paragraphs that are large should be given proper space so that it looks worth reading. For example, when you are going to design a logo for your client it is necessary to properly adjust each character so that they look adorable while reading every single letter of it.
DON’T: Use Tools like Photoshop
No doubt, Photoshop is among the best tools in the world to help you in designing. But, once you use them to adjust the space they will do it by guessing the best possible adjustment for your text. There are different options that let you set a mode for your text adjustment but, believe me they are not always accurate. The reason is that different typefaces need a different type of tweaking while software’s are designed to adjust in the same way. I would recommend you to do the adjustment manually on your most important texts.
5. DO: Use your Creativity In Underlines
You should be creative in the underlines that you put under different words in your text. It will give a good impression to the readers when you have your underlines in control. You can experiment different things such as; change up the stroke weight, create a double stroke, or transform the lines in different shapes etc. Underlines create an emphasis on the word so they should be good enough to create that emphasis.
DON’T: Keep Underline Default
Keeping the underline to default setting is a very ordinary thing now. It might not get fit with the word and destroys that emphasis that you wanted it to have. Default underlines look very awkward because, the system doesn’t knows the beauty of your word but you do. So, always design your own underline for any important word.
6. DO: Use Fonts That are Web Safe
While download font collection for your website, remember to use those fonts that are web safe. Safe web fonts are those that are guaranteed to be have installed on different browsers, make sure you see this before downloading the fonts. By choosing web safe fonts your website will be transferred from your original fonts to those fonts which your visitors have installed.
DON’T: Overload your Website with Fonts
Using too many fonts on your webpage is the worst thing that you can do for your website. You cannot impress your visitors when they are welcomed with different types of fonts for everything that they see. It will create a cheap and un-professional impression for your website among your visitors. Using too many fonts make it very difficult for the reader to read the content with total focus.
7. DO: Adjust the Contrast between Text and Background
Your font size is perfect, text is legible and every other thing is perfect but, still readers can’t read it why? Because the background contrast is poor and this is creating difficulty for the readers to focus. The contrast is very important to make your text clearly readable for everyone. I would recommend an off white background because, it is very smooth and you can easily read everything on it.
DON’T: Stress your Text
The best technique is to only emphasis on those words that are really in need of getting bold, underlined, or in italics. When your content is full of unnecessary emphasis on the text, it will look very awkward to the reader. Using keywords is a better technique that majority of the writers do rather than emphasizing too much in a single paragraph.
8. DO: Utilize the Grid Style
Grid style is very useful in providing a nice readability experience to the visitor. Above all, it makes your website design look attractive and natural. While keeping an eye on the visual, don’t forget about keeping a balance in font sizes because your page can only go in flow when everything will be in a balance from top to bottom.
DON’T: Forget about Accent Characters
Accent characters are very important to every site and make the site look professional. It creates a bad impression when the visitors types a comment and want to add an accent character but because your site doesn’t have it he/she cannot use it. You should utilize the accent characters correctly so that words are properly displayed on the site.
9. DO: Make the Most of Shade Variation
It is very important that the color of your body text and sidebar text are matching with each other. It will make your content look outstanding and readers will find it easy to read. You should use the shade variations in every important thing that is available on your website so that your important data gets the attention every time.
DON’T: Write Large Text Bodies in Sans Serif
I know that san serif fonts are very handy and give a unique look to the content but, try it on a large text and you will see the difference. I would recommend you to go for serif font as it is known better for its readability with curves and shapes. On the other hand, a serif font is relaxing for the eyes and guides the reader better than other fonts.
10. DO: Keep a Balance in Typographic CSS Codes
Keeping a balance in typographic will make the readability of your website too good for the visitors. You can also make your website structure in one piece when your main text will be in one font size. Properly using the balance in your typography will increase your website traffic because, if a website is good it gets famous very quickly and also it will increase the chances of growing higher in the Google ranking pages.
DON’T: Use text replacements like Cufón
Cufón is used to replace the text in the browser to give a custom feel, however it can get very wrong if you don’t know how to use it properly. The best way is to let the Web safe fonts handle it for you, because when you use font replacement for the web page it disturbs the reader from the actual point. I would recommend sticking with headings and main body for font replacement while letting Web safe font handle other text.
To Sum It Up.
This was my list of 10 Do’s and Don’ts of the Web typography that you guys should remember. You can always leave a comment below if you have anything to say or some more do and don’ts to share with everyone. I am always ready to learn more so write your thoughts in the below comment section. If you liked the article, please share it with your friends and other designers so that every can remember the basic principles in Web typography.
Image Credits. WebDesignLedger