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.