TypoGridder version 0.2 last updated: 04/12/2007

What the hell is that?

Just a few days ago I cam across a presentation about grids in webdesign by Khoi Vinh. The results look very good and for a hobby designer like me -- let's say a complete layman when it comes to designing -- this kind of background information is more than just helpful.

Now today (04/11/2007) I read an article about "Setting Type on the Web to a Baseline Grid" on A List Apart. And exactly that is what my little script is all about.

What the TypoGridder does

To get to the heart of it: a baseline grid is added.

You initialize the TypoGridder and it automatically gets the lineheight of an element (by default <p> but you can choose any jQuery selector). Then it queries a little PHP script which creates a very simple image which is used for tiling.

The result is an opaque layer with a tiling baseline grid.



While developing a website you might want to enable the TypoGridder on every page impression. This is how you do that:

		<script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"></script>
		<script type="text/javascript">
			/* setup TypoGridder */
			//== settings ==
			// the element with the default lineHeight
			var defaultLineHeightSelector = "p"
			// should be an absolute path to your getBackgroundImage.php file
			var getBackgroundImageURL = '/typogridder/getBackgroundImage.php';
		<script type="text/javascript" src="TypoGridder.js"></script>

Note: Once activated you won't be able to hit any buttons, deactivate TypoGridder with the bookmarklet below.


Yes, it works as a bookmarklet as well. You can check it out with the link below, but please create your own bookmarklet to save me some traffic.

Rightclick and bookmark me (or hit me if you like)

As you might see, this page needs some love with the baseline...


You can download all source codes to host them on your own server. This is very much appreciated since then my traffic wont blow up.



For feedback either write me an email or post a comment in my blog.


TypoGridder is licensed under the LGPL, see GNU LGPL for more information.


0.2 (04/12/2007)
fixed bookmarklet for konqueror
fixed grid height
added z-index
added !important
initial release (04/11/2007)