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! While you're at it, check out some resources Treehouse students have shared here.
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
charlesporter
3,308 PointsConverting 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.
4 Answers
James Barnett
39,199 PointsHey 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 Blokland
19,750 PointsThe 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 Arnold
11,331 PointsI 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!
charlesporter
3,308 PointsIn my post i did mention % or em as it applied to its respective item...
charlesporter
3,308 PointsAlso 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 Barnett
39,199 PointsBy setting font size on the body element
charlesporter
3,308 PointsI 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.
charlesporter
3,308 PointsOnly as "context" pertains specifically to converting text size.
charlesporter
3,308 Pointscharlesporter
3,308 PointsI 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.