30 Examples of Effective Font Replacement in Web Design

By / Apr 21, 2011 / Inspiration
shares

Typography is one of the most important aspect of effective web design. Proper font use can improve your website’s readability and user experience. Well selected fonts can help you to make your website more attractive for your visitors. There are a lot of possibilities to implement custom fonts on websites using Cufón, @font-face, Google Fonts API, sIFR and other solutions. In this showcase you’ll find 30 inspiring websites with effective typography and unusual fonts used.

Mobilezr

Mobilezr

Singleframe DESIGN

Singleframe DESIGN

Really Simple

Really Simple

CodeMyConcept

CodeMyConcept

YEBO Creative

YEBO Creative

HTML5 Lab

HTML5 Lab

Network Hoops

Network Hoops

Lee Munroe

Lee Munroe

Sylvain Prevost Design Studio

Sylvain Prevost Design Studio

Redesign de Site et Logo

Redesign de Site et Logo

Raven Internet Marketing Tools

Raven Internet Marketing Tools

I do surf better

I do surf better

Portfolio of Kristof Orts

Portfolio of Kristof Orts

Converge SE

Converge SE

Auxilium Lab

Auxilium Lab

David Hellmann

David Hellmann

HTML5 Boilerplate

HTML5 Boilerplate

Coucou

Coucou

Vayknights

Vayknights

Inktype

Inktype

Made by Mike

Made by Mike

Two Paperdolls

Two Paperdolls

Studio Adam

Studio Adam

Docteur Bourdon

Docteur Bourdon

Circle

Circle

The City Is Burning

The City Is Burning

CNC

CNC

TestingScrum

TestingScrum

Solo

Solo

Drum Studio Tuition

Drum Studio Tuition

About the Author

Tomas Laurinavicius is an adventurous designer and entrepreneur. Editor-in-chief at Despreneur and Product Manager at Refe. Connect with me on @tomaslau.

11 Comments

  1. LKenneth
    April 21, 2011

    These sites look awesome and have made good use of @font-face I have used it on my site but it dosen’t have a huge impact on my design compared to these sites. Thanks for sharing, make me want to re-design my site.

    Reply
  2. Stefan
    April 21, 2011

    This List is useless and wasted time.
    At least you should have researched which fonts are used and how they are implemented.

    Reply
    • Kevin
      June 2, 2011

      Agreed. Just another list post looking for hits.
      We want insights on why these 30, and these 30 only, made the list.

      Reply
  3. Tristar Web Design
    April 21, 2011

    Thank you for a lovely selection of font replacement designs. Real text on your site is important for SEO but using the same fonts over and over can be really boring. I love the likes of T’wo Paper Dolls’, the mix of type on different levels would be complex to recreate and the way it rolls over the two colours is very impressive! I also like the simplicity of ‘YEBO creative’ and html5 lab is really colourful.

    Reply
    • jonny
      April 21, 2011

      Almost all examples are “SEO free”. Using google font directories and others.

      Reply
  4. Julie
    April 21, 2011

    Some very creative fonts here. Usually text is overshadowed by design and imagery but when it looks different from the usual web fonts it really is memorable.

    Reply
  5. Theo
    April 21, 2011

    Nice collection, Auxilium Lab is my favourite!

    Reply
  6. jon
    April 21, 2011

    Great article! I love seeing great typography and some of these are really incredible, thanks!

    Reply
  7. David
    April 26, 2011

    Great collection of websites. I really like minimalistic websites that utilize typography in the design. I really like that The City is Burning layout.

    Reply
  8. Joe
    May 4, 2011

    @font face is a good tool, i have used it a few times on designs but not on my main site. The only problem with @fon-face is the copyright issue with paid fonts etc… but there is ample good free fonts to play about with.

    Thanks!

    Reply
  9. sylhet directory
    May 22, 2012

    nice showcase

    Reply

Leave a Reply