Text replacement with Typekit

Thinking about using Rich Typography in your web design? There are quite a few text replacement techniques such as: Image Replacement, Flash Replacement, JavaScript, PHP, and @font-face Font Embedding. The most commonly used solutions that you might have heard of are Cufón, sIFR, Typeface.js, P+C DTR… Each method has its advantages and disadvantages. Difficulty is one of the most important reason that keep web designers from using those text replacement methods.

Typekit is a service that let you easily embed both free and commercial fonts to your web design.Web designers don’t need to worry about font copyright issues when using Typekit. Because Typekit has been working with foundries to develop a consistent web-only font linking license.

Although Typekit is still in beta, I got an Invite couple weeks ago. Let me walk you through, and find out if Typekit is right for you. I will give a way two Typekit Invites BTW.

Pros and Cons of Typekit

Pros

• Texts are selectable, Support copy and paste
• Scalable via CSS
• Easy to set up
• Web-only font linking license
• Sharp and Crisp Fonts

Cons

• Typekit Fonts Only
• Only browsers that support @font-face
• Thin Fonts don’t look as good on PC
• Free Version comes a small icon on the page

I also made a Typekit Demo Page check it out yourself

Setting Up Typekit

When you go to typekit.com you can enter an invitation code or subscribe for updates with your email.

As you can see. Besides the Free version, there are paid versions which offer more bandwidth, fonts, and less limitations. We’ll try out the Free Trial for now.

First we need to create a Kit. Enter your Site name and Domain.

You then will get two JavaScript-snippets. Insert them in your page’s </head> tag.

Typekit has a fair font library even in preview stage. There are some pretty good fonts as well. Many come with different weight and styles.

You can also Live Preview the fonts. Just type anything to see the results.

Once you add a font, Kit Editor window will pop up. On the top left side, use the Selectors section to apply fonts to any HTML tag, class, or id. For example, put h1 if you want your heading 1 to use the font.  You can also choose what weights and styles. Although to keep the Javascript size down, I recommend only use what you really need. Finally don’t forget to click the Publish button.

Alternatively, you can also the font directly in your CSS. Read the description is very straight forward.

Once again here is a Typekit Demo Page

Two Invitations Giveaway

Drop a comment. Share your thoughts.
The first Two people who asked will get a Typekit Invite.
Go to Typekit.com and Try it out!