HTML Fonts

byLearn Code and Programing -
0
HTML Fonts

HTML Fonts

Fonts play a key role in web design because they make text easier to read, set the tone of the content, and improve the overall look of a webpage. In HTML, font styling controls how your text appears — including its size, color, and typeface. Although modern web development relies on CSS for font styling, it’s still helpful to know about the older <font> and <basefont> tags, even though they are no longer recommended for use.

The font and basefont tags are old HTML elements that are no longer recommended for use. They’ve been deprecated, which means they’re outdated and could be completely removed in future versions of HTML.

In modern web development, you should use CSS to control text styles like font type, size, and color because it’s more flexible, easier to maintain, and works better across different devices.


Font Size

In font tag the size attribute is used to adjust the text size . This attribute allow us to set the font size between 1 to 7 , but the default font size is 3 . Where 1 is the smallest font size and 7 is the largest font size .


<!DOCTYPE html> <html> <body> <!--HTML font size tag starts here--> <font size="1">Font Size</font><br /> <font size="2">Font Size</font><br /> <font size="3">Font Size</font><br /> <font size="4">Font Size</font><br /> <font size="5">Font Size</font><br /> <font size="6">Font Size</font><br /> <font size="7">Font Size</font> <!--HTML font size tag ends here--> </body> </html>

Relative Font Size in HTML

Relative font size lets you adjust text in proportion to the default or surrounding text size instead of setting an exact number. With the <font> tag, you can use a + or - sign along with a number to increase or decrease the size relative to the current size.

Font sizes in HTML range from 1 (smallest) to 7 (largest), with 3 being the default.

  • +n → increases the font size by n steps from the current size.
  • -n → decreases the font size by n steps from the current size.
<font size="+2" >This is larger text</font>
<font size="-1" >This is smaller text</font>

Setting Font Face in HTML

The font face attribute defines the typeface (style of the text) you want to display on a webpage. You set it using the face attribute inside the <font> tag. For example, you can choose fonts like "Arial", "Times New Roman", or "Courier New". You can also list multiple font names separated by commas. This works as a fallback — if the browser doesn’t have the first font, it will try the next one in the list.

<!DOCTYPE html> <html> <head> <title>Font Face Example</title> </head> <body> <h2>Setting Font Face Example</h2> <!-- Using font face --> <p><font face="Arial">This text is in Arial font.</font></p> <p><font face="Times New Roman">This text is in Times New Roman font.</font></p> <p><font face="Courier New">This text is in Courier New font.</font></p> </body> </html>

Setting Font Color in HTML

However, the <font> tag is no longer supported and should not be used in contemporary web development. CSS, on the other hand, ought to be used to style the colors of text because it is more adaptable, simpler to maintain, and keeps design and content separate.

Old HTML Method (Deprecated)

<!DOCTYPE html> <html> <body> <p><font color="red"> Red text.</font></p> <p><font color="#00FF00"> Green text </font></p> <p><font color="blue"> Blue text.</font></p> </body> </html>

Note: The <font> tag still works in many browsers but is not recommended in modern HTML.


Modern Method

<!DOCTYPE html> <html> <body> <p style="color: red;"> Red text.</p> <p style="color: #00FF00;"> Green text.</p> <p style="color: rgb(0, 0, 255);"> Blue text.</p> </body> </html>

Tags:
Previous Post Next Post