Quick Tip: font-size: larger, font-size: smaller

Published June 17, 2016 by CSS Newbies.

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:

font-size: 18px;

font-size: smaller;

Screen Shot 2016-06-16 at 2.42.40 PM

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>