Categories
WordPress

How to Change Headings and Paragraphs Font Sizes in WordPress

To change font sizes for WordPress headings & paragraphs — in its posts & pages — without any plugins, there are two methods you can employ. The first involves digging into the individual posts or pages and making adjustments to the desired block (heading or paragraph).

However, if you’re constantly finding yourself doing so every single time, you might want to consider the second method for efficiency reasons, where you’d only need to make few tweaks to the CSS settings once. This way, all of your posts & pages will override the default sizes.

Side note: From this point on, for the most part, I will keep referencing a WordPress post, as opposed to posts & pages. Also, I would keep referencing a heading versus both. Technically, what you can do with one, can also be done with the other (pages or paragraphs).

Method 1: Adjusting Font Sizes by Individual Posts in WordPress

For visual reference, I’d be showing you how to change a heading block’s font size. Conceptually, the process is very similar for other blocks, too (such as a paragraph block).

Changing Font Sizes of a Heading Block in WordPress

As soon as you insert a heading block, keep it selected, and navigate your eyes to the right-window-pane/settings. Make sure you’re on the block tab instead of the document.

Then, look for the typography section. By default, the drop-down might be closed, so you may have to click on it to have it expanded. In any case, inside this section, you’d see options for:

  • Preset Size
  • Custom
  • Reset

See the image below for reference.

an image showcasing the typography section of a heading block in wordpress
As shown, ensure that you’re:
1. Under the block tab
2. In the Typography section
3. See all the 3 options specified above

Play around with the first 2 options mentioned to your heart’s desire, and if unsatisfied, hit the reset button to restore defaults.

Method 2: Changing Headings and Paragraphs Font Sizes Through Additional CSS

As I had previously stated, if you’re changing font sizes every time you create and or edit a post or a page, you’re better off just changing it through Additional CSS.

To change headings and paragraphs font sizes in WordPress, through additional CSS, follow the steps along:

Step 1: Navigate to the “customize” section
Within your WP Dashboard, head over to the “customize” section of your site, from Appearance >> Customize.

heading over to customize in wp
As seen, as your first step, head over to customize.

Step 2: Select Additional CSS
As easy as it sounds, as your step 2, select Additional CSS.

selecting additional css in wp
Yes, it is that straightforward. Select Additional CSS in step 2.

Step 3: Code your changes in
As soon as you click on additional CSS, you’ll get the option to add your code in. This is where you can give instructions to override the default font size settings.

For example, say you want to change the font size of all your headings to 20px. In that case, your code would look like below:

h2 {
	font-size: 20px;
}

And say you want your paragraph size to be 15px. In that case, your code would be:

P {
	font-size: 15px;
}

If all of that sounds confusing, and you’re still scratching your head on what I am talking about, see the video below. What follows, shows a demonstration of me tweaking the Additional CSS to change the h2 (a heading tag) size to 20px. As soon as that happens, my H2 size shrinks. (Hint: Keep an eye on the word “Finance”).

Changing h2 font size in WordPress through Additional CSS: Keep your eye on the word “Finance.” As I reduce the font size, you can consequently see it shrink.

One fantastic feature of the customize feature in WP, in our case, the Additional CSS, is that you can see your changes take place right in front of you, before you decide to save them. The customizer is divided into two sections. The left, is where you code the changes; the right is where you can see its effect.

Caveat: What I just discussed is a very simplistic approach. Coding changes this way, will likely change your font sizes site-wide (everywhere). It is probably what you’re going for, but FYI.

You May Also Want to Check Out:

In Closing

My personal opinion has always been not relying on plugins if you can do the job for yourself. I’m not too fond of the extra lines of codes and additional vulnerabilities that they may bring along.

However, I am very grateful for the plugins, as they make it easy to handle complicated, menial, rudimentary, essential tasks, and more. Changing font sizes, though, isn’t one of those, if I may.

And I am sure you can find plugins for those as well, but without them, you can quite easily get the job done.