The Magic of Font Replacement
While graphics and images can spruce up a site’s look almost immediately, the importance of typography and font selection can’t be downplayed. In fact, people would not want to take the trouble of reading through content that is not published in an attractive font. Choice of Typography Web designers however are limited to using only a few fonts that are ‘web safe’. The idea is to make sure that a certain font which is used is available across all operating systems. If a font is not available on a certain operating system, the page may appear to be filled with numbers and symbols. Moreover, it is no longer accepted to use static techniques to publish content, as they can’t be crawled by search engines. Web designers usually use Georgia, Ariel or Times New Roman for the bulk of the content. Why Font Replacement is Necessary and How to Achieve it However, it tends to become monotonous and even mundane to use the same fonts all across. If designers choose to use something that is a bit edgy or exciting, they might try dynamic text replacement. The idea is to make headers, quotes and such other text with a font that is eye-catching and attractive. Dynamic text replacement must not be used for entire pages, but only those bits and parts which need to stand out, like headings, quotes, menu items and whatever else you might think is important to be highlighted. With HTML5 and CSS3 invading the web evermore, several new font replacement techniques have appeared. Font Replacement Techniques Let’s take a look at services and products that are available for web designers in order to assist with font replacement. Typekit: It is open to all and a designer shall have to subscribe to a font library from one of the many foundries. You would need to customize CSS for it to work and create a font stack to fallback upon, if the font isn’t supported. Kernest: This is yet another service which is open to all and comes with an a la carte selection of different fonts. All that you would need to do is select the fonts you desire and paste them into the generated CSS style sheet. Unlike Typekit, you would not require JavaScript. Many fonts are free, so it can be quite attractive. Typotheque: Another open-to-all service, Typotheque comes with a number of fonts which can be selected, and pasted generated CSS into the stylesheet just like Kernest. Font Squirrel: This too uses @font-face and it looks good on Apple computers as well. It is one of the most preferred techniques at the moment. There are also certain techniques which do not make use of @font-face, and use Flash and scripting to display fonts that may not be available on the users system. These techniques are free too, and are easy to use. sIFR (Scalable Inman Flash Replacement): You would need to embed your font in a Flash SWF file. The chosen text will be converted to Flash text by JavaScript which can later be altered as you require. It is rather difficult to set up as certain aspect are handled by either CSS or JavaScript. Cufon: This is a really popular service which allows you to convert your font to a JavaScript, VML or HTML5 formats. However, Cufon causes a flicker on the screen when Internet is slow. Google’s Font API Service: This is an open source project that is provided by Google. However, if Google servers are down, your fonts may perhaps have a bad day too. Useful Resources for Web Designers The techniques that are available for font replacement are several and there are several exhaustive references online. We have compiled a list of useful references that would help web designers to engage in font replacement. Smashing Magazine has a list of tools and techniques to ensure rich typography on the web. Tutsplus, Zomigi and Webm.ag list a few popular services that we have spoken about, and mention their advantages and disadvantages. Web Designer Ledger and W3Designing both have listed 30 effective font replacement techniques each. These resources can prove to be extremely useful to web designers. In order to choose the best technique, a designer would have to make educated choices and informed decisions. It may all depend on the experience and knowledge of the designer. What one must remember is that when text is replaced with images or Flash, it may not be very good for SEO. Moreover, with HTML5 and CSS3 on the rise, web designers must be open to newer services and try to catch up with the latest in cyber town.