Typekit and Web Fonts

Typekit allows to embed fonts into online documents through CSS to render perfect looking fonts. With Retina display, quality of rendering becoming a factor. Two years ago, we published an article on usage of elegant and light typography for websites. All old articles like what fonts to use and for which purposes in blogs, Selecting the right font for your blog are becoming important as Apple again, with their finer Retina display actually created a big concern for the web designers. As the resolution went bigger and more people are using higher resolution displays, the flaw of imperfect design becomes magnified. Typekit is a specific brand. Google Fonts is another such web font service. We have demonstrated before, How to Google Web Font Within WordPress Posts With Inline CSS. Combining few tricks, we can create this here too :

Typekit and Web Fonts

Where as the normal H2 should be like this :

Typekit and Web Fonts

So, we can override, we can produce great looking typography of our choice. The example is not with Typekit, this is an example with Google Fonts.

What is this Typekit actually is ?

Now, coming Typekit service specifically, Typekit has wide range of advantages from designing point of view :

For our computer, we can install a font and create graphical representations. But for webpages, we basically can not control so much the display as text with usual ways.

Typekit allows a subscription-based library of hosted fonts. If you saw this website before, you possibly saw a gorgeous website. It is has been minimalistic – we actually do not need a huge decorated website, even too much usage of colors as it is distracting. The practical limitations, features of using Google Fonts in this way is like comparing the difference between a MacBook Pro and Google’s Chromebook.

Before HTML5 plus CSS3 became wider in usage, we used CSS in this way to define the Fonts :

font-family:"Times New Roman", Times, serif

The limitations of Google Font will not be apparent if there is no need override the same class like h2 to show in different way or there is absolutely no need to opt for a paid service for finer typography – to be specific. Web Font Loader, is open source collaboration between Google and Typeface – free but more control over font loading than the Google Fonts API by default :

https://github.com/typekit/fvd

In short, Typekit is basically a paid service with more features for perfect display of fonts with the desired design, Web Font Loader is free (you can serve from own CDN) with less more features for perfect display of fonts, Google Fonts enables more fonts to display than by default we can ever show as text.