HTML Basics: Reduce font size for short portion of text with <small> or enlarge text with <big>

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 size="value"> was used to set was used to set the font size with a number between 1 and 7. The default font size is 3.

Note: The HTML FONT tag is no longer valid in HTML5 and should not be used.

Instead, CSS is used today to define the desired font properties such as font, font size, and font color.

A class is often defined for paragraphs in CSS. The properties that apply to all paragraphs are defined centrally in this class, e.g. font, font size, font style and font color.

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 starts with <small> and has to be closed with </small>. The HTML 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 an 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 part of text starts with <big> and has to be closed 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.

Example

Change font size with HTML.

This sample code shows how individual words in a text can be displayed smaller or larger by using the <small> or <big> tags.

This is text in regular font size.<br><small>And this is text in small type.</small> <big>>Finally, this text is in large type.</big>
Ausgabe des HTML Codes
This is text in regular font size.
And this is text in small type. Finally, this text is in large type.

The HTML elements small and big are inline elements that do not generate an automatic line break. They mustn't contain any block element such like P.