The 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.
CSS
font-size: value;
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.
Length Values
The most commonly used are px and em.
px
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.
See the Pen font-size in px by Aakhya Singh (@aakhya) on CodePen.
em
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.
See the Pen font-size in em by Aakhya Singh (@aakhya) on CodePen.
rem
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.
See the Pen font-size in rem by Aakhya Singh (@aakhya) on CodePen.
ex
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.
ch
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.
See the Pen font-size in vh by Aakhya Singh (@aakhya) on CodePen.
See the Pen font-size in vw by Aakhya Singh (@aakhya) on CodePen.
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.
Percentage Values
Font size can also be specified in percentage where the percentage value is with respect to the font size of the parent element.
See the Pen font-size in % by Aakhya Singh (@aakhya) on CodePen.
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.
See the Pen font-size for better browser compatibility by Aakhya Singh (@aakhya) on CodePen.
Absolute Values
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.
xx-smallx-smallsmallmediumlargex-largexx-large
See the Pen font-size with absolute keyword and values by Aakhya Singh (@aakhya) on CodePen.
Relative Values
There are two other values which can be given to the font-size property - larger and 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 large.
See the Pen font-size with relative values by Aakhya Singh (@aakhya) on CodePen.
Browser Support
The 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.
Conclusion
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.
