Home

font-size examples of types used in STYLES

These are the most common types of   font-size   commands to use:-


Note
To make text bold use the style setting: font-weight:bold;
(Other values are... :normal, :bolder, :lighter or a numeric value (click link for values))

To change the size of the font to be a specific size, eg

font-size:16px;
font-size:22px;
font-size: 32px;

16px size = font-size: 16px;
22px size = font-size: 22px;
32px size = font-size: 32px;

To change the size of the font relative to
the size of its ELEMENT (or one of it's parents
eg <Body>>), eg

font-size:16em;
font-size:22em;
font-size: 32em;

Note...
The text size in the element <p> is the standard 16px size.
But if you set it to something different (eg 48px) in, for example, the CSS sheet then it will
use that size as its current size so 2em will = 96px (2 x 48)

1em means 1 x the current text size for this element (16px) = font-size: 1em;
1.5em means 1.5 x the current text size for this element (16px) = font-size: 1.5em;
3em means 3x the current text size for this element (16px) = font-size: 3em;

To change the size of the font relative to
the size of the actual BROWSER's default, eg

font-size:16rem;
font-size:22rem;
font-size: 32rem;

1rem means 1 x the current text size for this browser (16px) = font-size: 1rem;
1.5rem means 1.5 x the current text size for this browser (16px) = font-size: 1.5rem;
3rem means 3x the current text size for this browser (16px) = font-size: 3rem;

To change the size of the font relative to
the size of the PARENT ELEMENT (or one of it's parents
eg <Body>>), , eg

font-size:100%;
font-size:50%;
font-size: 200%;

I made the size of this <div> to be 20px - it is the PARENT of the below...

100% means 100% of the current text size of the PARENT element = font-size: 100%;
50% means 50% of the current text size of the PARENT element = font-size:50%;
200% means 200% of the current text size of the PARENT element = font-size: 200%;

Back to Top

Paragraph 1...Font-size: on parent div is now 24px;

Paragraph 2...Font size is now 2em;
equivalent to parent x 2 = 48px

Paragraph 3...Font size is now 2rem;
equivalent to browser (16px) x 2 = 32px

Paragraph 4...Font size is now 200%;
equivalent to parent x 2 = 48px

This div does NOT have a font-size set on it. I will set it on each paragraph line below here.

Paragraph 2...Font size is now 2em;

Paragraph 3...Font size is now 2rem;

Paragraph 4...Font size is now 200%;

So as the PARENT div has no new font-size they ALL use browser default.

So as the PARENT div has no new font-size they ALL use browser default.
These 2 lines are just playing with rgb() and rgba()