7

I'm doing UX testing. Wondering is there any way (think of application or javascripts) that I can run on a page and check what the font size of a-tags, p-tags, etc

9

Firefox

Tools-> Web Developer -> inspect

IE

Tools -> F12 developers tools.

IE developer tool works pretty well in my opinion.

enter image description here

4
  • 1
    Chrome: Wrench icon -> Tools -> Developer Tools. Or Ctrl+Shft+I Mar 19 '12 at 7:27
  • 1
    Firebug is an extension for Firefox which works in a similar way. You can trace styles and change both CSS-rules and actual html-markup without making changes to your document.
    – dotmartin
    Mar 19 '12 at 10:42
  • @MarjanVenema F12 also works in Chrome as an alias to ctrl+shift+I Mar 19 '12 at 17:15
  • Also in Chrome: Right click -> Inspect Element May 17 '16 at 17:52
4

If you want to test the css automatically, you can use Selenium: http://seleniumhq.org. A short article about css testing with Selenium can be found here: http://ajaxian.com/archives/csstest.

1
  • Hi Frank welcome to UX.SE! The question was about finding out what is displayed not testing it against desired specs.
    – dnbrv
    Mar 20 '12 at 12:21
4

Also there is a great tool called WhatFont: http://chengyinliu.com/whatfont.html You can check which font is used on the page, its size and line-height.

Another one is Fount: https://fount.artequalswork.com/

2
  • 1
    Developer tools built-into browsers are more efficient than third-party websites.
    – dnbrv
    Mar 19 '12 at 16:58
  • 1
    Right, but I can figure out which font used on the page using WhatFont with less efforts over Safari developer tool. Mar 20 '12 at 11:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.