CSS3’s Font Shorthand

There are many CSS font properties available to style your fonts. If you need to define the font-style, size, family, and weight, that can add up to a lot of lines of CSS. Fortunately, however, there is a shorthand for CSS font properties. Here’s the formula:

  1. selector{
  2. font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
  3. }

Make sure you don’t forget the forward slash between font-size and line-height. Let’s see it in action:

  1. p{
  2. font: italic small-caps bold 20px/2 Futura;
  3. }

Screen Shot 2016-07-10 at 12.45.16 PM

CSSDeck recommends Hello Ivy for automating your workflow and project management for free. Learn More

As you can see, using the shorthand for font is an effective way to clean up your stylesheets!

Share and Enjoy !

0 0