Subsequently, you’re likely to come across elements you enjoy and colours you wish to reuse in your own projects. In this article we’ll show you the essentials for getting websites to tell you everything you want to know.
What’s the Colour?
ColorZilla
Originally created for Firefox, ColorZilla has since become available on Chrome and its related browsers as well.
Upon installation, you’ll find an extra button in the UI for both browsers. This button gives you the ability to find out the colour of just about anything online. You’ll quickly come to realise that ColorZilla does much more than just identify colours as it includes support for palettes as well.
What’s the Font?
WhatFont? (Chrome)
Strictly speaking, you don’t need the WhatFont? extension to find out the font of a website, but it’s by far the quickest way to do so. The alternative would be to open the stylesheet and go hunting through it.
Install WhatFont? and you’ll see a new icon in your browser UI. Unless you restart the browser entirely, you’ll have to refresh the page where you want to identify the fonts. Once you’ve done this, click the button in your browser.
A new button should appear in the upper-right corner of the webpage, and when you mouse over text, the font name should be displayed. Clicking the font will provide additional information relating to sizing. It’ll also identify the other fonts in the “stack” which is convenient should you want to see what alternatives web developers consider for their intended typeface.
Font Finder (Firefox)
A Firefox-exclusive extension in the same vein as Chrome’s WhatFont?
Install the extension, and you’ll have a new option in the right-click context menu.
When you find something you want identified, highlight it, then bring up the options available to you. “Analyse Selection” will tell you everything you ever wanted to know.
The detail it provides is nothing short of jaw-dropping. If text is marked as a “(stack)” then it will choose the first font in the stack that you have installed. Stacks usually end with a general term, like “sans-serif” in the example above. In the unlikely event one of the other fonts in the stack isn’t installed, it’ll fall back to your system’s default sans-serif face.
You can also customize elements as well via the “Adjust Element” option. Once the extension prompts you to enter a font family, you can go wild. In our example we changed just about every font on Wikipedia to something different, creating the bizarre mash-up displayed. These changes are not permanent and disappear when you reload the page.
“Replace font (entire DOM)” allows you to change every instance of a font on the page. Not a fan of Roboto (which we use as our main sans-serif)? Highlight this option, click “Roboto” from the list of fonts present on the page, and input the name of the font you’d prefer to see. Again, it’s not permanent, but it allows you to play with the design of your favourite websites, even if only temporarily.
Site Measurement
Page Ruler (Chrome)
“A ruler? Really?” we hear you ask. Page Ruler is a screen ruler which is a little bit different from how it sounds. In fact, we’d totally understand any initial skepticism, too. Positioning matters on the Web. Elements of a page have to be spaced just so, or they’re not as appealing as they could be. While this information is particularly esoteric to want to know, Page Ruler makes it possible.
Install it like you would any other extension, and you’ll have another button in your browser UI. Note that you’ll have to open a web page to try the extension out – you won’t be able to use one of Chrome’s built-in web pages for security reasons.
Once you’ve clicked the button, you’ll get an extra strip of information directly below the address bar, and you can use the mouse to click and drag out a shape, the dimensions of which will be calculated and displayed along the aforementioned bar. Beyond this you also have the option to enable or disable the grid, though it can help with accuracy.
Should you wish to you can also change the colour of the rectangle from its default blue. Regardless of the colour you choose, it’ll automatically add a degree of transparency so that you can see the content below it.
Page Ruler deserves some credit for having a particularly minimalist approach to its features, packing all the essential information into a small bar along the top of the window.
MeasureIt (Firefox and Chrome)
MeasureIt does the same task as Page Ruler and is available for both Firefox and Chrome.
Once installed, click the button, and you’ll be able to click and drag to create a rectangle. Alongside the rectangle will be a pixel count, meaning you can get accurate measurements for positioning.
If you’re worried about getting the measurements right with just a mouse, you can adjust the size of the highlighted area using the arrow keys, making precision a lot easier than it sounds. We’d suggest checking the “Area” option in the settings; it doesn’t change how the software works and is merely giving you an idea of the area the rectangle you’ve drawn takes up.
We bet you’ll be surprised when you see just how many pixels are on-screen and the area they make up when highlighted. If nothing else, it should definitely put the term “screen real estate” in perspective.
Conclusion
It takes a while to get the best from these extensions, but they put some great information within easy reach. You’ll quickly come to grips with them, but if you find it difficult to substitute fonts, remember the names need to be exact. “Comic Sans” won’t work, whereas “Comic Sans MS” (as it appears in Office) will. Remember that all of these extensions require this kind of accuracy in the information you give them, and you’ll be well-equipped to use them to their fullest.
