How to work out font-size setting by counting pixels?


I have an image of a proposed website.

How do I work out what px font-size value to set text to by counting pixels?

E.g. I have font-size: 14px, (in Arial) but counting from the top of an "L" and down the tail of a "p" I count 10 pixels on the "L", with an extra 3 on the tail of the "p". Which obviously doesn't give me 14.

Is there a way to workout the font-size value by counting pixels reliably?

11/14/2012 3:38:00 PM

Accepted Answer

The general problem is pretty much answered by What does the size of the font translate to exactly? - i.e. the size doesn't really mean anything very specific.

But given that you are working with a known specific font, you should indeed be able to translate a pixel count on your mockup to its nominal pixel size - you'd need to do a bit of experimentation to work out the ratio.

But I would suggest it's a lot easier to do this by comparison, i.e just change size on your webpage until it matches the mockup, overlaying a screenshot if necessary to check. Bear in mind though that your browser's font rendering is unlikely to precisely match either Photoshop rendering or browser rendering on another platform.

4/13/2017 12:46:00 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow

Website under construction!!!