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.

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

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


Author:

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


  • Afraz

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

    Thanks

  • http://liriktube.blogspot.com/ lirik

    great post..thanks for sharing..

  • Justin

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

  • Pixelbits

    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. :)

    • http://desizntech.info Kawsar Ali | DT Admin

      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

  • Eric Grint

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

  • http://desizntech.info Kawsar Ali

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

  • Hermitbiker

    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 !!

  • http://desizntech.info Kawsar Ali

    True Lam. I am a sucker for light fonts

  • Uzair Khan

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

    • http://desizntech.info Kawsar Ali

      Your logo font is Kravitz right?. Looks nice.