As web development (I am generalizing and including all the fields and parts of web development) is a career that we need to keep studying and learning constantly, I usually read a lot books and especially blogs. I have tons of books that I read and study; however, books tend to take a while before they are published with new trends or technologies, which is very crucial for us to keep updated. On the other hand, blogs and online magazines release new articles on a regular basis, and they post about new technologies and techniques before it is released by any publisher. Thus, reading online is part of my daily basis, however usually I cannot finish reading some articles because of the lack of basic usability principles implemented. Here are some common typography mistakes made by many websites, and I hope you find it useful.
Contrast Between Text and Background
Designers tend to forget about this basic usability principle in Web Design and create very light text on a white background. For example, it is very popular to see light gray colors on white, while everybody knows that it makes it very difficult for users to read the content of the page. However, this does not mean that you have to use #000 as your color for text when you have a white background. Colors like #444, #333, and #222 could be used and are not too hard on the eyes. I personally see dark gray colors as pencil over white paper, which feels natural and everybody has been used to it since the moment they learn how to read and write. The black color is too strong, and I see it as black pen over white paper.
Font Size is Too Small
Some years ago, D Bnonn Tennant published an article in Smashing Magazine about the minimum size of the font should be 16px, and it provides thoughtful reasons why you should use it in your designs. This syndrome is very popular on homepages of themes that are distributed as Premium templates for platforms like WordPress, Drupal, etc. I believe that 12px font works successfully on footers where the users don’t need to read it in order to gain the information provided by the page. However, I would prefer using 16px or bigger for the text on the page. In addition, even if you use font-size of 16px, you need to test the font in your browser, because different font-families could look smaller even when they are 16 pixels and this is due to x-height of the font (Weinschenk 2011).
Anchor Tags Are Not Obvious
Anchor tags or links should be very obvious and straightforward. You have to be able to know not only that it is an element that can be clicked on and can send you to another page, but also you should be able to know if you visited that link before. All links that belong to the content should have the states of visited, hover, active, and link so users know what links and pages have been visited. In addition, links should be underlined or at least different color from the content thus users are able to identify them easily.
Using Decorative Fonts
As HTML5/CSS3 has helped the designers to be more creative and user fonts that were not typically found on browsers, that has created a new monster which includes decorative fonts into a webpage. Decorative fonts usually are hard to read and understand and just slow down the reading speed of the visitor. It is hard to scan a page when the content is created using decorative fonts.
Designers hate fonts like “Comic Sans”, however, for this particular scenario. Some fonts added by designers could create the same effect of comic sans in their users.
Conclusion
The web design community tends to follow new trends even when they are not the optimal approach for a particular design. I hope this short post helps new designers to realize that the web is not just decorative fonts, but a form of communication. Moreover, the main goal of a website is to communicate, thus if the site does not provide fonts that are clear to the users, the site is not doing its main purpose.
References and Further Readings:
- 100 Things Every Designer Needs to Know About People by Susan M. Weinschenk, Ph. D. (Book)
- The 100% Easy-2-Read Standard by Oliver Reichenstein
- 16 Pixels: For Body Copy. Anything Less Is A Costly Mistake by D. Bnonn Tennant
