Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.Start your free trial
Converting Font Size px to em
Hello internet. I am working through the Fluid Design topics and I get margin/padding/width as it pertains to converting px to % or em. What I am struggling with is what is the "context" part of the formula for converting text size.
James Barnett39,199 Points
Hey CP -
I'm kinda confused, you mention converting fonts from px to ems in your title. However in the body of your post you reference margin/padding.
Let us know here the thread what you are confused in terms of context.
Mario Blokland19,750 Points
The context is defined by the parent of an element. So lets say your body text size is defined to 16px and you have a body child which id is "child_of_body" then the context for the text size of "child_of_body" will be the text size of the body element.
Phil Arnold11,331 Points
I am going to take a punt here and try to answer your question. Let's say your default browser font size is 16px and your html body element has a font size set to 1em or 100% in the css. This means that a 16px font = 1em or 100%. If you wanted to, say, style a 12px paragraph style as em or % then you'd just need to divide 12 by 16 which should give you 0.750em or 75%. So the context part is the 16px = 1em because the default size is 16px. Therefore, you just divide your target size (12, in my example) by the context (16) to get your em or percentage size. Hope this is right and makes sense!
In my post i did mention % or em as it applied to its respective item...
Also i am assuming that different users have different default sizes so how can the designer actually know what to use for the factor "context" in the formula
James Barnett39,199 Points
By setting font size on the body element
I guess im on my own on this one. I cant seem to articulate what im trying to say. I just dont know how to change the font size to em when the rule is to use the default size of the text in the browser as the "context" in the formula. Different browsers have different default sizes i would imagine.
I guess i can see how the post and title do not 100% match... Bottom line is that i wonder how one knows what the default size is for font to be able to use that as the factor "context" in the formula.