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?


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.

Source : Link , Question Author : NikolaiDante , Answer Author : Community

Leave a Comment