How to Change the Font Size using HTML and CSS
Description.
When changing the font size in HTML, what are you going to do? Are you worried about this?
This time, I will explain two ways to change the font size using the <font> tag in HTML. Additionally, I will explain how to change the font size with CSS, which is recommended for character decoration. Please refer to it for a more comprehensive understanding.
The process of modifying font size in HTML can greatly impact the appearance and readability of your content. Whether you choose to employ the <font> tag or delve into CSS, understanding these techniques will empower you to craft visually appealing and engaging web pages. Embracing CSS for font size adjustments grants you greater flexibility and consistency across your site, contributing to an enhanced user experience.
So, let’s delve into the details of these font size manipulation methods and dispel any concerns you might have about this crucial aspect of web design. By the end of this article, you will be equipped with the knowledge and confidence to confidently control font sizes and create captivating typography for your digital creations.
Change font size in HTML
How to use font size
In HTML, the <font> tag is used to change the font size, color, and type of text. To change the size, specify the size with the size attribute in the <font> tag.
|
1 |
<font size = "size" > ~ </font> |
How to specify the size
Regarding the size specification method, specify the character size with a number from 1 (minimum) to 7 (maximum) in size=””. In addition to this, you can also specify relative to the standard font size, such as -1, +1.
The standard font size is 3, so specifying -1 will set the font size to 2, and +1 will set the font size to 4. Make sure the resulting size is in the range 1-7, even if you specify it relatively.
Example: how to set font size using Html font size tag:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Html and Css Font Size Tutorial</title> </head> <body> <p><font size="1">Programming Digest</font></p> <p><font size="2">Programming Digest</font></p> <p><font size="3">Programming Digest</font></p> <p><font size="4">Programming Digest</font></p> <p><font size="5">Programming Digest</font></p> <p><font size="6">Programming Digest</font></p> <p><font size="7">Programming Digest</font></p> </body> </html> |
Important point
You can change the font size of the text using the <font> tag in HTML like this, but since HTML is basically used to express structure and content, it is recommended to use CSS to describe text decoration. It has been.
Change the font size with CSS
If you want to change the font size with CSS, specify “size (px or em)” in the “font-size” property. In the case of px, the size is specified in vertical pixels, so 15px to 20px is recommended for the main text of the web page.
em is specified as a scale factor for the current font size. For example, if the current font size is set to 10px and 2.0em is used, the font size will be 20px.
Example: how to set font size using css font size property:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Html and Css Font Size Tutorial</title> <style> #size1{ font-size:10px; } #size2{ font-size:20px; } #size3{ font-size:30px; } #size4{ font-size:40px; } #size5{ font-size:50px; } </style> </head> <body> <p id="size1">Programming Digest</p> <p id="size2">Programming Digest</p> <p id="size3">Programming Digest</p> <p id="size4">Programming Digest</p> <p id="size5">Programming Digest</p> </html> |
Change Font Size Within the Same Paragraph
To change the font size within the same paragraph, you can use HTML and CSS. HTML allows you to structure the content, and CSS is used for styling. Specifically, you can use the <span> element along with the style attribute to apply different font sizes within a paragraph. Here’s an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>Html and Css Font Size Tutorial</title> <link rel="stylesheet" type="text/css" href="styles.css"> <style> </style> </head> <body> <p> This is a paragraph with <span style="font-size: 16px;">normal-sized text</span>, and here is some <span style="font-size: 24px;">larger text</span> within the same paragraph. </p> </body> </html> |
In this example, the first span element will have a font size of 16 pixels, while the second span element will have a font size of 24 pixels. You can adjust the font size values as needed. The text within the <span> element will inherit the other styles, such as font family, color, etc., from the surrounding paragraph.
If you want to apply this styling through CSS rather than inline styles, you can use classes like this:
HTML and CSS code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title>Html and Css Font Size Tutorial</title> <link rel="stylesheet" type="text/css" href="styles.css"> <style> .normal-text { font-size: 16px; color:green; } .larger-text { font-size: 24px; color:red; } </style> </head> <body> <p> This is a paragraph with <span class="normal-text">normal-sized text</span>, and here is some <span class="larger-text">larger text</span> within the same paragraph. </p> </body> </html> |
By using CSS classes, you can apply the same font size and color styles to multiple elements throughout your HTML document easily.
Summary:
Changing the font size using HTML and CSS is a straightforward process that allows web developers to control the appearance of text on a webpage. By combining HTML tags with CSS properties, you can easily adjust the font size to create a more visually appealing and user-friendly experience for your website visitors.
If you learned something new then do check out more articles in the above category, or if you have any questions then you can ask in the comment box. I would love to reply to every single one of your comments.
