YouTube RSS Feed


CSS Font Shorthand Explained

Written by Posted on November 22nd, 2013 No Comments
Share This

All CSS Font Properties

font Sets all the font properties in one declaration
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-weight Specifies the weight of a font
font-size Specifies the font size of text
Line-height is used to control the vertical space between lines.
font-family Specifies the font family for text

CSS Font options

These are all the properties that make up the font shorthand. However, the way it is used is broken down into sections:

font: || font-style || font-variant || font-weight || font-size || line-height || font-family;

If  font-style || font-variant || font-weight are not set, they default to normal.

In the top example I used all the properties and in the second is the typical way it is used, The slash separates the font-size and line-height, if there is no slash the line-height is negated.

To find out more info about line-height
Also Impressive web created a cheat sheet for CSS font shorthand


Hi, my name is Eric Young. I’m a web designer who has worked in the IT industry since 2000. I love blogging and making the web a better place. If I'm not here I'm probably playing Gears of War. LOL

Related Articles You Might Enjoy!

clearfix How to make a proper clearfix
LESS Elements Lets take a look at LESS Elements
How to use LESS in Dreamweaver How to use LESS in Dreamweaver
Leave a comment

Leave a Reply