Hello ! I am having an issue trying to understand how to convert PX's to EM's for the CSS Line Height property. I know that 1em = 16px. And if I set my font-size:62.5%, then 16px = 1.6 em. Now in respect to the line height property, how would one convert PX's to EM's? I don't understand how to do that. Is there a mathematical formula? body is set to font:300 11px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; So lets say I want to convert a line height of 35px to em? Can anyone help me out? Thank you
Are you trying to draw a page layout? Do you understand that user settings can override your font settings and anything specified in em will change based on user settings? There is no straight conversion of px to em, because the value of an em unit is dependent on font-size and font-family. To accurately convert, you must first determine the number of pixels in the specified font, on the target device/browser (yes there can be a difference in physical size across platforms). I you explain what you are trying to do with the design, we might be able to suggest an approach that is more reliable than the road you are going down. In any case you might get some value from this unit conversion table that builds off of a font size base on points which tend to be relatively consistent cross-platform typography.
@COBOLdinosaur has it right, there is no fixed relationship between px and em's... While most computers have a 16px == 1em relationship, That relationship can be changed in both the browser and in some cases (windows) the OS... In the OS it used to be called the "system metric" -- I've run the 8514/Large/120dpi/125%/Win7 Medium/whateverTheDevilTheyWantToCallItThisYear setting, where 1em == 20px, since Windows 3.x nearly two and a half decades ago. As such while for most people 1em == 16px, for me 1em == 20px, my media center is set to 10 foot interface so 1em == 24px... my Sun Blade 2000 in the garage running Solaris 9 defaults to 1em == 12px. It's actually WHY you're supposed to use EM's for fonts (and usually widths and paddings too) so that your entire layout -- including fonts, changes size automatically to the users browser and/or OS preferences. Now, that said, your font declaration for BODY? Talk about problems.... First, DON'T use numbered font-weights, they are unreliable and often introduce rendering issues that make text hard to read. Use "normal", use "bold", or don't use it! The implementation across browsers and OS just isn't there! Second, NEVER set px on BODY for font-size. WHY? Because EM inherits size from it's parent, if you set PX on BODY EVERYTHING IS BASED ON PX, DEFEATING THE ENTIRE REASON YOU SHOULD BE USING EM IN THE FIRST PLACE!!! Much less, 11px? REALLY? Just bound and determined that nobody can read your content?!? :/ ... and finally, no matter what the ignorant wussy jacktards over at Sitepoint's forums claim, omitting a metric on your line-height is buggy, broken and unreliable cross-browser at anything other than the default 1em == 16px -- Which is a laugh since no matter how many times you show those dumbasses it not working someplace, they go "la la la la" like the Vancome lady ignoring the proof right in front of them. You state a line height, MAKE IT THE SAME METRIC (px, em, pt) as the font-size... and if you change the font-size, change the line-height as it doesn't inherit properly. Basically, you're doing it all wrong. There's a reason my BODY declaration on 90%+ of my sites reads: font:normal 85%/150% arial,helvetica,sans-serif; Which works out to: 14px for normal / 16px / 96dpi / 100% / win7 Small' 17px for large / 20px / 120dpi / 125% / win7 Medium 20px for x-large / 24px / 144dpi / 150% / win7 Large
I actually have different approach to setting the font size. I DON'T. I may use 1.25em or 125% for a specific element where it needs to be bigger otherwise I do a really radical thing... I let the user defaults dictate. Most of the font size relationships work out nicely and the H tags do the most of the heavy lifting and unless you are really nuts you don't need a lot of different font sizes on a page. AND... You don't get many user complains when you default the fonts to be what the user wants.