How To Change Text Color and Size in WordPress (2017)

how to change color and size of your text in wordpress

If you have a WordPress blog, you know that there aren’t many apparent options to change the look of your text. You may have wondered how to change the text color or size in your blog. It’s fairly simple, though it can include a bit of HTML code writing. Don’t worry, it’s a simple rewrite which won’t be confusing at all, and you probably won’t need to use it.

If you’re looking for more than just a few changes in size or color and dislike the way your text appears, then you’re probably better off installing a new WordPress Theme. Other themes often have different options for default text color, size, and font. If you just want to change a few small things, or you don;t want to go to all that trouble, you’ve come to the right place. Keep reading for a detailed tutorial!We’ll cover color first, as it’s the least complicated of the two. If you’re only interested in changing your text size, simply scroll past this first section; the two techniques are not at all interconnected. If you also want to change fonts, that’s covered in step 7 of the Change Size section.

To Change Color Of Your Text On WordPress

1. To get started, you’ll need to go to your WordPress Dashboard and click on “Posts” in the left-hand menu.

2. Once you’re there, click on the post that you want to edit.

3. As you probably already know, you can quickly see there aren’t any apparent options for changing your text color. You can easily solve this issue by clicking on the “Toolbar Toggle” button, which is the second icon from the right under the “Add Media” and “Add Contact Form” buttons.

toggle option in wordpress

 

4. Once you’ve clicked on that button, you’ll see an icon with an underlined “A” and a down arrow fourth from the left. If you hover your mouse over it, “text color” will pop up.

text-color option on wordpress

 

5. When you click on the down arrow, you’ll see a menu familiar from many word processing programs with 39 preset colors. If this is all you need, highlight the text you want to change and click on the color you want it to be and you’re done. If you want custom colors, keep reading. (The small “x” at the bottom right of those presets will change your text to “no color”, which will automatically adjust your text to the background color. This is the default color option and you don’t need to use it unless you change your text color and want to change it back.)

wordpress colors

 

6. On the same drop down menu with the presets, you’ll see the word “Custom”, under which are eight boxes, which should be blank. Click on “Custom” to enter a new menu.

 

7. You’ll see a square box ranging from red in the top right to black in the bottom left. There’s a rainbow rectangle to its right, and some text boxes on the far right with a black box underneath them.

custom color chart wordpress

 

8. To change color visually, all you need do is click and drag in the rectangle to find the color you want. If you need to change the shade, click and drag within the box. You’ll see the color of the black box under the text boxes change with each thing you do. The color it changes to is the custom color you’re making. The larger text box just over this color preview will automatically generate the number code of the color and shade you are choosing. This can be helpful later on in matching the color in other programs.

 

9. If you know the red, blue, and green values you want, you may manually enter them in the boxes labeled RBG on the right, respectively. Alternatively, if you know the number code of the color you want you can write that in the largest text box.

 

10. By clicking enter on your keyboard or “Ok” in this menu, you will save the custom color in one of the eight blank boxes under “Custom” in the first menu. Clicking the “x” or “Cancel” will exit the menu without saving anything. Once you’ve chosen your color(s), highlight the appropriate text and open the color drop down to click on your custom choices.

 

To Change The Size Of Text In WordPress

If you’ve been reading from the top,it’s ok to go ahead and skip the first three steps. If you already skipped to this portion, it’s helpful to read every step to get all the information you need.

1. To get started, you’ll need to go to your WordPress Dashboard and click on “Posts” in the left-hand menu.

 

2. Once you’re there, click on the post that you want to edit.

 

3. As you probably already know, you can quickly see there aren’t any apparent options for changing your text size. You can easily solve this issue by clicking on the “Toolbar Toggle” button, which is the second icon from the right under the “Add Media” and “Add Contact Form” buttons.

 

4. You’ll see a box on the left of the toolbar that by default will say “Paragraph”. Click anywhere on the box and a drop down menu will appear.

WordPress Font Size Option

 

5. You will immediately notice that there are only eight options for your text size, which range from “Paragraph”, “Headings 1-6”, and “Preformatted”. This is vastly different from most word processing programs, which of course offer a group of preset numbers and manual number entrance. This allows for more subtle differences in size, along with endless options. But who needs size 48 anyways? You don’t need to scare away your readers.

 

6. The presets are standard sizes, which allows for a very reasonable set of variations. “Paragraph” is the standard size for all body or main text. “Heading”s will give you six options in size, which is helpful in several ways. First, it allows you to choose which of the sizes you like the most, and second, it provides the ability to make sub-headings under parent heads, which is absolutely great for lists. Lastly, it allows you to change the size of a single word or phrase.

 

7. “Preformatted” is a bit different. It allows you to paste in different fonts, text colors, and sizes from outside sources such as Open Office or Microsoft Word. This allows you to keep original formatting from quotes or anything else you need to copy and paste. Also, if you’re one of the ones who doesn’t want to install a new theme, this is the quick and easy way to write in a different font!

 

8. You’ll notice that when you change the text size anywhere in your post, it will change the entire paragraph instead of just a single word or phrase. If that’s what you wanted, great! If not, keep reading to learn how to fix that. This is where we get into the HTML, so buckle up.

 

9. At the top right of the main text box where you write your post, you will see that it has two options labeled “Visual” and “Text”.

visual text on wordpress

“Visual” is the default mode where you usually work and is what the final post will end up looking like. Clicking on Text will change your view to the HTML screen, which is a bit more complicated. This, however, allows you to edit the size of your text more accurately by working some quick and easy coding magic.

 

10. Once you’re in the “Text” view, you’ll see some code along with your text, which may be a quite lot if you added a bunch of media, quotes, or hyperlinks. That’s ok, because we don’t need to mess with most of these codes. Take a few seconds and find the section where you need to edit the size of your text.

 

11. Depending on the size you chose, there will be different numbers in the code. We;re assuming that you used Heading 1. You’ll see that at the start and end of the paragraph, there’s two small bits of code that look like this: <h1> and </h1>. To only change the size of your chosen text to Heading 1 or whichever, simply cut these codes and paste before and after the text you want to change. Now, switch back to visual and everything should be just as you wanted it!

 

So there you have it, folks. Both methods are fairly simple, even if the HTML coding seems a bit daunting to those with little or no experience in that field. While WordPress hides the toolbar by default, it is easy to open and use the provided options for changing both the text size and text color.

 

In addition to these two options, you’ll see more icons that allow you to change a variety of formatting options and a button for keyboard shortcuts. If you click on that, you’ll get a complete list of the accepted shortcuts in WordPress. If you ever need or want to work with these other options, remember to use the “Toolbar Toggle” button!

The following two tabs change content below.

Jamie

My name is Jamie Spencer and I have spent the past 5 years building money making blogs. After growing tired of the 9-5, commuting and never seeing my family I decided that I wanted to make some changes and launched my first blog. Since then I have launched lots of successful niche blogs and after selling my survivalist blog I decided to teach other people how to do the same.
11 Comments
  • Mary
    Posted at 18:06h, 27 August Reply

    Hi Jamie, thank you! I really appreciate your help. Mary :)

    • Jamie
      Posted at 07:37h, 29 August Reply

      Not a problem Mary. I’m glad this guide has been of use to you.

  • Kenny
    Posted at 12:15h, 22 October Reply

    hi, Jamie, nice post. But i dont see a ‘Visual’ and ‘Text’ option. Can that be a problem or is it something i can fix?

  • Tricia Degnan
    Posted at 22:07h, 27 January Reply

    SO helpful to a new blogger! Thank you :)

  • Julie
    Posted at 15:27h, 26 April Reply

    Thanks for this! Very helpful!

  • Steven Andrew
    Posted at 07:56h, 25 August Reply

    Hi Jamie, I just updated my site to 4.8.1 and have found when i select the arrow next to the A it doesnt present me with a box and I cant select any colour. Did you find this when you updated. Can you help..Steve

  • Tanya Nagayeva
    Posted at 16:57h, 25 August Reply

    Hi,
    What if I click on ‘Paragraph’ [art to change paragraph size, but this is not working and not changing?

    Thank you.

    Tanya

  • astrid
    Posted at 18:56h, 29 August Reply

    Thank you for this!! Do you know how to do a text color in yellow with blue outline?

  • Mazino
    Posted at 01:45h, 12 September Reply

    I just moved from blogger to WordPress. I am trying to change the default font and family size of my posts. They look so small.

    Is there no CSS code I can apply inside theme to make it work?

  • JR. Mitchell
    Posted at 16:58h, 14 September Reply

    WordPress is so stupid. After all these years they still can’t implement a basic change text setting.

  • Jerry Davis
    Posted at 00:36h, 18 September Reply

    I was looking for the css to change my h1,h2,h3,etc to white, bright white from the default “not quite white” so that the titles stand out. I put .

    h1, h2, h3, h4, h5, h6 {
    color: white !important;
    }

    in the css, but that did not work for me. Any ideas?

    Thanks,
    Jerry

Post A Comment