Font-size

css

#1

Though I am not having any sort of problem with font-size, I was curious as to how the sizing works. I know that there are several different types of fun-sizes including px, em, rem, etc. What is the difference between px and em, and what is the difference between em and rem. I am also curious as to how the percentage sign works exactly. I have used the percentage sign a lot, but never understood how the measurement worked for it. Does it mean when you write 50% that it will go 50% across the screen or 50% across the constraints of that border, or just make the background-color fill up 50% of those letters. Out of all of the measurements that I know then the percentage sign is the most confusing. Also I was wondering what other forms of measurement there were. Thanks a lot for the help :slight_smile:


#2

From what I roughly understand (and please feel free to correct me, since I am just trying to revise what I had learned long ago):

1em implies that the font-size of the current element would be 1 times the size of its parent element. The font-size of root element body is 16px. So, this arrangement:

<body>
    <h1>
        Heading
        <p>Bigger text!</p>
    </h1>
</body>

where h1 and p both have font-size: 1.5em, h1 will get font-size equal to 1.5*16(font-size of parent-body)=24px and p will get size equal to 1.5*24(font-size of parent-h1)= 36px. You can see this in action right here and on jsfiddle:



Heading

Bigger text!



rem is similar to em except computation is done based directly on root element (body).

There are other units like vh and vw which are viewport heights and widths - useful if you are designing responsive sites for multiple viewport (device screen) sizes.

And I never really understood how % works in font-sizes :stuck_out_tongue:

Hopefully I got the rest of them right though :smiley:


#3

Thanks a lot :slight_smile: you did just that. I always wondered the difference between em and rem. I was guessing that an em would be about 15px, but I never knew the exact size. This ought to work great! I just hope that somebody on codecademy knows how the % sign works though; I have a head ache just thinking about it.