The CSS font-size property is most often assigned numeric values in the amounts of px, em, or rem, but what many developers may not know is that the property can also accept other values, like ‘larger’ or ‘smaller’. When you give the value ‘larger’ or ‘smaller’ to the font-size property, the font-size for that element will be rendered as exactly one size larger or smaller (respectively) than that of its parent element. This can be especially useful if you aren’t one to keep track of what font sizes or font size ratios you assign to all your elements.
As an example, let’s say you have a paragraph that’s inside a div, and the div has a font-size of 18px. If you apply font-size: smaller to the p tag that resides within the div, the font-size of the text in the paragraph will be 17px. Here’s what that might look like:
- div{
- font-size: 18px;
- }
- p{
- font-size: smaller;
- }