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.
At typical text sizes, most fonts have anywhere from 1 to 4 pixels of 'buffer' top to bottom.
You can usually directly apply the pixel size you used when comping to your CSS. IOW, if Photoshop/Illustrator says 14px on 130% leading, your CSS would say
font-size:14px
line-height:1.3em
I don't think counting pixels is reliable. Reason being, when I cycle through fonts, say in Photoshop, they always display at random sizes. I know PS isn't the web, but this goes to show that 14px in one font can be much larger than it is for another font.
I've had success taking the screenshot into Photoshop and lining it up. Of course you need to make sure your screenshot was at 100% and that you have the same font.
The best and quickest way however to see what font size a webpage is using is to view the webpage source. If it is not mentioned by style="font-size: 14px;" somewhere in the tag, it is in the stylesheet (more than likely). Look for the link near the top of the page code that ends in .css and visit that link. Look for the font-size and font-family declarations. That will tell you what font is used and what the size is for various elements of the webpage.
