Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about the
line-height property for you.
L is for
In this quick tip, we’ll look at a shorthand for setting font-size and
line-height together to save yourself a couple of extra keystrokes.
line-height, as discussed in the original screencast video, is a property for setting the height of a line in CSS. It’s similar (but slightly different) to leading in print design.
line-height only applies to elements that have their
display set to
inline-block and it actually sets the height of the line box that bounds the element. If you set
line-height on a block element, you may still see some changes to your styles but it’s actually the
inline child elements that are being affected as
line-height is an inherited property.
line-height without a unit (as I recommend in the video), the computed value is the
line-height multiplied by the current element’s
font-family: 'Avenir', sans-serif;
line-height: 1.5; /* 30px */
If you need to set both
font-size at the same time, there’s a handy shorthand via the
This shorthand allows you to set
font-family in a single line.
The snippet from the tip above, could be combined into a single
fontshorthand as follows:
font: 20px/1.5 'Avenir', sans-serif;
When using this shorthand syntax, the order of declaration is important.
font-family must be the last declaration
line-height must follow the
font-size immediately and be separated by a forward slash
font-weight must be defined before
A full example using all the available font properties may look as follows:
/* style | variant | weight | size/line-height | family */
font: italic small-caps 700 20px/1.5 'Avenir', sans-serif;