TypeGauge

I’m very excited to finally blog about this publicly, as my good friend and co-laborer at the nytimes.com— Pau Santesmasses has released his firefox extension “TypeGauge“.

What is it?

Many of you fellow web developers may be using the completely-must-have extension Firebug already. Well, sometimes you may want to know some details about html elements and those are the only things you need. In the case of TypeGauge, these details are the particular html tag, font-size and line-height.

Why is this important? If you care about your typography and are striving for consistency across browsers then this information is critical. A good example of where this comes into play is when sizing fonts for Safari, if you have somehow ended up with a decimal value instead of a whole number (maybe your font-size percentage on the body element does not give you a whole number, like another site I deal with everyday), Safari will round up the value and this will cause your font to be larger in Safari than say Firefox.

Enter TypeGauge

Once you’ve installed and activated TypeGauge (by clicking its icon in the status bar) you can freely hover over elements on your page in the same way that Firebug works. TypeGauge gives you tag, font-size and line-height results for every item on the page. The font-size and line-height results are the browser computed values so you can depend on the accuracy.

I’ve been using this extension for a few months now and can bear witness to its value in my day to day web development. It’s indispensable.

Big Up to Pau for building a clean, simple, yet powerful extension that is an essential tool in any web designers box.

So go get it and admire the proper web design where the extension lives too—Looks great Pau.