When I choose 1em for the body selector, shouldn’t I kind of select what 1em relates to in px?
Right now I can’t figure out how to make a font-size smaller in my website, than what seems like 16px.
This happens when I make body 1em and a h1 (as an example) 1em also? Which should be the smallest font-size (because it’s 1em).
Or am I missing something?
Thanks
Asser
16px is the default size for 1em. If you want to change what this value is you gotta do this:
Your 1em becomes 14px for your website. So now if you type in “1em” for some Div Block it will be 14px. If you put 2em for your heading it will twice as big. So your body text size is a baseline.
Yep, and in traditional css (not that this really applies when using webflow, but a tip nonetheless) once the “default” size is defind, you don;t even need to use em in the rule. For example:
body {
font-size 14px;
line-height: 1.5; /* this equals 21px because it is based on the previously defined (or inherited) font-size */
}
p {
font-size: 1.5; /* this also equals 21px because it is still based on the inherited font size of the body elelment */
line-height: 1; /* this now references the font-size defined in this class, so it is also 21px; */
}
span {
font-size: .5; /* this equals 7px */
line-height: 2; /* this equals 14px (i.e. 200% of .5) */
}