There are 2 terms that come when you going the change HTML font size. The first is changing the size of text using a <font> tag and the other is using the CSS style attribute. You will learn all the methods of HTML Text Size. For example how to make text font size small or bigger, what is px and em etc.
Syntax
A syntax of HTML font size tag.
<font size="number">
Using Headings – H1..H6
<h2>text</h2>
Syntax inline CSS change text size HTML.
<p style="font-size: 46px;"> Text </p>
HTML font size tag example
A Font Tag is used in outer text tag like <p>, <h4> etc, with a size=”number” attribute. See the below HTML font size code example. A value of the size attributes not required any measurement unit like px, it can be just a number.
A Size attribute specify size of text inside <font> element.
<!DOCTYPE html>
<html>
<body>
<p><font size="6">A text with size</font></p>
<p>If size attribute is not supported HTML5 then Use CSS style.</p>
</body>
</html>Output: See below the visual difference between text size of the same kind of tag.
Font size in HTML | HTML font-size CSS | Style
Above you see the example of an HTML font size tag. But it can be done with CSS property font-size. A using Css will element <font> tag. It will easier and make an impact across applications.
Let’s see the example of HTML font-size CSS. Using this way can change many tags (need the same id or class). Here using an Internal CSS in the <head> tag section.
<!DOCTYPE html>
<html>
<head>
<style>
#txt {
font-size: 24px;
}
</style>
</head>
<body>
<p id="txt">A text with size 24px</font></p>
<p>Without font-size changed text</p>
</body>
</html>
Output:
You can also use an HTML font-size style attribute. (it will again as single element change)
Inline CSS: Font size in HTML style code.
<!DOCTYPE html>
<html>
<body>
<p style="font-size: 24px;">A text with size 24px</font></p>
<p>Without font-size changed text</p>
</body>
</html>CSS Syntax
<....font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;>...... <...>
HTML Font size px | em | small | Bold
What is HTML font-size px
A px stand for pixel. Which smallest single component of a digital image.
In HTML It means a dimension, measured in pixels on-screen. E.g.
font-size: 10px;
HTML font size em Used?
A HTML <i> and <em> Elements are not use for change size of text. But its use for for defines italic text.
<em> element defines emphasized text.
<i> element defines italic text.
<!DOCTYPE html>
<html>
<body>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
</body>
</html>Set HTML Font size small
Can use text size using a string in any type of CSS.
<p style="font-size: small;">A text small size</font></p>How to do font size style bold in HTML?
Use HTML <b> and <strong> Elements to bold a text. Both work and look same.
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold </b></font></p>
<p><strong>This text is strong<strong></p>
</body>
</html>
A change font size in HTM is easy and has many ways. If you have any doubts and suggestions or examples for this tutorial, then do comment below. Other tags like h1, h2…h6 also use to define the different sizes of the text.
Do comment if you have any doubts and questions.
Note: The All How to change the Font size in html examples
are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version