Monthly Archives: May 2011

CSS Shorthand

font: style variant weight size/line-height family;
background: color image repeat attachment position;
border: width style color;

Properties in bold are the only required values.
The order of properties is important.

Margin and Padding

There are multiple ways you can show Margins or Padding without fully specifying “margin-top”, “margin-right”, etc. You can do it all on one line with “margin” or “padding” only.

1. top right bottom left
margin: 10px 5px 15px 10px;

2. top/bottom right/left
margin: 10px 0px;

3. all the same (top/bottom right/left)
margin: 10px;

padding: (same shortcuts as margin)

The simplest way for me to remember the order of positions is to think of a clock face. Top, Right, Bottom, Left is the order of 12, 3, 6, 9 on the clock.

Web Fonts

Web fonts can be installed on your web site’s server and served to your users/viewers through your CSS. This works in all browsers, but different browsers require different formats, so you need to store all the file types on your server. Once you do that, you can set up the CSS:

/* Set up the Font Family */
@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compact Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

Then just use the Font Family wherever you would like by putting it at the front of the font-stack for any object you want with that font.

/* Use the font in your styles */
h1 { font-family: 'MyFontFamily', Arial, Helvetica, san-serif; } 


Many foundries are selling their fonts with the web files now for an extra charge. There are also some good free web fonts available at You will need to have all those web files on your server for this to work. webfont.eot (.woff, etc.)

The CSS code I used above comes from FontSpring. Be sure to read the post I just linked and this one also, if you want to understand more how it works. As of today (May 1, 2011) this appears to be regarded as the best code for using @font-face. It may change in the future, as browsers continue to update and change.

There are two important considerations when using @font-face. One, make sure your fall-back fonts look OK in case the browser has any trouble loading your fonts. You may need to search for a web safe font that is more similar to your chosen font, so the layout doesn’t break.

And two, sometimes there is a lag in the fonts getting loaded, and there can be what is called “FOUT” (flash of unstyled text). I will try to discuss how to handle this issue in the future, but won’t be covering that today. If you test your code on your server (it won’t happen as much when you are testing locally) and it is a problem, do a search on FOUT and you will find some solutions.

Despite these considerations, I love using web fonts. You can get the character and style you want in your website without the extra images (or using other convoluted techniques) and can make things faster.