The body text is currently set to 16px of font size, and we are using the “Source Sans Pro” font.
But for some reason, the body text doesn’t appear to be 16px in font size.
It looks smaller.
It looks more or less like 14px.
What’s happening?
The thing is, “Source Sans Pro” renders the text smaller than most fonts @ 16px.
For example, if you notice the above illustration, when getting rendered at 16px of font size, the letter “A” from “Source Sans Pro” is skinnier and shorter than the letter “A” from the “Arial” font.
This difference is clearly visible on the website header.
Here is the website header with the “Arial” font @ 16px:
If you notice, the navigation menu is getting into the second line.
But here is the same navigation menu with “Source Sans Pro” font @ 16px:
Did you see that?
The menu is not getting into the second line because the “Source Sans Pro” font makes the navigation menu occupy less space.
This is happening because the “Source Sans Pro” font is leaner and shorter when compared to the “Arial” font at the same font size of 16px.
This also means that not all fonts occupy the same height and width, even though they are displayed in the same font size.
It purely depends on the anatomy of a font.
This is why the body text looks 14px even though the font size is 16px.
So, to make up for it, I want you to increase the font size of the body text to 18px.
Come on; you already know how to achieve this.
Again, go to:
Customize -> Typography -> GeneralThen, change the font size from 16px to 18px.
A negative side effect of this challenge is when we set the font size to 18px; it also changed the header menu’s font size to 18px.
As I said before, the body text means every piece of text on the website (apart from the headlines).
If we were using a premium theme, there could be an option to change the font size of the header menu back to 16px.
But because we are using a free theme, that option is missing, and we must write custom CSS to change it.
In the next lesson, we will learn how to change the website’s colors.