Tuesday, April 26th, 2011
Fonts and Typography on Modern Websites
"Browser text" -- or text that is rendered by the browser has always proved challenging for web designers. The advantage of using browser text is that it is editable, easily changed, searchable and readable by search engines web bots like Google. It can be automatically enlarged using different browser settings, and style changes can be made site wide relatively easily and quickly by altering CSS cascading styles sheets.
The main disadvantage of browser based text has always been that one was effectively limited to using standard universally available web fonts like Arial, Verdana, Georgia -- as the fonts used on a website also had to be already installed on the end user's machine to see the website properly as the designer intended. The creative, fanciful fonts that web designers would often like to use for headlines or titles were generally not widely distributed among most web users. Thus web designers would generally use "browser text" for the body of articles, and use graphics for headlines and navigational elements. The problem with graphic image headlines is that they are not readable or searchable by search engine web bots. They must be changed manually in a program like Photoshop, and they aren't easily or quickly altered.
Modern browsers have incorporated various methods for actually embedding font files into websites, and the actual font is downloaded with the web page files and images. There have been many issues to overcome here as different browsers use different font file formats. Additionally, fonts used on websites required a special paid license to allow downloading and use of the font by web visitors -- whereas, fonts used in graphic files only required a license for the designer who actually created the original graphic (as the actual font file did not need to be downloaded to view the graphic). Most typography companies have added an additional add-on license fee to allow certain select fonts to be embedded on websites.
There has been a recent movement to make the embedding of fonts on websites quicker, easier, and less expensive for website creators. This allows web designers to create more visually attractive websites with dynamic and easily updated content.
Google has attempted to improve typography options for designers by providing a growing selection of free open source licensed fonts:
They actually provide a Web Fonts API which hosts and loads the fonts off their super fast servers.
Typekit is another company that has tried to make it easy to add a wide variety of fonts to a website at a nominal price.
Typekit currently has pre-licensed approximately 600+ fonts for use on websites. They host the fonts for you and you select and save the fonts you want to use into kits. The annual price ranges from free to $99.99 for sites like e-commerce that require the ability to serve fonts over SSL connections.
Both sites mentioned above have tried to make it as easy as possible to create and use attractive, interesting fonts on your website.
P.S. One should keep in mind not to use too many downloaded fonts on a single page, as this could slow page load times. It would be advisable to only use 1 or 2 of these fonts on any one page.