Hi when measuring the height differenct between two sets of different text pieces on a page, from where do you measure in order to be as pixel perfect as possible?
I mean as some characters are lower or higher than others, on which should I take the measurement?
when measuring the height difference…
Hi,
Here is a good thread that explains all the variables that need to be accounted for when determining the height of a line box.
What does “font-size” measure?
Tommy pretty much nails it down in post#4 but there is other good info as well.
Things start to go off topic slightly with page 2 though.
that explains the font-size doubt I had, now my other question is:
Say I have a PSD for conversion, with a Georgia line (heading) and a Verdana paragraph below, how can I accurately set the space (margin-bottom on Georgia line) between them, short of using an image overlay in firefox using firebug?
Georgia line (heading) and a Verdana paragraph below, how can I accurately set the space
Surely a little bit of trial and error should get you headed in the right direction.
If your PSD is accurately scaled as 100% then there are some measuring tools that could help you with that trail and error.
short of using an image overlay in firefox using firebug?
I’m not sure I know what your talking about there, it must be a feature I’m not familiar with.
alright so basically you’re saying it’s just a case of trial and error. The tool I was referring to is Pixel Perfect for Firefox, I’d say it’s even more useful than the measureit tool as it allows you to overlay an image on your html page and make adjustments until you achieve pixel perfect conversions.
The aim for this post was to see if the exact margins could be determined directly from the PSD without having to use such tools and a trial and error method.
The aim for this post was to see if the exact margins could be determined directly from the PSD without having to use such tools and a trial and error method.
If the designer did not provide any “x” and “y” coordinates as well as any text margin info (specs in general) then how else would you do it?
I mean as some characters are lower or higher than others, on which should I take the measurement?
The default line-height is appx 1.2 in all browsers. You can set a pixel unit to your value if you need pixel perfection, of course that would only be done with pixel font-sizes.
If you get into em and % font-sizes you will get rounding errors across different platforms with line-heights of the same type. You can kiss pixel perfection goodbye in that case.