HTML Make Text Smaller

In this article, I will discuss how to minify the HTML text. We need to use the CSS font-size property to make HTML text smaller.

Font-size property

values = xx-small | x-small | small | smaller | px

<p style="font-size: xx-small;"> XX-Small</p>
<p style="font-size: x-small;"> X-small</p>
<p style="font-size: small;"> Small</p>
<p style="font-size: smaller;"> Smaller</p>

Output:

Don’t give font-size values ​​in pixels, because if you give small values in pixels the text will be too small. So, you should use the above values. In the above code, we have four <p> tags with different font-size values.

1. First, we have the “xx-small” value in font size.
2. In the second, we have set the font size and given value as “x-small”. See the above output the first and second <p> text is displayed in the same size because both values are 10px.
3. Then we set it to a “small” value. So, see the above output, the third paragraph text is larger than x-small and xx-small values.
4. Finally, we have set it to a “smaller” value for the font-size property. See the above output, the third and fourth paragraph is displayed with the same font size. So, the small and smaller value in the fonr-size property is the same.

If you want to make your text a little smaller, you can give the font-size property value in pixels as in the below code.

<p style="font-size: 7px;"> 7px Paragraph Text </p>
<p style="font-size: 6px;"> 6px Paragraph Text </p>
<p style="font-size: 5px;"> 5px Paragraph Text </p>
<p style="font-size: 4px;"> 4px Paragraph Text </p>

Output: