CSS Font Shorthand Property Cheat Sheet
By Louis Lazaris on March 17th, 2010
Categories: Markup & Style, Web Design Articles | 17 Comments
In the past I’ve displayed some serious animosity towards the CSS font shorthand property, so I feel I should make up for it. After all, the font shorthand property was just minding its own business, trying to save developers some lines of code, and I come along and declare it an outcast. So, although I still don’t agree with ever using font shorthand, I do think it’s important that CSS developers understand how it works.
So to make up for my former font shorthand hostilities, I’ve prepared a printable cheat sheet that you can download and hang next to your computer, which will come in handy in case you decide to use this property yourself, or are forced use it in a stylesheet from an inherited project.
Enjoy!
Download the CSS Font Shorthand Cheat Sheet (PDF)
17 Responses
Add to the Discussion
Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. Thank you for cooperating.
To Post Code Snippets in Comments: Wrap your code in <code> tags, and make sure you use < and > for HTML, instead of < and >, otherwise your code will not show up properly.
Aaah nice guys! Been looking for a proper shorthand for styling fonts for some time. Will use this one from now on, thanks a lot!
Great!
Been too lazy to learn this. But that was really well written and described. Now i have a good picture of it in my head so i dont think ill forget how to use it!
Best Regards,
William Astrom
Great resource to add to my library, thank you.
awesome, like most, I was too lazy to learn the short hand.
Yeah, this is a great shorthand to use; it saves a lot of time. The font one is probably the trickiest to remember, followed closely behind by background and list-style (just because anything other than “none” is rarely used).
Nice, even look simple but very useful…
thank you
really helpful, thank you
Hi, I just viewed the screencast where you expressed your opinion on the shorthand font property, and although I appreciate your view on the topic, I don’t agree with the animosity simply because of the fact that it behaves exactly like other shorthands. You can’t really leave empties on margin or padding for example. If you do, you get a default value equal to the value of the opposite (top ~ bottom, left ~ right). In shorthand font it’s the same though since there are no “opposites”. It’s the most valid route to take for the browser, which can’t know if you want to inherit if you don’t explicitly tell it to. Margin and padding don’t inherit a value for any side if you don’t declare it in the shorthand property, why should font be any different?
That being said, all shorthand properties have some quirks that define their usage. Although it’s not a rule, you could say that shorthand methods are useful to declare the base styling of a “section” or to redefine a block completely from within a section.
Ex: You define your font (with the shorthand method) properties in the outermost block, and redefine with longhand as you go in the innerblocks. This is also the way to go for other properties with shorthand and multiple longhand methods for defining themselves.
Lastly, regarding beginners, when I first learned shorthand I found the structure of “font: bold italic variant size/lineheight font-family” a lot easier to remember than all the “features” of the background shorhand. I’m just saying….
Hey Jaime, thanks for chiming in here. Some valid points, and i definitely see what you mean about learning font shorthand early on, which is good. However….
The problem with your comparison to the other shorthand values, is that there really is no comparison. Yes, they do behave the same way, but those behaviours are inconsequential. That is, they will rarely cause problems.
When a developer sets the
backgroundproperty in shorthand and leaves out the “color”, it doesn’t have any effect, because there is no other background color being declared for that element anywhere, and he doesn’t expect it to be that way.The same is true with the
list-styleproperty. Although the type of list marker and position might be left out, it doesn’t matter if it gets reset, because there is no setting for that to inherit anyhow.And padding and margins, as you explained, are logical because they inherit the value of their opposite, so it works and it’s intuitive.
The font shorthand is not like those, because child elements should inherit typographic settings from their parents, so the way it behaves is unusual (even if, technically speaking, it’s the same as the other shorthand values).
The font one is probably the trickiest to remember, followed closely behind by background and list-style (just because anything other than “none” is rarely used).
really helpful, thank you
Nice, even look simple.
That’s a good thing. I’ve looked for such a shorthand compilation a long time. Thanks
Hi.
Instead of
34px/100px
for size/line-height, consider using
34px/3
In this form, line-height acts as a multiplier. This makes your code a little more elastic/accessible/responsive. Funny enough, line-height is the only css property takes a non-zero number with no unit.
Details here:
http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.1/
Thanks for pointing that out. I had actually forgotten about the no unit value with line height, which works similar to percentage values. I’m way too accustomed to using pixels for all values, which is probably not a very good habit.
I am very new to the net and needed to research this subject. Thought it was a great blog very well written and helpful. I will definitely be coming back to your site to read more posts as i adored this one..
nice one… thanks for this one.. make everyone lives easier… thanks again..