Pau Santesmasses, who I had the pleasure of meeting a few nights ago, has released TypeGauge, a Firefox web development extension that tells you the font-size and line-height of an element as you hover over it. I’ve been using a beta version of it for a few weeks now, and have found it indispensable. Those of you familiar with Firebug might point out that Firebug already does this, which was my original reaction as well. What’s nice about TypeGauge, is that it is simple and clean – it does one thing, and does it well. I often finding myself needing to check only the font-size and line-height of an element, and in this situation, Firebug is the classic sledgehammer fly-swatter. Pau’s extension simply lays nice and cleanly over the page, and quietly reports all the information you need.
Why is this important? Clint Fisher sums it up beautifully here:
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.
Excellent work, Pau. Thanks!