Since web fonts are becoming more common these days I have been on the search for free, high quality fonts to use in my web projects. I will share with you all my tested and tried favorites, starting with Edel Sans.

Initially I was looking for a good web font replacement for one of my favorite commercial typefaces, Avenir. My search resulted with Edel Sans, which I must admit I have been using in nearly every project. I can’t help it, Edel Sans is not only a crisp, clean typeface that works with a lot of projects, it just looks fantastic on screen.

Edel Sans comes in three weights: Regular, Light and Bold.

I hope you’ll agree that Edel Sans has earned a permanent spot in your web font repertoire.

Download the free typeface at 26+.

Create your @fontface kit at Font Squirrel

Examples

Below are some live CSS examples. Feel free to use these styles in your designs.

Large Headings

CSS:

font-family:'EdelsansRegular';
font-size:28px;
color:#b46fa3;

Demo:

Lorem ipsum dolor ismet

All Caps

CSS:

font-family:'EdelsansRegular';
font-size:18px;
color:#Abc681;
background:#F6F7E4;
padding:10px;
letter-spacing:3px;
text-transform:uppercase;
line-height:21px;

Demo:

The quick brown fox jumps over the lazy dog.

Secondary Heading with Tight Spacing

CSS:

font-family:'EdelsansRegular';
font-size:20px;
color:#98d0e8;
letter-spacing:-1px;

Demo:

Aenean Felix’s justo

Paragraph Copy

CSS:

font-family:'EdelsansRegular';
font-size:14px;
line-height:22px;

Demo:

Lipsum dolor sit amet, consectetur adipiscing elit. Donec risus lectus, ullamcorper eu viverra in, feugiat eu metus. Praesent non iaculis eros. Aenean felis justo, interdum non vulputate a, hendrerit facilisis felis. Aliquam erat volutpat. Duis vestibulum dui nec neque commodo sit amet vehicula libero commodo. Nunc augue nulla, euismod eget viverra nec, pellentesque ac neque. Vestibulum auctor lobortis lacinia. In tempor dictum pellentesque. Integer vel metus tellus. Aenean tempus tortor sed turpis sagittis blandit. Nam ac nulla quis lorem convallis sodales ut adipiscing ante. Nulla sit amet viverra nulla. Duis pulvinar consequat enim mollis gravida. Duis nibh ante, eleifend id rutrum et, malesuada non libero. Vestibulum sed tellus hendrerit ligula lacinia facilisis.