how to set font size or size of text in html

Defining the size of text in different contexts is important when designing and developing webpages. In HTML, there are primarily two different ways of specifying the font size or size of text. One is using the font tag and the other is using cascading style sheets or CSS.

According to the latest W3C recommendations, the best way to change the font size is using the CSS. We will only gloss over the use of the now deprecated font tag just for brevity. Although deprecated, the font tag is still supported by most browsers.

using the font tag

You can surround any text in the webpage using the font tag. The size attribute of the font tag is used to specify the size of the text inside the tag relative to the default size of the text. You can also specify the size in absolute terms.

<font size="+2">this is the text that will be resized</font>

You can use the notation +num to enlarge the size and -num to decrease the font size. Use just the num value to define the size in absolute terms. The value of num can range from 1 to 7.

As mentioned earlier, the size attribute is not supported in HTML5. So, we will use CSS instead.

using css to define font size

In CSS, the font-size property sets the size of the font for any HTML tag. Again you have the option of defining the font size in relative terms or in absolute terms. Also, there are many different units (eg. px, em, %) you can use to specify the size itself.

The generic CSS syntax of the property looks something like this

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

The medium size is the default value. The values from xx-small to xx-large sets the font size is an absolute term albeit relative to each other. The values smaller and larger will set the size relative to the size of the parent element.

The length is used to set the value in a fixed absolute term using one of the many units. The initial will set it to the default value and inherit will get the property from the parent element.

As you can see there are several ways to specify the font size. Let’s look at some examples. We will use the html tag div for the example, but you should be able to use any tag and css selectors for this.

div.a { font-size: 15px; }
div.b { font-size: x-small; }
div.c { font-size: larger; }
div.d { font-size: 1.45em; }
div.e { font-size: 123%; }
div.f { font-size: inherit }

Being CSS, you can use external CSS files to define these values. If you want to specify these inline on the HTML tag, then you can use the style attribute of the tag to define the font size.

<div style="font-size: 12px">this is the text inside the tag</div>

using javascript

If you want to set the property using JavaScript, then you can use the property fontSize to do so. The syntax is shown below where jsobject refers to the actual object that you want to set the font size of.

jsobject.style.fontSize="16px"

So, you can use HTML, CSS or JavaScript or a combination of all to set the font size of any text in your webpage.