While on your way to master programming languages, you may have already realized that even though many of these coding scripts have a similar base or structure, their details vary from language to language. Just like any spoken language, while some may share particular nuances, they may have considerable differences in their intricacies. In the same way, a programming language like HTML (HyperText Markup Language) will differ from all other coding scripts.
HTML is one of the languages that most developers, coders, and programmers start out with, so, if you are a beginner in the world of coding, join the club. It is one of the simplest coding languages amongst the sea of more complicated ones. One particular aspect in which most HTML beginners tend to lose their way is figuring out how to change font size in HTML since it differs so much from that of other coding scripts. That is the exact challenge we are here to solve today. Let’s get right to it.
Table of Contents
Method #1 | How to change font size with Header tag:
Before we demonstrate what this will look like, let us understand what the header tag is and how we can use it. The header tag is represented by the letter ‘h’ and it has 6 different levels within it. What this means is that the <h> tag ranges from <h1> to <h6>. Do remember that the header tag will not be of any use without the number after the ‘h’, it simply will not provide the desired result.
An interesting feature of header tags is that the tag in itself is an independent tag. What this implies is that the <h> tag can be placed either in the body of your HTML code or even in the head as it will be considered as a header to your HTML script no matter where you place it. Using the header tag to change font size in HTML is a quick and simple way to get the job done, far easier than any other method in any other programming language. Now let us see how this will look within your HTML code.
Normal code example:
<html>
<head> <title> Normal HTML code
</title> </head>
<body>
<p> This is what an ordinary piece of text will look like </p>
</body>
</html>
OUTPUT:
This is what an ordinary piece of text will look likeHeader Tag example:
<html>
<head> <title> Change text size in HTML
</title> </head>
<body>
<h1> This is what a piece of text will look like in h1 </h1>
<h2> This is what a piece of text will look like in h2 </h2>
<h3> This is what a piece of text will look like in h3 </h3>
<h4> This is what a piece of text will look like in h4 </h4>
<h5> This is what a piece of text will look like in h5 </h5>
<h6> This is what a piece of text will look like in h6 </h6>
</body>
</html>
OUTPUT:
Now that we have learned how to change the font size in HTML, we can look at the other methods of achieving the same result.
Method #2 | How to change HTML text size with Font tag:
HTML developers and programmers wish, more often than not, for more control over how they manipulate elements within their code. Unfortunately, a method as simple as using the <h> tag does not offer much minute control over change in text size in HTML. While it may be simple and effective, it does not allow the coder to specify how big or small exactly they wish to change the font size. To curb this issue, there is yet another method of changing font size in HTML.
You can use the font tag, represented by the word itself, to manipulate text in your code with much more control and precision than the <h> tag. Unlike the <h> tag, the <font> tag can only be used within the body of your code. It has multiple attributes to let the developers change every aspect of the text, but this time, we will only be looking at the ‘size’ attribute. Let us see how this will look in your HTML code.
Font tag example:
<html>
<head> <title> Change text size in HTML
</title> </head>
<body>
<font size=“2”> This is what a piece of text will look like in size 2 </font>
<font size=“5”> This is what a piece of text will look like in size 5 </font>
<font size=“10”> This is what a piece of text will look like in size 10 </font>
</body>
</html>
OUTPUT:
Method #3 | How to change HTML text size with Style attribute:
Just like most other tags in HTML, the <h> tag also has various attributes. The final method of changing font size in HTML is by using the style attribute within the <h> tag. The <h> tag as well as the paragraph <p> tag share the ‘styles’ attribute and are used in similar ways to manipulate text. The value of this attribute to change font sizes is ‘font-size’ and is usually measure in pixels. This can be demonstrated with the following example:
Style attribute example:
<html>
<head><title>
HTML font size
</title></head>
<body>
<h1 style=“font-size:50px;”> This is a piece of text of size 50 pixels</h1>
<p style=“font-size:20px;”> This is a piece of text of size 20 pixels</p>
</body>
</html>
OUTPUT:
Conclusion: And just like that, you now know how to change font size in HTML with 3 simple methods. HTML, is used right, can be a very powerful tool, so, keep learning!