How to create headers (Large Text!) in your WordPress posts and pages

How to add images (That are not attachments!) in your email footer using WordPress
December 30, 2014
How to Search for who is linking to your competition’s websites
April 6, 2015

Many people I set up WordPress websites for as a very simple question:

How do I make the text bigger?

 

The simple answer is headers! Typically in web design, when you want large text, it is to represent the header or title of the body. This helps people with screen readers and search engines decide what the content to follow is to be about.

Other times you just want BIG text!

If you are in a hurry, here is easy the answer:

1. Make sure you are in Visual Mode

Clicking on WordPress visual mode


2. Click on the WordPress “Toolbar Toggle” Icon.

This hidden-wonder opens up a bunch more options for the editor.  You know it is the right one because when you hover over it, a little message or tooltip says “Toolbar Toggle”.

kitchen-sink-icon-web-design-boston

3. Highlight the text you want to make large.

 

text-highlighted-for-wordpress

4. Select your header size

You will see a small dropdown that says “Paragraph”.  In this dropdown you will see a bunch of H1, H2, H3, and so on.  H1 is the largest header font and tells people that this is the main focus of the page.  H2 is typically a bit smaller and is meant to act as the sub-header for pages. H3 is smaller than H2 and so on with H6 being the smallest.

headers-wordpress-content

5. Important Notes:

Why is the font different?

You may notice the font changes when you turn your text into a header.  Most WordPress sites are set to display a different font for the header.  If this is an issue, then you will have to enlarge the font by hand-coding it, or install a plugin for WordPress call TinyMCE Advanced that gives you more options. Go to your plugins and search for this plugin and install it. You can then make the text larger without creating a “Header”

Why does all the text turn to a header when I only select part of it?

This is a challenge for many and the only solution without having to dive into the text editor to hand code this, is to separate the text from the body text by hitting enter above and below the text.

Why does my header text overlap the line above and below?

This is a coding issue and must be adjusted in your theme’s css file.  The TinyMCE Advance plugin may have an option to adjust the “Line Height to resolve this.

 

I hope this helps and don’t hesitate to contact me via email with any questions at jason(at)mycompleteweb.net

Have a great day!

 

 

Jason Houston
Jason Houston
Jason Houston is a web developer at Complete Web based on the island of Nantucket Massachusetts. He actively monitors the status and health of over 20 accounts to maintain position in search and to ensure each business is doing everything possible to increase revenue. Feel free to ask Jason a question at: jason@mycompleteweb.net