Desizn Tech logo
  • Home
  • Freebies
  • Showcase
  • Tutorial
  • Photography

Light Fonts Use in Web Design: Examples and Resources

By Kawsar Ali, 13 December, 2009 & filed under Showcase, Tips & Tools, Web design

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.

light_font_example

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

MTF

2. Eye Draw

Eye Draw

3. Arteye

ARTEYE

4. A White Box

A White Box

5. WebMynd

WebMynd

6. Sage Blue

Sage Blue

7. DEQQ

DEQQ

8. Weightshift

Weightshift

9. Duoh!

Duoh

10. Daniel Marino

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.
  • dark_on_light
  • 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.
  • small_to_big
  • 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.

New Garden

New Garden Font

Champagne & Limousines

Font

Secretcode

Font

Geo Sans Light

FOnt

Monako

Font

Caviar Dreams

Font

Print Clearly

Font

Euro Steiner

Font

Kravitz

19_kravitz

Existence Light

Font

CamelotDeNada

Font

Thin Franq

Thin Font

Walkway

Thin Font

Lane

Light Font

Jalane Light
Light Font

More Light Fonts

  • 30 Thin and Light Fonts That Should Not Be Free

There could lot more things we have not covered about the light fonts. Feel free share your opinion and ideas.

Pin It
Tweet

Author: Kawsar Ali

Kawsar Ali is a web designer who also likes blogging. He is the curator of Desizn Tech. In his spare time he walks around with a Nikon D5100 hunting for good textures.



Related posts:
  • 7 Useful Tools for Web Designers on the Web
  • 10+ Web Resources to Make Web Designers Life Easy
  • 50+ textures for Your Design Appetite and lot more Resources
  • Web Design Geeks Being Creative: 50+ Examples and Inspirations
  • Use of White in Web Design: Tips and Trends


49 Responses

  1. Web Design May 10, 2012

    great collection. thanks

  2. Cole July 23, 2011

    Informative post, I never make use of this kind of light fonts…..light fonts will also be attractive I’ll check it out.

  3. Australian Website Solutions March 13, 2011

    Just wanted to leave a quick comment – Thanks for your post, I enjoyed reading it. Cheers.

  4. ps3 error codes February 8, 2011

    very cool graphics. maybe i will try using these on my website to add some flavor to it.

  5. cityville January 5, 2011

    hello there lovely site and web theme. Hopefully I’m not troubling you I merely wanted to ask exactly what wordpress plugin you make use of to display the latest responses on your blog? I really want to do something like that for my free iphone 4 site but I can’t acquire the plugin or widget for it. Thanks for your time :)

  6. Aisha June 22, 2010

    What a beautiful post and beautiful website! thank you for the list of fonts. You are truly a artist.

  7. Afraz April 13, 2010

    WOW, great collection. but you should include also source fonts for the sites you specified.

    Thanks

  8. lirik April 7, 2010

    great post..thanks for sharing..

  9. Amy's logo design March 25, 2010

    En, very useful post about the font usage. For a successful design, color is just as important as the graphic itself. Thanks!

  10. Justin March 22, 2010

    Light fonts are great as long as you don’t get too carried away:)

  11. Mia March 7, 2010

    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 =-.

  12. Website Design India March 6, 2010

    Useful post,I never use this type of light fonts…..
    light fonts are also attractive i will try it.
    Thanks for Sharing.

  13. nyc limo service February 2, 2010

    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?

  14. asd January 26, 2010

    Very interesting post.. I didn’t know nothing about this thing..

  15. Wordpress hacks January 19, 2010

    Wow..the list is just so perfect..! Thanks for sharing.!
    .-= WordPress hacks´s last blog : Test Your Cross Browsing Compatibility =-.

  16. interiordesignclassonline.com January 17, 2010

    Great font tips I love using a light font in contrast with something more bold.

  17. Website Templates January 7, 2010

    Using light fonts is a distinct idea, but reading such type of fonts exerts pressure on sight to view the contents.

  18. francodane December 31, 2009

    Excellent resource,thanks for sharing this info
    .-= francodane´s last blog : Logo design realizzare un logo floreale con illustrator =-.

  19. austin area web designer December 25, 2009

    always learning something new, thanks for the info

  20. MessageForce December 25, 2009

    Yeah, light fonts should be used properly. I tried out a few light ones myself before I just settled on a bolder type, I guess because I prefer using letterpress. You have got beautiful collection.

  21. Web Design Kilkenny December 23, 2009

    Thanks for letting us know about these fonts – they will be useful for a couple of projects I’m working on.

    Eoin
    .-= Web Design Kilkenny´s last blog : Web Design Kilkenny – New Website Launched – Warehouse Tiles and Bathrooms =-.

  22. Shamima Sultana December 21, 2009

    Nice examples..thanks for sharing

  23. mrthoughts December 18, 2009

    there are so many different types of fonts it’s crazy, they should do a study to see how many are actually used

  24. Pixelbits December 17, 2009

    Slightly offtopic, but the screenshots you’ve taken with the darkening and light-effect. Did you do that in Photoshop or do you have a tool that does that automatically. :)

    • Kawsar Ali | DT Admin December 17, 2009

      It is taken using Photoshop. Black layer with low opacity on the top and. Then using the Marquee Select tool and feather options delete the are where you want to highlight

  25. Girlie | Brochures Printing Online December 16, 2009

    Awesome, awesome post! I had to look at the samples again. I’ll definitely share this post to all my friends on StumbleUpon. Keep the cool posts coming.
    .-= Girlie | Brochures Printing Online´s last blog : 22 Greyscale Brochure Design Inspiration =-.

  26. Piotr Godek December 15, 2009

    thanks for featuring EyeDraw :)
    .-= Piotr Godek´s last blog : I’m new! =-.

  27. honour chick December 15, 2009

    great examples, thxs for sharing ;)

  28. Victor G. December 15, 2009

    Nice article — DUGG!

    Yeah, light fonts should be used properly. I tried out a few light ones myself before I just settled on a bolder type, I guess because I prefer using letterpress.

    But you know what, instead of letterpress on light fonts, I think using one of those subtle darker fills for the bottom half of the text (or a light fill for the top half) would be okay, what do you think?

  29. 3d web design December 15, 2009

    Great post, thanks for this. Light fonts is very nice for me to.
    .-= 3d web design´s last blog : Изработка на новинарски сайт Вести =-.

  30. Bob Ruffolo December 14, 2009

    Great post, very informational!

  31. Web Design by 314media.com St. Louis December 14, 2009

    Awesome examples! I’m downloading some of these right now!! Cheers!
    .-= Web Design by 314media.com St. Louis ´s last blog : WordPress Design Hourly Rate =-.

  32. Sergio December 14, 2009

    Great article. Thanks for useful tips!!!

  33. Marcell Purham December 14, 2009

    Great fonts! Very elegant :)
    .-= Marcell Purham´s last blog : 4 quick tips to help you create a better mockup/design in photoshop =-.

  34. yan.k December 14, 2009

    Cool Post :)

    http://www.yank.fr

  35. Waheed Akhtar December 14, 2009

    Nice post with excellent collection. Thanks for sharing.
    .-= Waheed Akhtar´s last blog : 20 Creative Flash Websites From The Creative Minds =-.

  36. Creative ideas December 14, 2009

    Great article. Thanks for useful tips.

  37. Bariski | TutZone.net December 14, 2009

    What a insight man, Really liked this article. Thanks for compiling.
    .-= Bariski | TutZone.net´s last blog : 7 jQuery Cheatsheets For Every Designer & Developer to Have =-.

  38. Eric Grint December 14, 2009

    Had known many stuff i skipped through my designing experience.. luvly posts, thanks :)

  39. ThisIsInspired December 13, 2009

    Jalane Light is nice :)

    I prefer clean, classic type like Helvetica Neue Light (UltraLIght is too thin), and another good one is Vegur (fontsquirrel.com/fonts/Vegur)
    .-= ThisIsInspired´s last blog : Roundup: 10 Interior Design Blogs for Inspiration =-.

    • Kawsar Ali December 13, 2009

      I know Ultra Light is too thin, but I cant get enough of it though

  40. Hermitbiker December 13, 2009

    A great post about “lite fonts” and when or where they are used in web pages… a cool little post… with a slight tutorial twist… thanks Desizntech for sharing !!

  41. Uzair Khan December 13, 2009

    Beautiful collection. I went for a sleek light font based header myself for my portfolio.

    • Kawsar Ali December 13, 2009

      Your logo font is Kravitz right?. Looks nice.

      • Uzair Khan December 22, 2009

        yup it is. thanks :)

  42. Girish Chandran December 13, 2009

    My favorite thing is brilliant. I never thought an elegant site could be made using such light fonts and colors. You have stirred my thoughts. Thanx

  43. HiThro December 13, 2009

    Excellent resources to reference! Thank you for researching these and posting them.

    Another fantastic typography site / forum to find exclusive / new and foundry fonts is http://www.pilo.me
    It is the best typography forum for graphic designers / typographers on the internet. I believe it is an invite only site, similar to ffffound and behance, but a little more homegrown, personal and underground, but the content they have available is amazing. Simply Amazing.

    Thank you again, I will definitely be bookmarking this!

  44. Lam Nguyen December 13, 2009

    Cool post! I always love the thin fonts because of their elegance! Keep it up, bro!
    .-= Lam Nguyen´s last blog : Collection Of Awesome Christmas Giveaways Around The Web Design Community =-.

    • Kawsar Ali December 13, 2009

      True Lam. I am a sucker for light fonts

Stay Connected

rss twitter facebook google

Search


Cheap Tablet PC

Our Supporters

  • Cloud Storage
  • Dedicated Server
  • Modern Furniture
  • Online Business Printing
  • Online Backup
  • Logo Design
  • Wow Gold
  • Secure and protect your business with SiteLock.
  • Festklänningar
  • Blogroll

    AnimHut
    Designmodo – Web Design
    Design Superhero
    Inspireyourway
    iBrandStudio
    OurTuts
    Skyje
    Stock Images
    Vector Pack
    365icon
    TexTuts

    • About
    • Contact
    • Contribute
    • Privacy Policy

    Copyright © 2008-2013 Desizn Tech