What is a pixel and is this the only measure of font size?

FAQ CSS FAQ
#1

Question

What is a pixel and is this the only measure of font size?

Answer

A pixel is one of several units of measure in web development. It is an absolute unit equal to 1/96 of an inch.

Rems and ems are scalable typographic units which are commonly used with the font-size property. As opposed to pixels, both of these units are relative. For example, an em is measured relative to the font-size of an element. When dealing with ems it is important to realize that the font-size of an element is often inherited from an ancestor element. On the other hand, rems are determined based on the font-size of the html element. If font-size is not defined on the html element, the browser’s default font-size is used instead (usually 16px).

There are pros and cons of each unit but one major advantage of using relative units is that they lend themselves more naturally to responsive design. Relative units like ems and rems are flexible and scalable whereas pixels are not.

33 Likes
FAQ: Learn CSS Selectors Visual Rules - CSS Visual Rules - Font Size
#2

We can (and probably should) make an explicit declaration to adopt the browser’s default size at load time.

body {
    font-size: 100%;
}

Users with visual impairment often need larger fonts on everything and may set their browser to a size that suits them. The user is the most important person and by adopting the browser’s default and then making all our fonts relative to that we make the experience for those users appropriate to their needs.

124 Likes
#3

@wiki-bot in your answer you said “an em is measured relative to the font-size of an element”. Don’t fully understand this statement pls can anyone shed more light on this

7 Likes
#4 
<div style="font-size: 24px">
  <p>This text will be 24px, as inherited from the parent element</p>
  <p style="font-size: 0.7em">This text will be 70% of the parent size</p>
</div>

24 * 0.7  => ~17px
67 Likes
#5

How to use ems and rems units, please?

1 Like
#6

can you put down more examples using the example of ems and rems separately.?

Thank You…

3 Likes
#7

Their distinction comes from parentage. An em has a direct parent, the element that it is a child of. A rem has only one parent, the document body. I distinguish the two by thinking base for rems, and parent for ems.

Much like having a base font-family we have a base font-size. Because many users have larger font sizes as their system defaults, I always adopt the user’s base font size.

body {
    font-size: 100%;
}

From this point, using relative font sizing is a snap. We never need to use px unless we don’t want scaling. Even then there is no guarantee the browser won’t do its own scaling if the user zooms.

Given that the body is the super parent, we can give elements that we always want to be relative to it a rem unit value so no other parents or ancestors can intervene (in terms of relative measure).

Where these rules are assigned in the cascade will follow cascade rules. Create these selector rules close to the bottom of the cascade, with em rules written above them.

Aside

It follows that we would never use the rem unit in a body selector rule. What sense would it make?

Another consideration is that <head> and <body> are optional, which means we would need to revert to the <html> directly. No problem,

html,
body {
    font-size: 100%;
}
14 Likes
#8

To refute my own statement…

html {
    font-size: 100%;
}
body {
    font-size: 1rem;
}
8 Likes
#9

A pixel is one of several units of measure in web development. It is an absolute unit equal to 1/96 of an inch.

Rems and ems are scalable typographic units which are commonly used with the font-size property. As opposed to pixels, both of these units are relative. For example, an em is measured relative to the font-size of an element. When dealing with ems it is important to realize that the font-size of an element is often inherited from an ancestor element. On the other hand, rems are determined based on the font-size of the html element. If font-size is not defined on the html element, the browser’s default font-size is used instead (usually 16px).

There are pros and cons of each unit but one major advantage of using relative units is that they lend themselves more naturally to responsive design. Relative units like ems and rems are flexible and scalable whereas pixels are not.

5 Likes
#10

That’s pretty definitive, and doesn’t account for pitch variations between displays. At best it is an approximation, or typical, not absolute.

1 Like
#14

Here is my understanding of the rem and em units. Please correct me if I’m wrong and add important information that I missed

rem is equal to the font-size of the root (html) element. Most of the times, by default, the font-size of the html element is 16px meaning that 1rem = 16px. Following this rule, 2rem = 32px and 2.5rem = 40px

em is equal to the font-size of the parent element. So if a <div> element, containing a <p> element, had a font-size of 2rem (which, by default, will be 32px), and the <p> element had a font-size of 2em, the <p> element would be 64px (32px * 2). If we added a <span> to the <p> element and gave it a font-size of 2em, it would be equal to 64px * 2 = 128px

3 Likes
#15

When I was reading this article, I came across a Codepen which provides an example of when to use px, em and rem: https://codepen.io/samyAdel/pen/rNxXYYa?editors=1100. The h2 with content of “H2 Section heading” had a font-size of 37.5px when I inspected it:

image

This <h2> is nested inside a <div> with a class of “content”. The font-size of this <div> element was not explicitly set. However, when I inspected it, I saw that it had a font-size of 15px:

image

Why is that?

Furthermore, can someone also explain what is going on with the <h2> with content of “H2 Side menu” and the <div> with a class of “sidebar”

#16

Are 18px and 18% same thing or different?

#17

Very different. 18% of 18px is about 3.2 pixels.

1 Like