We know that website visitors have little time and patience to read your content thoroughly. Therefore, they always scan the content. If you want to make your website content more readable and scanning friendly, giving appropriate contrasts in between the text blocks is a welcome step.
Eye Scanning Friendly Content
Usually, our content documents or website content have a set pattern: title comes first, summary/snippets or sub-heading follow it, and finally body texts fill up entire page/web page. In order to make content more scanning friendly we use various tactics for big size content or documents such as text styling, text colors, text indentations, etc. amongst them text styling is used widely in web designing community in following ways:
- Headings (H1 – H2)
- Sub-Headings (H3 – H6)
- Bold Texts/Phrases
- Italic Texts Or Underline Texts In Some Cases
- Change The Font Size
However, for aesthetics purposes, we can’t apply many styling techniques if we are bound to use a theme and making responsive designing. It is true that responsive web designing or mobile designing compel us to use only universally accepted mobile browser friendly fonts or mobile OS friendly fonts in case of mobile apps.
Therefore, we have little room to do outstanding aesthetics in our modern responsive web designing. For instance, if use heavy fonts for the main title of the page we have two options remain for the summary or taglines below the title. One is to use fonts with somewhat bigger size than normal body fonts. Second is to use light colored fonts to create a good contrasts between all three blocks.
Now, if you have some readers with color blindness or your web designers use similar colored background in theme. You may lost the readability of the texts. Thus, the best alternative is to use light typeface fonts instead. For sake of your knowledge, I would like to clarify that lightweight fonts are differing from the light typeface fonts sharply. Lightweight means fonts with small sizes than standard or normal fonts. Whereas light typeface fonts have thinner font body. If you are using vector-designing tools, you may have obvious differences in mind.
Where to Use light Typeface Fonts
As described above, we can use light typeface fonts in between the title and body in summary in particular. Another possible use case is to use light typeface fonts in heading itself and rest of text blocks with light color fonts and regular fonts.
On modern websites, many websites (My Favorite Thing) have main menu in light typeface fonts while many have main headings (h2 – h3) in light typeface against the rest of the web page. Whereas many (A White Box like websites) use them for content box heading and in the banners.
The science behind aesthetic effects of light typeface fonts in headings is that regular headings are in bold typeface therefore, they look garish due to their high color intensity around the text letters. In case of light typeface this intensity thins out and also fainting the color intensity so even colorful heading don’t overwhelmed us and gives cool effects to our eyes without missing their highlighting capabilities.
Big brands are always in search of pleasant and innovative ways to make their presence on web and prints too. Therefore, their logo, taglines, banners need superb aesthetics. Light typeface is one of the pleasant solution for their web and print designers. Using light typeface fonts makes their brand more modern and outstanding from the crowd.
We know normal fonts use more ink when printing them whereas lightweight typeface reduce the ink use and save lots of waste of ink hence money as well as give absolute readability to the printed documents. Thus, if your website has receipts, coupons, contract forms, tickets, etc. content especially made/publish for printing purposes don’t miss to experiments with light typeface fonts and save inks of your users/customers’ printing machines and also offer decent and scan friendly documents/papers.
Perhaps, this is the reason that modern resumes are using light typeface very often and even sometime entire resume is using light typeface fonts with various tactics to create contrasts and make it scanning friendly.
Where Not to Use light Typeface Fonts
If you use light typeface fonts on entire website it might have ugly and non-readable look so don’t overwhelmed or be craze and use light typeface fonts in justifying manners i.e., in sparingly and with aesthetic point of views only.
For instance, small body text in light typeface may lost readability so avoid using them there. Same the way you need to either create color contrasts with light typeface fonts by applying strong color to the fonts against the light colored background; or use light color for light typeface fonts when background has strong dark color.