Reduce or Enlarge Font Size with the HTML small and big Tags
Normally, all text on a web page has the same font size. This is a good thing, as it makes reading the text as pleasant and comfortable as possible for visitors. But sometimes it is useful and desirable to make the font for a section smaller or larger than regular text.
Formerly <FONT was used to set was used to set the font size with a number between 1 and 7. The default font size is 3.size="value">
Note: The HTML font tag is no longer valid in HTML5 and should not be used.
Instead of HTML, we today use CSS to define the desired font properties such as font, Font Size. and font color.
A class is often defined for paragraphs in CSS. Properties such as font, font size, font style, and font color that apply to all paragraphs are centrally defined in this class.
Sometimes, however, you want to write one or more words smaller or larger.
small and big are Inline Elements. That means, they do not produce an automatic line break.
The HTML <small> Tag
Text in smaller font size
The HTML small tag is used to display text in a smaller font size. The text you want to appear small begins with <small> and must end with </small>. The small tag has no semantic meaning.
The font size for the text marked up with small is reduced by one step, unless the smallest font size is already being used (i.e. size="1").
The HTML <small> tag is used for add-ons to the main text, e.g. notes, comments, footnotes, or references for quotations.
For the so-called Small Print, e.g.
- Terms of Delivery
- General Terms and Conditions
- Privacy Notice
the small tag is not used. These sections are not comments or add-ons, but the main content of the page.
The HTML <big> Tag
Text with enlarged font size
The HTML big tag is the counterpart to the small tag and marks up a text to be displayed in a larger font size. The selected text begins with <big> and must end with </big>. The big tag has no semantic meaning.
The font size for big is increased by one step, unless the largest font size (i.e. size="7") is already being used.
The HTML <big> tag is used for individual words or parts of text that are written in a larger font size, but do not semantically represent a heading.
The big tag was used in HTML4 to markup enlarged text. This presentation-only tag has been removed from HTML5 and should not be used. Instead, it is recommended that you use CSS to control the font size.
Change font size with HTML
This is text in regular font size. <br>
<small>This is text in small font size.</small>
<big>>At last, this text is displayed in enlarged font size.</big>This code example shows how you can use the <small> and <big> tags to make individual words in the text appear smaller or larger, respectively.
The HTML elements small and big mustn't contain any block element such like P.
The SMALL element is a semantic tag in HTML5 that can be used to markup text as a comment or as less important.
SMALL should not be used together with STRONG or EM.
The HTML BIG tag is deprecated in HTML5 and is no longer valid. It should therefore no longer be used, although some browsers still support it. So, it is more appropriate to use the CSS Font-Size, property to set the font size.
A more appropriate option than using <small> and <big> is to implement CSS classes. This method is recommended as it allows you to separate content and style.
Using CSS classes to change font size
This is text in regular font size. <br>
<span class="small">This is text in small font size.</span>
<span class="big">At last, this text is displayed in enlarged font size.</span>The CSS small and big reduce or enlarge the font by one level relative to the surrounding text. They make the font size smaller or larger.
Reduce or enlarge font size
.small { /* Decrease font size by one level */
font-size: smaller;
}
.big { /* Increase font size by one level */
font-size: larger;
}
This is text in small font size. At last, this text is displayed in enlarged font size.