Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
    
This question will explain why you can't simply measure the height of a character to get the actual font size: graphicdesign.stackexchange.com/questions/4035/… –  DA01 Nov 14 '12 at 17:07
    
thanks da01, e100 had already linked to that in his answer. –  NikolaiDante Nov 14 '12 at 17:13
add comment

3 Answers 3

up vote 2 down vote accepted

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.

share|improve this answer
add comment

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
share|improve this answer
add comment

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.

share|improve this answer
1  
If you're digging around in the code, you should be using the Firebug extension for Firefox. That will help you isolate HTML and CSS for the item in question and allow you to tweak it to your heart's content for preview purposes. –  plainclothes Nov 14 '12 at 21:52
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.