WordPress font size in HTML
I recently read an article about changing font sizes in WordPress and I didn’t like it. The author suggested to use the TinyMCE Advanced plugin from the WordPress repository (as well as using paragraph headings like <h1>HEADING 1</h1> to h6); However, when performing simple tasks such as changing the font size on WordPress, supported HTML can be used opposed to using bulky plugins that limit or restrict options and can negatively affect the performance of your WordPress website.
Many WordPress themes do not allow the WordPress author to change font sizes using the standard <font> tag or numerical size attributes due to no HTML5 support. Fortunately you can change the font size of content on your WordPress website without the use pf plugins, excess PHP functions, CSS synatx’, or anything else that can interfere with the optimization of your WordPress website (with exceptions to a flamboyant TTC ratio).
So, how can you change font size on WordPress without using plugins or adding extra code?
How to change font size
To change the font size on WordPress using HTML, simply use HTML <span> tags with the style attribute, while utilizing the font-size property value element. It’s easier than it might sound.
1. Select the TEXT tab or HTML editor – not the Visual tab.
2. Copy and paste the code shown in the example below. Use <span style=”font-size: small;”> at the beginning of the content and </span> at the end.
<span style="font-size: small;">TEXT HERE</span>
In the example above will show TEXT HERE in small font but you can change the size of the font by using a size attribute or value shown below.
How to change font size attribute
The actual sizes of font can be changed from XX Small to XX Large by using the absolute size as detailed below in bold (<strong>TEXT HERE</strong>). These are called size property values or font-size values. You can also find a list of additional values at the bottom of this article. *In the example above we use the small absolute size value.
Listed below are values that can be used accordingly to their details.
| Value | Description |
|---|---|
| xx-small | Sets the font-size to an xx-small size |
| x-small | Sets the font-size to an extra small size |
| small | Sets the font-size to a small size |
| medium | Sets the font-size to a medium size. This is default |
| large | Sets the font-size to a large size |
| x-large | Sets the font-size to an extra large size |
| xx-large | Sets the font-size to an xx-large size |
| smaller | Sets the font-size to a smaller size than the parent element |
| larger | Sets the font-size to a larger size than the parent element |
| length | Sets the font-size to a fixed size in px, cm, etc. |
| % | Sets the font-size to a percent of the parent element’s font size |
| inherit | Specifies that the font size should be inherited from the parent element |
Tip
To make the font size XX Large, do not type XX Large, type xx-large.
Here are some examples:
<span style="font-size: xx-large;">TEXT HERE</span>
WordPress Font Example – x-small
WordPress Font Example – small
WordPress Font Example – medium
WordPress Font Example – large
WordPress Font Example – x-large
WordPress Font Example – xx-large
23 Comments
Very well explained! Thanks for sharing….
Hi,
I have used it and its really working, thanks a lot for sharing a simple and easily understandable blog. It is very helpful for all.
Unquestionably consider that that you said. Your favourite justification appeared to be at the web the simplest thing to take note of.
I say to you, I definitely get irked while people think about issues that they
just don’t understand about. You managed to hit the nail upon the top and also outlined out the whole thing without having side-effects , other people can take a signal.
Will likely be again to get more. Thank you
Its as if you read my mind! You appear to know a lot concerning this, like
you wrote the written reserve in it or something. I think
you could do with
some pics to drive the email home a little bit, but besides that,
this is fantastic blog. An excellent read. I’ll definitely be back.
[…] < span style=”font-size: ______;” > & < /span> (the _____ are words like: large, x-large, small, x-small) […]
[…] This is what I found. […]
Many thanks to you. Thanks for the post. I agree and I got your point. But I want to know more… I want to make the bigger size of some special word in a sentence without any plugin. Special words in a sentence. eg. we are doing in MS word. Can it possible? Hope your answer.
All the best
Jitendra
Hi,
I have used it and its really working, thanks a lot for sharing a simple and easily understandable blog. It is very helpful for all.
Is there any way you can set this as a default setting for headings?
Right now, my heading 1 is larger than my page title. When I use the “smaller” shortcode, it works for making H1 smaller than the title, but it also makes H1 the same size as H2, and I want them to be consistently decreasing in size, without having to go back and add the short code in for each heading in each post.
Is there a simple way to change the default wordpress setting for the heading sizes? Thanks!
You can change the size of your headers in your CSS Style sheet.
Here are some examples of basic CSS for header font size:
h1 { font-size: 24px;}h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
h5 { font-size: 12px;}
h6 { font-size: 10px;}
or
h1 { font-size: 2em; }h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }
with bold
h1 {font-weight: bold;
color: #fff;
font-size: 32px;
}
h2 {
font-weight: bold;
color: #fff;
font-size: 24px;
}
Here are a few pages you can take a look at:
https://www.w3schools.com/cssref/pr_font_font-size.asp
https://www.w3schools.com/tags/tag_hn.asp
http://typecast.com/blog/a-more-modern-scale-for-web-typography
Thank you so much!
Thank you so much for this! This is so useful and I have been looking for a clever solution like this since a long time 🙂
but what font size is small, large or extra Large ?
are they 12, 14 and 22 or some other combination ?
thanks
paul
Thanks!! I love when people do this. There are far too many posts out there that just affiliate market plug-ins, even for simply changing the text. I’ve bookmarked your post for reference. Thanks.
You are a lifesaver! I’ve been so frustrated trying to switch between font sizes in my WordPress post and not being able to use the simple code. After some research I found your article and it works perfectly. Thank you!
Thank you. This was easy to do and it worked
Thanks! But how do you als change the line-height?
TEXT HERE
doesn’t work… Thanks in advance.
You’re welcome. There is no possibility of this not working.
I would recommend to change line height using CSS.
Thank you for taking the time to post this info, it help tremendously
very helpful – thank you!
Many thanks, I appreciate the time taken. I agree, much cleaner than using some ‘black box’ plug-in.
All the best,
Mark
Thanks!
Thank you for this really useful article that helped me solve my issue. I am a big fan of simple solutions and this was one of them! 🙂