LUCiD GRAFiX Logo

Tutorial
YouTube RSS Feed
Search

TUTORIAL

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 http://www.slideshare.net/maxdesign/line-height.
Also Impressive web created a cheat sheet for CSS font shorthand http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/

About

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!

LESS Basics LESS Preprocessor Fundamentals
css3 transitions CSS3 Transitions
How to make a CSS sprite in Photoshop and then bring it to life – Revisited How to make a CSS sprite in Photoshop and then bring it to life – Revisited
Leave a comment

Leave a Reply