How toTech

How to change font size in HTML?

Change Font size HTML: So, you are wishing to change your font size in HTML. It’s pretty easy to do so. HTML is supported by many browsers in the current web system. HTML is a way of adding context and structure to the text. In this article, we will get to learn how to change font size in HTML.

Although HTML is not a programming language it is pretty much abundant in terms of requirement. The main advantage of the HTML is it is supported by every browser on net. Also, it is very easy to learn and use the HTML. You don’t need to purchase any software to get into the usage of HTML. You can integrate HTML with any kind of a programming language. For example, CSS, Java script, PHP etc.

Change Font Size HTML

HTML is a tag based language as it uses many tags in it. HTML uses wide range of colors, layouts and objects. It has proved its worth for the beginners who are in the web designing field. You can change your font size in HTML. It is termed as the size attribute.
The size attribute of HTML is nothing but it specifies the size of the text inside a <font> element.

The Syntax of to change the Font size number is as below,
<font size=”number”>

The attribute here is the number.
Number – A number from 1-7 which defines the size of the text.

Example: Let us go through a small example here. Follow the code below.

!DOCTYPE html>
<html>
<body>

<p style="font-size:30px>This is a paragraph.</p>
<p style="font-size:11px>This is another paragraph.</p>

</body>
</html>

On executing this hyper text, the output is as follows,

HTML font size change example
HTML output

Hence, you have successfully changed your font size in HTML.

CSS Font size property

CSS means cascading style sheets which is a simple mechanism to add styles to web documents. These pages contain information on how to learn and use CSS and available software. They also contain news from the CSS working group.

The CSS Syntax is as follows,

font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit; 

Here is an example to set font sizes for different elements.

div.a {
  font-size: 15px;
}
div.b {
  font-size: large;
}
div.c {
  font-size: 150%;
}

The entire code is now summed up as follows,

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
font-size: 15px
}

div.b {
font-size: large
}

div.c {
font-size: 150%;
}
</style>
</head>
<body>
<h1>The font-size Property</h1>

<div class="a">This is some text.</div>

<div class="b">This is some text.</div>

<div class="c">This is some text.</div>

</body>
</html>

The output of the above text is therefore as follows,

Change HTML font size example
HTML Font size

If you are in need of applying a proper PHP form validation, then you can learn more about it by exploring the highlighted link below this text.
How to apply PHP form validation

FAQ’s

Here are some basic FAQ’s in regard to this topic which would clear up your doubts of any. Scroll down below to know more,

What is default font size in HTML?

The default font-size in browser is 16px. The default size of 1em is 16px. (font-size:16px;).

What is font face in HTML?

A font family is a grouping of fonts defined by commonly shared design styles. In CSS, a font-family (or face attribute in HTML) consists of a set of related fonts, grouped as font families. For example, the Times family includes different font sizes, styles (like roman and italic), and weight (like regular and bold).

Are web safe fonts still necessary?

Why We Still Need Web-safe Fonts?. During the early days of the Web, there wasn’t a standard font that could be rendered across all platforms. However, some fonts — like Arial, Helvetica, and Times New Roman — were more likely to be installed in a person’s computer. These popular system fonts are called Web-safe fonts.

To conclude: Hence, through this article we have learnt the simple and basic methods on how you can change Font size in HTML. If you have any queries in regard to this article, comment them below in the comment section. Also, do share the content if you like it. For some more interesting tech articles and tech news visit Morphigo.com and delve into the most amazing content available in the web.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close