Want to get away from ‘Web Safe’ fonts for some attractive headers AND do it without using an image? Use CSS 3 and embed a font-face! @font-face is not strictly speaking ‘CSS3′; it was originally born in CSS 2 and although not appearing in CSS 2.1, CSS 3 is attempting to bring it into the standards.

In order to use a font, we first must call it using the ‘@font-face’ attribute and this must be done for each individual font we wish to use. Although I’m sure you have a few, you can download some fonts to experiment with here, at dafont.com.

In order to embed a font for use in CSS, you need to use the @font-face CSS.

Each @font-face font kit come with:

• TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
• EOT fonts for Internet Explorer 4+
• WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
• SVG fonts for iPad and iPhone
• Cufón fonts in case you want them
• Demo.html and stylesheet.css so you can get going fast

NOTE: If you download a @font-face kit from this page, you will get the MacRoman subset. If you would like a different subset, click the “View Font” link and choose the @font-face kit there. You will have a lot more options.

A good website to get prepackaged fonts for @font-face use is www.fontsquirrel.com/fontface.  You can also download fonts from dafont.com and use converter in order to turn true type fonts into open type fonts.

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

1. Instant Karma

2. Elsa Kawai Jewelery

3. Doritos

4. Temprana

5. Savannah Soap Kitchen

6. Feel It

7. Prism Eyewear

8. Sony Ericsson

9. Penta Earbudz

10. Six Feet Under DVD Set

This post is part of our new weekly series of posts showing the most inspiring images selected by some of the Designer’s Digest’s writers and users. If you want to participate and share your graphic design inspiration, just send us, via email, the image with the link from where you found it, also use “WeeklyInspiration” in the subject, and don’t forget to send your Designer’s Digest username; or via Twitter sending to http://twitter.com/designer_digest

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

If you would like to take a look at a demo or download the sources feel free to grab them below or at the end of this post. You may be surprised to know that there’s been quite a substantial body of work that has gone into bringing the CoverFlow effect to the web over the past few years. -addyosmani .com

For the demo and download source, please visit the original site. Addy Osmani

Note: As HTML5 is not fully supported by certain web browser like Internet Explorer, you’re strongly recommended to use Firefox browser to view all HTML5 demos below.

#1 Audioburst Animation

#2 Ball Pool

#3 Blob Sallad

#4 Bomomo

#5 Browser Ball

#6 Canvas Cartoon Animation

#7 Flickr PS3 Slideshow

#8 Mesmerizer

#9 Nebula Cloud

#10 Video Destruction

#1 Hair Brushes III

#2 Blood Brushes III

#3 HighTech Circles

#4 Life Brushes

#5  100×100 icons 2 brush set

#6 Doodle Brushes

#7 Ecology Icon Set 3

#8  Seamless Vectors – Paisley

#9 Free Retro T-Shirt Vector Design

#10 Vector abstract illustration

#1 Akzidenz Grotesk

Akzidenz Grotesk, the first ever sans-serif typeface to be widely used, was originally released in 1898, by the H. Berthold AG type foundry. At first glance, it can sometimes be mistaken for the Helvetica or Univers typefaces.

#2 Avenir

The name Avenir is French for “future,” and takes inspiration from early geometric sans-serif typefaces Erbar (1922) designed by Jakob Erbar, and Futura (1927) designed by Paul Renner. Frutiger intended Avenir to be a more organic, humanist interpretation of these highly geometric types. While similarities can be seen with Futura, the two-story lowercase a is more like Erbar, and also recalls Frutiger’s earlier namesake typeface Frutiger.

#3 Bodoni

is a series of serif typefaces first designed by Giambattista Bodoni (1740–1813) in 1798. The typeface is classified as Didone modern. Bodoni followed the ideas of John Baskerville, as found in the printing type Baskerville, that of increased stroke contrast and a more vertical, slightly condensed, upper case, but taking them to a more extreme conclusion. Bodoni had a long career and his designs evolved and differed, ending with a typeface of narrower underlying structure with flat, unbracketed serifs, extreme contrast between thick and thin strokes, and an overall geometric construction.

#4 Caslon

Caslon shares the irregularity characteristic of Dutch Baroque types. It is characterized by short ascenders and descenders, bracketed serifs, moderately-high contrast, robust texture, and moderate modulation of stroke. The A has a concave hollow at the apex, the G is without a spur. Caslon’s italics have a rhythmic calligraphic stoke. Characters A, V, and W have an acute slant. The lowercase italic p, q, v, w, and z all have a suggestion of a swash

#5 Clarendon

is an English slab-serif typeface that was created in England by Robert Besley for the Fann Street Foundry in 1845.^[1] Due to its popularity, Besley registered the typeface under Britain’s Ornamental Designs Act of 1842. The patent expired three years later, and other foundries were quick to copy it.^[2] Clarendon is considered the first registered typeface, with the original matrices and punches remaining at Stephenson Blake and later residing at the Type Museum, London. They were marketed by Stephenson Blake as Consort, though some additional weights (a bold and italics) were cut in the 1950s.

#6 Franklin Gothic

Franklin Gothic is an extra-bold sans-serif type which can be distinguished from other sans serif typefaces, as it has a more traditional double-story g and a. Other main distinguishing characteristics are the tail of the Q and the ear of the g. The tail of the Q curls down from the bottom center of the letterform in the book weight and shifts slightly to the right in the bolder fonts.

#7 Futura

Futura was designed in 1927 by Paul Renner. Although Renner was not associated with the Bauhaus movement, he shared many of its structural elements, and believed that a modern typeface should express modern models, rather than be a revival of a previous design.

#8 Gill Sans

Gill Sans was designed by Eric Gill in 1927-30. Gill was a well established sculptor, graphic artist and type designer, and the Gill Sans typeface takes inspiration from Edward Johnston’s ‘Johnston’ typeface, used for the London Underground, which Gill had worked on whilst apprenticed to Johnston.

#9 Helvetica

Helvetica was created by Miedinger with Eduard Hoffmann at the Haas’sche Schriftgiesserei (Haas type foundry) of Münchenstein, Switzerland. Haas set out to design a new sans-serif typeface that could compete with Akzidenz Grotesk in the Swiss market. Originally called Neue Haas Grotesk, the typeface’s name was changed by Haas’ German parent company, Stempel, in 1960, to Helvetica — derived from Confederatio Helvetica, the Latin name for Switzerland — in order to make it more marketable internationally.

#10 Univers

Univers is the name of the typeface designed by Adrian Frutiger in 1956. Both Univers and Helvetica, which are sometimes confused, take inspiration from the 1896 typeface Akzidenz Grotesk (listed above). These typefaces figure prominently in the Swiss style of graphic design. ARTICLE IDEA BY DAVID AIRELY

This post is part of our new weekly series of posts showing the most inspiring images selected by some of the Designer’s Digest’s writers and users. If you want to participate and share your graphic design inspiration, just send us, via email, the image with the link from where you found it, also use “WeeklyInspiration” in the subject, and don’t forget to send your Designer’s Digest username; or via Twitter sending to http://twitter.com/designer_digest

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10