Arial has been around a very long time but Web 2.0 returned Arial back to its glory days and It spread like a virus through the typographic landscape.

But now, Lucida (Grande) is the new Arial. Lucida is now everywhere, a side effect of Mac’s success.

Lucida Grande

Lucida Grande is a humanist sans-serif typeface included with the Mac OS X. It is currently used throughout the Mac OS X user interface, as well as in Safari on Windows.

As with all humanist typefaces, these fonts allude to human handwriting in the construction of the letters, making the type as a whole more friendly and warm than something like Arial or Helvetica.

Some of the big sites like Facebook, Twitter, Last.fm, Hulu, and Techcrunch and many others are already using Lucida. And well, I too am using Lucida for this (qelix.com) website. :)

Using it on your website

Lucida Grande is a great font to use in websites, but it doesn’t come standard with Windows, so we turn to Lucida Sans Unicode and Lucida Sans to get a similar look. Unfortunately, both typefaces have imperfections that make them less-than-worthy candidates for substitution. The solution to this is to create a hybrid font set, like so:

body {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
 
strong, em, b, i, h1, h2, h3, h4, h5, h6, address {
    font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

Its assigns Lucida Sans Unicode as the base font and override the other elements (add others if you like) with Lucida Sans. This effectively combines the best of both.

Several solutions for applying a custom image to a ‘RESET’ button already exist, but there is better (and easier) way to do it I believe, without Javascript and only a few lines of CSS.

UPDATE: “text-indent” doesn’t seem to work in IE. Check the updated code below.

Button Image:
Dimensions: 62 x 22 pixels

HTML Markup:

1

<input class="reset_button" type="reset" value="" />

CSS:

1
2
3
4
5

.reset_button {background:url(../img/reset_button.gif) no-repeat; /* Define Image Path */border:0;width:62px; /* Define Image Width */
 
height:22px; /* Define Image Height */
 
}

Now, lets see it in action:

Hope it helps!