typeQuery, change website typography with jquery

November 18, 2009

You can watch the demo here

Or you can download the demo here

Yesterday, Tim Brown released his Web Fonts Specimen , which shows all the variation of a font we can have on our websites. His work is really the best example of typography on the web so far.

Since last week, I've been asking myself: Why do we have to limit ourselves with one or two main typefaces on our websites? Finally, I decided to create something to get rid of that.

I coded this piece of jQuery called typeQuery, it's just a fancy name for some lines of code, and I combined it with the WebFonts Specimen to show it.

What does it do?

It gives the flexibility to change the font-family for everything you define with class, id, or tag, this example is referring to the selected item on a select object with id="tag" and the font-family value at select object with id="family":

$($("#tag").val()).css("font-family", $("#family").val());

How to use it?

First, you have to decide which elements of your website you'll allow the users to change, once this is defined, display those elements, in this case I used "select" object, the value property is the tag, id or class you want to change.

<select id="tag">
<option value="body">body</option>
<option value="h1">h1</option>
<option value="h2">h2</option>
<option value="h3">h3</option>
<option value="h4">h4</option>
<option value="h5">h5</option>
<option value="li">li</option>
<option value="p">p</option>
<option value="em">em</option>
</select>

Then you decide which font families to display. The most important property is the value, there's where you refer the font-family. One tip, recently I figured out that when referring to font-families, the browsers look for the Postscript name, instead of the name we see on any text editor, e.g. ITCAvantGardeStd-Bk instead of ITC Avant Garde Gothic Std Book.

Also, you can combine this with your @font-face embedded families , e.g. Museo300 and GraublauWebRegular, and any of the @font-face kits at fontsquirrel.com.

<select id="family">
<option value="Georgia" label="Georgia">Georgia</option>
<option value="Times New Roman" label="Times New Roman">Times New Roman</option>
<option value="HelveticaNeue-Light" label="Helvetica Neue Light">Helvetica Neue Light</option>
<option value="Palatino Linotype" label="Palatino Linotype">Palatino Linotype</option>
<option value="Hoefler Text" label="Hoefler Text">Hoefler Text</option>
<option value="Myriad Pro" label="Myriad Pro">Myriad Pro</option>
<option value="AmericanTypewriter" label="American Typewriter">American Typewriter</option>
<option value="BodoniStd-Book" label="Bodoni">
Bodoni</option>
<option value="ITCAvantGardeStd-Bk" label="ITC Avant Garde">ITC Avant Garde</option>
<option value="Museo300" label="Museo 300">Museo 300</option>
<option value="Museo500" label="Museo 500">Museo 500</option>
<option value="Museo700" label="Museo 700">Museo 700</option>
<option value="GraublauWebRegular" label="Graublau Web Regular">Graublau Web Regular</option>
<option value="GraublauWebBold" label="Graublau Web Bold">Graublau Web Bold</option>
</select>

Further use

Most will think it isn't necessary give this flexibility to the user, and maybe it's right. But I think we can define some tipographic styles that can be switched with just a click and give the best experience to the user.

Finally, I've been reading the typophile's forum, where most of professional type designers critic and share them knowledge, and some of them comment that the font-stacks commonly used on websites, aren't typographically informed and they just ensure cross browser compatibility.

Hope you find this useful, and I'll keep looking to improve our typographically uninformed font-stacks. If you have any comment, drop me an email tiw@sonetworks.no, cheers!

You can watch the demo here

Or you can download the demo here