Light Fonts Use in Web Design: Examples and Resources
Light/thin fonts are the fonts that are usually slim and slender than usually fonts. Using light fonts one can create beautiful typography, websites, banner and etc. In this post we are exploring basic characteristics of lights fonts , some examples of light fonts and sharing some best free light fonts on the web.
What the Hell is Light Font?
Light font does not mean that the font will be titled as light font. It is all about visual aesthetic. One way to distinguish light font is obviously the size . The font body size is very thin and most light font tend to have pointed serif and ascender . For example : look at the following image. There are couple of light fonts in the image compared to regular Helvetica. That should give you general idea what light fonts should looks like. Some fonts also goes to Ultra Light which are really really thin.
Some Examples?
Below are some examples of how light fonts are used in web design. You will see that light fonts are used in title, tagline, navigation, buttons and more through out these websites . We have highlighted the area where light fonts are used.
1. My Favorite Thing
2. Eye Draw
3. Arteye
4. A White Box
5. WebMynd
6. Sage Blue
7. DEQQ
8. Weightshift
9. Duoh!
10. Daniel Marino
Do’s of Light Font
- Use contrarys color such as dark background color and light font color or dark font color and light background color.
- Use Bigger font size. Use it for tagline, little intro, headline.
- Keep it simple
Don’ts of Light Font
- Don’t make the font color similar page content! Makes the font hard to read
- Since the font is already light don’t use tiny tiny size such 10 px. Keep it above 14px. Makes the font legible.
- Don’t over use it. Light font pops out when it is used wisely among regular fonts. Using too much light font make the webpage distracting and visually annoying.
- Don’t try Letterpress with light fonts. Probably won’t see the effect.
Web Safe Light Fonts ?
There are not that many web safe lights font yet. We would have to wait for CSS3 for that. For now your best bet is using Helvetica, Courier New. They look pretty light compare to other websafe fonts. There is also javascript solution if you really want to use a font. Using light font in images is best method for now.
Best Light Fonts on the Web
We went through couple of font websites and gathered most downloaded and nice looking light fonts. Yes they are all free.
More Light Fonts
There could lot more things we have not covered about the light fonts. Feel free share your opinion and ideas.
If you enjoyed this post, get free updates by email or RSS.
Posted Under: Showcase, Tips & Tools, Web design
Tagged: Fonts, Light fonts
What a beautiful post and beautiful website! thank you for the list of fonts. You are truly a artist.
WOW, great collection. but you should include also source fonts for the sites you specified.
Thanks
great post..thanks for sharing..
En, very useful post about the font usage. For a successful design, color is just as important as the graphic itself. Thanks!
Light fonts are great as long as you don’t get too carried away:)
This was one of the best roundup of Light Fonts Ive come across , I like the way you have exemplified the use of Light Fonts through the display of various sites using them . I have a vast collection of fonts , and despite the fact that my preference is rounded bold fonts such as Vag Rounded , I love many of the lighter fonts as well such as : Monako, & Steiner and of course : Caviar Dreams & Champagne & Limousines which are by my good & SUPER Talented friend NYMPHONT .
Great roundup ! Kudos :)
M.
Mia´s last blog : Steampunk art : revisited
Useful post,I never use this type of light fonts…..
light fonts are also attractive i will try it.
Thanks for Sharing.
very informative…. but i donk know about the fonts thou!!!! do light fonts have to be like this all the time is very thin and tendendy to have pointed serif and ascender?
Very interesting post.. I didn’t know nothing about this thing..