Back in the project,
I now aligned three different windows.
Here, we have our settings in the current browser window.
There, we have our website and to the right,
we have our DevTools.
To get started, we can have another look at our h2 element.
So this element here
with the description of the current meal.
As you saw in one of the previous lectures,
if I change the font size in the browser,
the size of this h2 element increases or decreases.
We saw that this is the case
because no pixel value was applied.
But if we check out the styles in here
after selecting this element, we see that by default,
our Chrome browser applies a certain font size
to this element.
Here, font size, 1.5em.
That's this ephemeral unit we were just talking about.
And for some reason, this unit seems to help
to make the size of this h2 element dynamic,
depending on the browser settings of the user.
To understand how this em works,
and also how the rem work, we have to go a step back though.
We'll override this default setting now
with a percentage value and see what's going on then.
And afterwards, we'll go back to em and rem,
to fully understand how these units work,
with all of their pros and cons.
For this, I go back into our code.
Keep in mind, the h2 element
is part of the food item content class.
So you might also work on this class a bit.
So in the code, in the stylets.css file,
I'll go down to the food item, content selector,
and below this one,
I'll add the h2 selector,
and here I'll simply add a font size
of let's say 100% to get started.
So with this being in place, if we go back to the code,
you see immediately that the font size decreased,
because now, the default h2 style,
with the font size of 1.5em, is no longer active,
because we defined the font size of 100% now,
for this h2 element.
The question now is, how big is a font size of 100% now?
Well, in the computer tab here,
if we scroll down,
you see that this font size is equal to 16 pixels.
Well, 16 pixels,
this is a value we know about,
because this is the default value
that we set in the browser here, to the left.
So these 16 pixels.
This means if I increase this now to 18,
you see we now have a size of 18 pixels, 20 and so on.
So this adjusts dynamically, why is this the case?
Well, because, as you remember back in our code,
we only set the font size, a fixed font size for the logo,
which is not a parent of our h2 element.
For the nav items,
also no parent elements of our h2 element,
and for the h1 element.
Well, which again is not a parent element
of our h2 element.
Therefore, what we simply set now,
by adding the font size 100% property,
means that the font size should be equal to 100%
of the parent's font size.
Well, and as no parent of the h2 element
has a specific font size set,
we just calculate the font size relative
to the browser defaults that we have in here.
So here, 16 pixels means 100% font size,
results in a font size of 16 pixels.
If I would go back to the code and change this to 200 then,
as you can imagine,
we have a font size of 32 pixels in here,
now, two times the font size that is set
as a default in the browser by the user.
If we would apply a font size to a parent element,
for example, the food item content class here,
back, let's do this.
Let's say the font size should be 24 pixels.
With this change in place,
by going back, now the font size of the h2 element,
which we can select, is 48 pixels.
Now the browser setting is overwritten
because we set a specific font size for the parent element.
And with that, the relative value for the percentage value
of the h2 element is relative to this parent element size.
So this is the percentage value,
but what about this em value?
Well, if we go back and change the font size,
or maybe comment this out, to keep it here,
to a font size of 2em,
written like this,
then, if we go back,
nothing changes.
We again have a font size of 48 pixels
just as we calculated it for the percentage value.
The reason for this is that for the font size property,
and only in this font size context, that's very important.
So if you work with em and the font size property,
then it basically behaves equally to the percentage value.
So it always refers to the parent elements,
well, definition of the font size,
and calculates the current elements font size
relative to this element.
So here one em would be equal to a value of 100%,
two em would be equal to 200%,
1.3em, 240% and so on.
So in this strict font size context,
these two values behave equal.
And this equal behavior also leads to well similar problems.
If we go back to the code and say that,
"Hey, instead of this pixel value
"for the food item content class,
"we could also work with em right here.
"And we might say we wanna have a value of 2em
"for our food item content class."
If you do this and go back,
then you suddenly have a font size of 64 pixels.
That'll be 'cause 2em relative to the browser settings,
'cause adding it right here,
no parent element has a specific font size property applied.
Therefore the current user's browser settings
are the ones that, well define,
what the font size looks like.
So if I increase this here,
then we again have a big impact.
And for the h2 element then, this of course means
that we have an even bigger font size,
because we take 2em, relative to the value applied
to the parent element.
Well, which would then basically mean,
we have four times the size of our user settings,
so 64 pixels here.
If I would do the same thing with pixels,
average percentages, so 200% right here,
and 200% for the h2 element,
I do this, the result is exactly the same.
And as you see,
this can become a bit confusing because if you might say,
I would like to use 150% for different elements
or 1.5em, then this doesn't work,
because for nested elements,
it always depends on the parent element.
And therefore, well, font sizes can kind of explode.
We have a third unit though here.
That's the rem unit I was talking about.
Let's keep things as they are.
Let's now only change one thing, and this is,
the font size of the h2 element.
Here, I will now change to 200% or to 2em as we saw it,
doesn't make a difference, to 2rem.
Keep in mind before saving this,
with 200%, we had a font size of 64 pixels.
With rem being in place and saved,
the font size now decreases to 42 pixels.
So although our parent element here
has a specific font size applied
42 pixels in this case,
this doesn't have an impact onto the h2 element.
Because here in our styles,
we see that the 2rem calculation is active.
And what if I increase now the font size in the browser,
the default font size?
Well then this scales.
So now we have 20 pixels in here in the browser.
And what do we have for our h2 element?
40 pixels.
So this means rem, root ephemeral unit,
means that the font size,
is always relative to the root element's font size.
With no default value being set for the root element,
the size always is relative
to the browser settings of the user,
which gives us a very high level of flexibility.
Let's go back to 16, maybe here.
Because with this setting,
the user has full control about the website
and about different font sizes.
And we as developer, can simply create our different fonts
and the font sizes of these,
always relative to this root settings.
You don't have the problems
that you might have with percentages or em units,
so does relative to the parent element topic,
which can become confusing,
the more nested elements you have.
But you can simply calculate with the simple rule
of our font size being relative to the root element.
So to quickly summarize what we learned here,
the percentage value and the em unit,
lead two similar results in a font size context.
With the rem unit, we can calculate our font size,
always relative to the root element.
And if no specific font size is applied to the root element,
which we could, of course do.
So if we, for example, go back to the code,
at the HTML element like this,
which is something I'd definitely not recommend,
it's just for demonstration purposes.
30 pixels for example, if we do that,
then our h2 element will of course also adjust to these,
and the browser settings of the user
are not working anymore.
So, as I said,
if no settings are applied to the HTML element,
so we can delete this right here now,
then with the rem unit,
you have perfect control of the font size.
By the way, if we would add the size
to the body element here, again 30 pixels,
then the h2 element also is not affected by this.
So it always refers to the root element,
so the HTML element when it comes to our rem unit.
So with this knowledge in mind,
the rem unit is indeed our preferred choice if applicable,
but keep in mind as always, we have such recommendations.
This is not the single truth.
This is just an overview of the core features
of these units, related to the font size property.
But it's of course always subject to personal preferences
and also the project requirements your individual project
might have.
But for the font size context,
we'll stick to the rem unit in this project.
I mentioned that although the percentage
and the em unit are similar,
when working in the font size context,
there is a difference between these two units,
and also between the percentage unit and the rem unit,
when we are not working in a font size context.
This is what we'll investigate as a next step.