Web Fonts: Back to Basics
- Agi Fidelis
- February 25, 2013
Text is simply the most reliable and most expressive medium for passing across information on the web. As a designer who designs for the web, having a sound understanding of how typography works on the web is a great skill that you should have under your belt. Way back in elementary school, my teacher, (name withheld,) defined communication as “a means or medium of passing across understandable messages.” From this definition, it is absolutely clear that communication becomes ineffective if the consumer is unable to understand or comprehend the information that was intended for his consumption.
As web designers, when going in on a project, we are often tempted to sacrifice the legibility and readability of our textual content at the altar of aesthetics and usability. Truth be told, most web designers and usability experts have failed in this regard. Despite the fact that the art of typography is one that predates the birth and existence of the web, most designers still pay little attention to it, and its poor application costs clients a lot through a subtle reduction in the effectiveness and conversion rates of their websites.
When it comes to designing for the web, as a designer, you should see yourself as an information architect of sorts. Most of your choices should be geared towards ensuring that your users get the textual information or textual content that that is intended for their consumption.
There are so many factors that could limit the ability of your users to consume content effectively on your website. Below are some of the factors.
Assigning the right or appropriate colors to fonts could make a whole world of difference. Here is a simple rule, the color of your fonts and that of the background of its containing element should bear a striking contrast. Also, site elements such as links should be styled with contrasting colors so that their current state (unselected, hover, selected,) is obvious.
Site elements like titles, headings, links and paragraphs should all have distinctively uniform sizes. The sizes should be proportional and uniform throughout your entire site.
The styling that you apply to any block of text on your site should reflect the purpose that such a block of text is intended to serve. If a block of text is purely decorative, avoid using color tones that would grab the user’s attention. However, if the block of text is purely informational or functional, you should consider applying a color tone that would attract and grab the user’s attention and cause him to act appropriately.
Following trends has it pros and cons. Young designers are the worst hit in this regard. If you have to apply certain styles to your fonts, you should double check to ensure that such styling wouldn’t affect the legibility and readability of your content. Certain fonts require more whitespace, letting-space and word-space than others. Some CSS styles are only best suited for certain fonts.
Agi Ogaga Fidelis is a web and mobile developer from Nigeria who hearts design and blogging in all its forms. He has an insane obsession for coding and enjoys experimenting with dynamic languages in his spare time.
- Infographic: 2016 Web Design Trends to Boost Conversions
- 5 Defense Strategies Against High Bounce Rates
- Infographic: Is it Ever Ok to Use the Desktop Hamburger Icon?
- Spring has sprung: simple images that invoke spring into your designs
- 10 Web motion design trends to make your site stand out
- Infographic: 7 divine considerations for improving page load speed
- Surprising the Snobs- Big Names that use WordPress
- How to create a professional looking political candidate palm card in under 10 minutes
- 10 Beautiful Landing Page Designs
- Breaking Bad Photoshop habits: follow these steps every time you design to be as efficient and organized as possible.