Because of the line height in text elements and the willingness of achieving pixel perfect layouts I've develop a workflow I'd like to share to measure on screen distances in order to find ways to improve it.
At the very beginning I used some plugins for the browser like this but it introduces quite some errors because it's very inexact. I improved this by using the magnifier that comes with the accessibility mac features which make this workflow better but still not precise enough.
The workflow I'm using now is like this:
- Taking a screen capture of the zone I want to measure with cmd + shift + 4
- Open the screen capture on Photoshop and zoom in (cmd +) until pixel grid is visible
- Set two grid rules with shift pressed to snap to whole pixels (not half pixels)
- Measure distances with the marquee (M) tool and check distance on the info tab
When knowing the final distance it's easy to go to the css and after some maths write down the amount of pixels I have to add or subtract form the original number. But anyway, although this is a very solid system to measure is quite slow and involves the use of Photoshop which I'd prefer not as it slows my work pace.
In the end I'm quite happy as I'm going for quality instead of speed but I'm sure there are ways to improve this. I'd be glad to hear your ways or how you think I could improve mine.
Thanks in advance.