Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Things About Web Typography
610
single,single-post,postid-610,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
Screen shot 2011-11-09 at 12.14.09 AM

Things About Web Typography

Typography seems to be something of high interest in the web design and development community lately and has sparked my interest. I’ve recently done a bit of research on the past, present, and future of the subject.

I assume most already know about using images to bring fonts to the web. This has been a pain in the a**… and the favored method for years. There has, however, been some developments that suggest change to this process in the not so distant future. In fact the “@font-face” rule was added to the CSS2 spec in the ‘90s but was stripped out by 2.1 due display technology limitations.

Technology has come a long way and browsers are starting to support the “@font-face” rule again. There are many techniques, of course, to keep us confused. Like usual. To prevent this from becoming too lengthy and scattered, I’m going to focus on two widely used solutions: the “@font-face” CSS rule and web font services.

“@font-face” rule is simple and handy. The font file is hosted on a server, probably with the website using it, and referenced via CSS. A style block as simple as…

 

 

…allows for the “font-family” property to be set to “Houschka”. This stupid simple approach comes with snags like possible legal issues and, of course, browser support. Certain font formats are supported by different browsers, however the “WOFF” format is currently being standardized  by W3C. To deploy this method, the font license agreement must permit hosting the files on one’s server.

 

Services such as Typekit, Fontdeck, Fonts.com, Google Fonts, and Kernest, among others, provide some nice features. They handle the burdens of legal issues and browser support while providing wide font selections. Fontspring.com, for example, has over 2700 font families to choose from and fontdeck.com, 937. There are tens of these services (probably more) that all provide pretty simple solutions to bring more real fonts to the web. The prices and pricing strategies vary from yearly subscriptions to pay-per-font models. Considering the time and money that real web fonts could potentially save, the prices aren’t all too bad. Fontdeck fonts start at 2.50 per font per year, while Typekit’s most expensive subscription starts at $40 a month (up to $400!). Premium features generally promote large font selection, no limitation to the number of sites that use the fonts, and high page view limits.

 

The progression of web typography is inspired by print typography. We want more control, not only over the fonts we can choose, but of every aspect of the appearance and interactivity of our type. Eager minds have begun inventing ways to help make that possible now.

 

Lettering.js is a simple but powerful jQuery plugin that allows us to provide control down to the letter. The above example was my first experiment with lettering.js and took about 15 minutes to execute. A call to: $(“#webtype h1″).lettering(); wraps each character in a span resulting in the following HTML. (Notice that the spaces are also in span tags.):

 

Simple adjustments to the CSS allow total control over each letter. This also opens the doors for possible JavaScript interactivity down to the letter level.Obviously this amount of control is naturally desired without having to use a jQuery plugin, but it’s a good start.

Download the example files.

It isn’t perfect, but there already are improvements being made to typography on the web. Why not start playing?