My teddy bear web design tools
Home | Blog | tools | My teddy bear web design tools

My teddy bear web design tools

Some people have a teddy bear. Some people have a security blanket.

I have some little browser extensions that make me feel better on a daily basis, that are far more useful than Mr. Teddy.  I’m willing to share these; the people with teddy bears and blankets probably won’t. So here are some of my absolute favorites that I can’t live without.

  • MeasureIt:  Yes, I do responsive web design these days, which means I’m not working in absolute units for most things. However, sometimes you just need to know how big an image is (or maybe some other element on a page), in pixels.  This nifty little plugin (available for both Firefox and Chrome) allows you to simply drag a box around something on a web page, and it automatically shows you the height and width.
MeasureIt in action
MeasureIt in action on a website. See the height and width?


  • WhatFont?  The quickest way to find out what the actual font used somewhere on a webpage is.  Sure, you can dig around in the code or the stylesheets, but who needs that, when you’ve got WhatFont?   Also available for both Firefox and Chrome.  It can’t really read fonts on images, however…which shouldn’t surprise anyone.
WhatFont in action
WhatFont in action. You activate the plugin, hover over the text, and there you go.


  • Colorzilla:  Probably my most-used plugin.  This allows you to get the color value of anything on a webpage.  You simply activate the little eyedropper, click on the color you want the value of, and it not only finds it, it makes it available to your clipboard to be easily copied.  I love, love love this plugin.  You are my BFF, Colorzilla.  For Firefox and Chrome (and it will give you the color value in both RGB and hexidecimal).
Colorzilla in action
I clicked on the green part of the color wheel–here’s Colorzilla telling me the color values.

Enjoy. Do you have any favorite web design tools to share?

There is 1 comment

  1. I love Colorzilla too. And I couldn’t do my job without the Firebug extension in Firefox. I try Firefox’s built-in Inspector tool from time to time but I keep coming back to Firebug.

    If you need to find out what font is being used in an image file you can try WhatTheFont (

Comments are closed.