This is the first in a series of guest posts covering tips and tricks for working with fonts on the web. Today’s guest post was written by Ryan Essmaker of Designing Monsters.

The redesign of Designing Monsters was heavily inspired by traditional newspaper layouts. The narrow column width, large headline text (in League Gothic), and serif body text (FF Tisa) all pay homage to classic newsprint.

The header on Designing Monsters.

The header and quote at the bottom of the site are set apart by a text shadow. This gives it a three-dimensional feel and emulates offset printing mishaps occasionally seen in newspapers.

To accomplish this I used the CSS3 text-shadow property. Actually, I used it twice: a white shadow sits atop a larger gray shadow:

h1 {
text-shadow: 2px 2px 0 #fff,
5px 5px 0 #bbb;
}

A close-up of the two shadows in place.

In the text-shadow syntax, the first value is the horizontal offset, while the second value is the vertical offset. Offsets can be positive or negative. (You can use a negative offset to create the inset type effect that all the cool kids are using these days).

The third value sets the blur of the shadow. Blurs can get out of hand quickly, so use with caution. I chose not to blur the shadows in this case.

The fourth and final value is color. You could also use RGBA colors to set the opacity of the text-shadow, like so:

h1 {
text-shadow: 2px 2px 0 rgba(255, 255, 255, 1),
5px 5px 0 rgba(187, 187, 187, .75);
}

In this case, the gray shadow is set at .75 (or 75% opaque) which would allow the background to bleed through a bit.

If you choose this method, be sure to set an RGB fallback color for browsers that don’t support RGBA. Older browsers will use the RGB value and ignore RGBA.

h1 {
text-shadow: 2px 2px 0 rgb(255, 255, 255),
5px 5px 0 rgb(187, 187, 187);
text-shadow: 2px 2px 0 rgba(255, 255, 255, 1),
5px 5px 0 rgba(187, 187, 187, .75);
}

Text-shadow is supported in Safari 1.1+, Chrome 2+, Firefox 3.1+, and Opera 9.5+. Unfortunately, Internet Explorer does not yet support text-shadow, even in the new IE9 beta. But the nice thing about text-shadow is that it doesn’t affect the layout so it degrades nicely in less capable browsers. Enjoy!

Ryan Essmaker is the founder of Designing Monsters, a small design studio. He’s a sucker for good typography and well-written markup. In his spare time you can find him with camera in hand or strumming on the ole six-string.

Santa Warriors have furnished us with yet another pressie from their bulging sacks and this one’s been on our wish list for a while now. We present their massive mix of the Beach Boys classic Good Vibrations in all it’s 320k MP3 gloriousness.

download: Beach Boys 'Good Vibrations' (Stanton Warriors Mix) (14596)
(right click link above and ’save as…’)

I’m starting up a new project, which from the title is rather self describing. Firefox’s purpose is to let you access the Web, but it unfortunately often blocks users from accessing the Web until they have responded to some form of question. This is particularly ironic given the massive amounts of time and developer resources that we’ve been pouring into improving our start up time. What’s the point of loading 300ms faster if the user is about to spend 7000ms on reading, 2000ms on thought, and 4000ms on interaction?

In many cases start up dialogs represent some form of failing, ranging from a failing of engineering (unable to find or implement a cleaner solution), a failing of design (unable to determine the best approach) or a failing of security (delegating a decision so that we can blame the victim). In all of these cases the dialog itself is simply the manifestation of a larger problem that we need to attack. So perhaps “eradicating start up dialogs” is an overly negative title, this is really more about “solving a range of complex problems, but entirely behind the scenes.”

To help up us prioritize and also make sure we have everything covered, I have two questions:

1) What do you think is the most annoying start up dialog
2) What do you think is the most obscure start up dialog that hasn’t been mentioned yet in the comments above the comment you are about to write