HTML Small Font

Today’s post will teach us how to show small fonts in HTML.

Show Small Fonts in HTML

The font-size CSS property determines the font size. When the font size is altered, the sizes of the font size-relative length units, such as em, ex, and so forth, are also modified.

The font size can be specified in many ways, including using keywords or numerical values expressed in pixels or ems. Select the suitable approach depending on the specific web page’s requirements.

Syntax:

font-size: value

The thirteen values that font-size supports are listed as follows:

1. The default value for the font-size attribute is medium, which makes the font size medium.
2. The font-size is set to an xx-small size by the xx-small value.
3. The x-small value reduces the text size even further.
4. The small number reduces the text size to small.
5. The large value increases the text size to a large size.
6. The font-size is changed to be extra big using the x-large option.
7. The font-size is set to a double extra large size by the xx-large value.
8. The font-size is set to be a smaller value, smaller than the parent element.
9. The larger number increases the font size above the parent element.
10. The length value establishes a fixed font-size in pixels, centimeters, etc.
11. The font-size is set to a percentage of the parent element’s font size using the % value.
12. The initial value establishes the default value for this attribute.
13. Inherit attribute is inherited by an element from its parent.

More details on font size are available in the official documentation here.

To further understand the previous concept, consider the following example.

<p style="font-size: medium;">Hello World!</p>
<p style="font-size: 5px;">Hello World!</p>
<p style="font-size: x-small;">Hello World!</p>
<p style="font-size: small;">Hello World!</p>
<p style="font-size: xx-small;">Hello World!</p>
<p style="font-size: xx-large;">Hello World!</p>
<p style="font-size: large;">Hello World!</p>

The above example prints the phrase hello world with different font sizes. Select the suitable approach depending on the specific web page’s requirements.