The font-size property is used to assign different font sizes as this property controls the size of fonts by CSS.
|
Value |
Description |
|
xx-small |
Sets the font-size to an xx-small size |
|
x-small |
Sets the font-size to an extra small size |
|
small |
Sets the font-size to a small size |
|
medium |
Sets the font-size to a medium size. This is default |
|
large |
Sets the font-size to a large size |
|
x-large |
Sets the font-size to an extra large size |
|
xx-large |
Sets the font-size to an xx-large size |
|
smaller |
Sets the font-size to a smaller size than the parent element |
|
larger |
Sets the font-size to a larger size than the parent element |
|
length |
Sets the font-size to a fixed size in px, cm, etc. |
|
% |
Sets the font-size to a percent of the parent element’s font size |
The various values of font-size can be grouped in different categories as
Absolute Font Sizes – This value can be assigned one of seven keyword values which are
- X X-SMALL
- X-SMALL
- SMALL
- MEDIUM
- LARGE
- X-LARGE
- X X-LARGE
These keywords specify the font size based on a scaling factor of 1.2.
Scaling factor is the ratio between two shapes. The scaling factor is determined by multiplying the font size by 1.2 to determine the next font size relative to the previous one like if a font size of 16 pixels is used for medium keyword, the large keyword is 20 pixels approx
Relative Font Sizes – It can take two values
- larger
- smaller
When used the font size depends on the absolute size of the font like if value is in pixels — the browser uses a 1.2 scaling factor to that size to get the larger size.
Length and Percentage Font Sizes – Both are most commonly used and both work in same way.
Length can take values in inches, centimeters, millimeters, points, and picas or relative values which include em, ex, pixels and percentage as discussed earlier.
Web browsers have a mechanism for users to resize text in the browser for accessibility. But IE does not resize text if the font size is set in pixels or in any absolute units so, percentages and ems are used.
Percentage font sizes work similar to the em units.
