• youtube
  • google

How to Change the Text Size in a WordPress Post

1 Star2 Stars3 Stars4 Stars5 Stars

This post will show you how to change the size of text in your blog posts so that you can format the look of your posts a bit better. Unfortunately WordPress has made this pretty difficult to do for the average user, so this post will hopefully help anyone that was struggling to be able to do it quickly and easily.

Create a new post, or open the post for editing that you want to change the text size

This method of changing text size just allows you to surround the text in code, so this will work well for a new post, or works just as well for a post you’ve already created, so don’t think you have to redo your posts, just open it up and continue to the next step.

Switch to the “Text” view rather than the “Visual” view

The visual view shows you how your text will look once it is actually on the web page, while the text view will show you all the behind the scenes stuff and allow you to input your own html code. We are going to be adding some code so you’ll need to switch to the “Text” view.

To do this, just look at the top right of the form to create the blog post (the form where you actually type the text) and you should see two tabs, “Visual” and “Text”. Just click on the Text option to put yourself in Text mode (this is also shown in the video embedded at the top).

Find the text that you want to change the size of

The code you will be adding needs to be placed around the entire text that you want to change the size of, so if you have multiple sections that you want to be different sizes, make sure to place separate code around each, which I will show you how to do in the next step. Just make sure to know which text you want which size, because any text inside the tags will be changed to the alternate size.

Add the code around the text to increase the size


<@span style="font-size: 20px;">Find the text that you want to change the size of<@/span>

^This is the exact same line from earlier that you’ll notice is in an increased size. The only difference is that I added the @ symbols so that it would display the code instead of using it to make the text size bigger.

Basically, all you have to do to increase the text size is to place these tags around whatever text you want to change the size of.

So for example, if I wanted to change the size of the word TEXT, then I would add the tags around that word. So that it would look like this <@span style="font-size: 20px;">TEXT<@/span>, and when I remove the @ symbols so that it actually executes the code, it looks like this TEXT.

Now if you want to change the size of whole sentences, paragraphs, or even posts, then just put the tags around the larger block of text. So for example, to make the sentence THIS IS TEXT larger, I would put in code like this: <@span style="font-size: 20px;">THIS IS TEXT<@/span>, and when the @ symbols are removed, it looks like this: THIS IS TEXT.

Then, to manipulate the size of the text, you can change the number in the first tag. For example, <@span style="font-size: 8px;">THIS IS SMALL TEXT<@/span> (NOTICE THE VALUE IS 8px NOW INSTEAD OF THE 20 I WAS USING EARLIER) would look like this THIS IS SMALL TEXT. Also, you can set the number larger to get bigger text. So <@span style="font-size: 30px;">THIS IS BIG TEXT<@/span> (NOTICE THE NUMBER IN THE FIRST TAG IS NOW 30px INSTEAD OF THE 20 I WAS USING EARLIER) would look like this THIS IS BIG TEXT.

Leave a comment if you have any questions or if you thought something could be made more clear, and remember to subscribe, check out my Facebook, Twitter, and Google+, and definitely check out my Youtube page

Like This Post? Share It

Warning: count(): Parameter must be an array or an object that implements Countable in /home/public/wp-includes/class-wp-comment-query.php on line 388

Leave a Reply