font-size property sets the size of text. The size of the text can be either absolute or relative to its parent, surrounding, browser size or the html document itself.
There are a number of ways you can give font size to your text depending upon the requirement. You can give the value in actual length, percentage, keywords, relative length or a combination of the above. Let's go through all these methods.
The most commonly used are px and em.
This is the most commonly used if you need pixel perfection. A value in px is static and does not depend on the Operating System. The text size specified in pixels may vary a little across browsers because different browsers have different algorithms to calculate a px.
This is a dynamic property because its value depends upon the font size of the parent of the element.
If no font-size has been given to the parents, then 1em ie equal to the default browser text font size, which is normally 16px. In that case, 1em = 16px. If its parent has been given a font size of 22px, then 1em = 22px.
The em unit is recommended by the W3C because the font size of the text automatically adjusts according to its container.
This unit is the same as em, but the difference is that the font size depends on that of the root element i.e. the html.
This is a rarely used unit. 1ex is equal to the height of the lowercase letter x (x-height) of the current font. So on changing the
font-family, the size of the text expressed in ex will also change.
This unit is similar to ex. 1ch is equal to the width of the glyph '0' (zero) of the current font. It is particularly used in combination with monospace fonts.
vw and vh
These are the two other units which set the font size depending on the viewport. 1vw is equal to 1% of the width of the viewport and 1vh is equal to 1% of the height of the viewport.
So, a font size of 50vh will make the text size equal to 50% of the height of the viewport and a font size of 17vw will make the font equal to 17% of the width of the viewport.
Resize the viewport in the above two demos and notice the change in font size. There are two other viewport values as well - vmin and vmax. vmin sets the font size as 1% of the smallest value out of vh and vw, while vmax sets the font size as 1% of the largest of the two.
Font size can also be specified in percentage where the percentage value is with respect to the font size of the parent element.
In the above example, the font size of the child element is 1.3 times that of the parent element.
Combination of percentage and em
This is the most effective solution that works for all browsers. Just give
font-size: 100% to the body and then specify the font sizes of the other elements in em. This will make the font size of the text adjust according to the browser and on different screen sizes.
There are these seven keywords which are used to give absolute font size to an element. The user's default font size is
medium and all the other six values are computed with respect to it.
These values are given below.
There are two other values which can be given to the
font-size property -
smaller. These two values make an element's font size larger or smaller than its parent's font size by the ratio between the two consequtive absolute size values given above.
For example, if a parent element has a font size of
medium, then giving a font size of
larger to its child element will make the font size of the child element
font-size property is supported in mostly all the browsers since IE 6+, Chrome 1+, Firefox 2+ and others. Although, the rem unit is supported by versions of IE greater than IE 10 and the vmax property is not supported by IE and Edge.
The most commonly used font size values are in px, em and percentage. You can use em and percentage if you want your text to adjust and look intact in different browsers. A good choice may be to make a combination of percentage and px, or of percentage and em.