enavu webdevmania tutsvalley psdestination
visit the enavu network
2 Comments Article Title Overlay

Fonts Web 2.0 Edition

Fonts are one of the most important design elements in any website. When the term Web 2.0 first started coming out a lot of logo’s were considered Web 2.0 because of a common use of certain fonts.
Personally I see the use of certain fonts in our designs as a Web 2.0 element. When Web [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Fonts are one of the most important design elements in any website. When the term Web 2.0 first started coming out a lot of logo’s were considered Web 2.0 because of a common use of certain fonts.

Personally I see the use of certain fonts in our designs as a Web 2.0 element. When Web 2.0 started there was a big burst of people using sIFR to display any font on their website with Flash. But flash isn’t an idea solution so things like Cufon came out that allowed you to display those fonts with JavaScript image replacement techniques.

Today we have the most amazing technique that works close to perfectly, and that is the @font-face CSS property that is supported by 97% of browsers. However this wasn’t always the case as this technique requires you to use a few different font formats at the same time for it to work on all browsers. This can become a rather unpleasant task but we have tools like TypeKit that give us everything that is necessary to do it.

I had the pleasure of meeting the Founder of TypeKit and the Owner of FontShop.com and after a discussion about web fonts I was very excited to write an article about fonts and how they are transforming the way we create website.

So let’s address the 2 known issues with using @font-face fonts. First of all the process of applying these fonts can cause a problem if the font takes time to load. The problem can play out in two ways, either the browser will use a fallback font until the font is loaded and then it will jump the new font in place after its downloaded, this can make the page jump around a little bit. The second thing is you can make the page wait until the font is loaded. With today’s fast speed internet and TypeKit’s special techniques in place you will probably never have to worry about either.

Never used @font-face before and are worried that it’s complicated, go to TypeKit register for an account and follow the steps, you will be using @font-face like a pro in minutes!

If you love TypeKit then you will enjoy FontSquirrel as well.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. Google Releases a Library of Web Fonts you can use
  2. Typography in Web Design – Complete Guide
  3. Web Forms: Semantic Mark Up in our Forms [part 2]
  4. jQuery/CSS Incremental Layout Size Adjuster
  5. Top 10 Fonts of all time!

Did you absolutely LOVE this article... share it!

Comments

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting