Issue
So I came across some conversion math Target ÷ Context = Result Target to convert px to em percentages.
I understand that this keeps your layout fluid. What i don't understand is what to plug into the equation. Do i use this on everything i would normally use pixel sizes on ? Can anyone enlighten me on the proper way to convert and design using this ? Thanks
Solution
You can find more information about that formula on A List Apart
target ÷ context = result
If we assume the body’s default type size to be 16px, we can plug each desired font-size value into this formula. So to properly match our header to the comp, we divide the target value (24px) by the font-size of its container (16px):
24 ÷ 16 = 1.5
So the header is 1.5 times the default body size, or 1.5em, which we can plug directly into our stylesheet.
h1 { font-family: Georgia, serif; font-size: 1.5em; /* 24px / 16px = 1.5em */ }
When dealing with text, em
and %
are pretty much equivalent:
100%
== 1em
50%
== 0.5em
When designing grids, I would straight up think in percentages (or columns) rather than do that conversion by hand.
Answered By - fregante
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.