Sometimes we complicate ourselves a bit too much and launch some tutorials that may not be for everyone, of things that you will rarely use or only need on a few occasions, forgetting to help with more basic aspects of using WordPress, but not always easy to learn.
So today I want to address something that is not usually shown in any WordPress tutorial, despite its enormous usefulness: how to change the size of the fonts.
It is something that perhaps seems basic, but nevertheless has many possibilities, so we will see multiple ways to change the size of the fonts in WordPress.
How to change the font size with the classic editor
If you still use the WordPress Classic Editor, or the Classic Block, a fundamental way to change the font size is to change the paragraph type.
Selecting the paragraph types will change the font size, determined by the theme’s style, so this is something that will be pre-determined by your active WordPress theme.
In addition, it should tell you that this is not the best option, because not only do you change the font size, but you also add an HTML tag that affects the SEO positioning, because depending on the type of paragraph you use, it will add the h1, h2, h3, h4, h5, h6, pre or p tag.
So you must know it, know that it exists, but you must not use it to change the font size, but to apply different hierarchy to your content, add subheadings within your content, paragraphs with some special style, etc.
How to change the font size with the block editor
It is best to make font size changes with the block editor, the default editor in WordPress at the moment.
When you insert any block that is text (paragraph, header, media and text, etc.) to the right, in the block settings, you will have a selector to change the font size, without affecting the HTML tags that will be applied, so it does not harm the SEO of your content.
Not only will you be able to choose sizes predetermined by the theme (from small to huge) but you can also do so by applying a custom numeric value.
And all this without modifying the HTML tag of the type of paragraph you are using.
How to change the font size globally from the theme
If your WordPress theme has this possibility it’s great, because you can change font sizes globally, both for content text and headings.
There are many themes that have this option, such as Astra…
Or, if you use Divi, it is also very easy to change the font sizes of each part of the theme…
In all cases, no matter the theme, you will have these settings in the customizer, accessed from the administration menu Appearance -> Customize.
How to resize the font globally with CSS
Finally, if you want to globally change the font sizes, and your theme does not allow you to do so with a single click, what you should do is apply some custom CSS so that it replaces the styles of the active theme.
This is especially useful when you want specific font sizes, regardless of what WordPress theme you have in place.
To make these changes you should add the following examples (they are samples) to the additional CSS section of the WordPress customizer, which is in the Appearance -> Customize administration menu.
Once there you can customize the font sizes as in the following examples…
Change the full size of a font
Adding the following CSS would change the size of all the text in the content.
body {
font-size: 1.5rem;
}Code language: CSS (css)Changing the font size of paragraphs
If you just want to change the font size in the paragraphs, it would be like this:
p {
font-size: 18px;
}Code language: CSS (css)Change the font size of the headings
If you want to change the font size of the headers you can add codes like these…
//Change size heading 1
h1 {
font-size: 3.5em;
}
//Change size heading 2
h2 {
font-size: 2.5em;
}Code language: JavaScript (javascript)Changing the font size on the sidebars
Do you want to change the font size of the listings of elements that appear in the sidebars, such as the last entries, etc.? In this case it would be something like this:
.sidebar li {
font-size: 14px;
}Code language: CSS (css)Changing the font size of the footer
Would you prefer to change the font size of the footer credits? Well, look how easy…
.footer {
font-size: 90%;
}Code language: CSS (css)Change the font size according to the screen size
Now, to give you a cooler example, imagine that you want me to change the size of a specific font when the visitor views your website from mobile devices, as it would be something like that:
html {
font-size: 18px;
}
@media (min-width: 768px) {
html {
font-size: 20px;
}
}Code language: CSS (css)In this example, by default we will see the font at a size of 18 pixels, but if the user visits the page from a device less than 768 pixels wide then the font size will change to 20 pixels, slightly larger.
Types of styles applied in the examples
If you have noticed, in the previous examples I have used different units of measure to apply sizes in the CSS, here I explain it:
- Em (em). This is the unit of measure used in web media documents. 1em is equal to 12 points.
- Pixels (px). This is the unit of measurement used for on-screen media. 1px is equal to 1 point on a computer screen.
- Points (pt). This is the measurement that is usually used in traditional print media. 1 point is equal to 1/72nd of an inch.
- Percentage (%). The default is 100%, and it changes as we zoom in or out.
Summary
I hope you have learned something, and that from now on you know something more about how to change the font size in WordPress.
As you may have seen we have advanced a lot in the possibilities, and with the block editor it is really easy to change the size of the fonts used in an entry or page.
And, if you want to master the subject completely, you also have some CSS basics that will allow you to fully control font sizes, whatever unit of measure you prefer to use.
Read this post in Spanish: Cómo cambiar el tamaño del tipo de letra en WordPress
