Friday Focus 02/11/11: Awesomely Animated

February 11, 2011 By Sophia Lucero

This week’s featured sites are exactly what the title says: brilliant in-browser animations. Happy Friday Focus!

Designs of the Week

Clouds and droplets and artsy illustrations everywhere. You will enjoy all the details. The slide-out header navigation is a little mystery-meat but the links in it are found elsewhere too.

Not much content yet, but the concept is striking. Apart from the bubbling background, the flipping flags also looks neat.

All the goodness of canvas, CSS3, web fonts, and SVG in one useful app. You can hit play to travel through timezones around the world or just pick at will.

I like the playfulness of what’s supposed to be a corporate website, but still quite grounded in its boxiness.

Most animations are vertical or horizontal, but this one rotates. Another playful, freeform look.

Social Media Weekly

CSS – The New Bulletproof @Font-Face Syntax
“Since the beginning of the ‘webfont revolution’ we’ve relied on somewhat hacky @font-face declarations to get webfonts loading cross-browser. Could there be a better way? One that’s clear and compatible with future browsers?”

CSS – The Shapes of CSS
“I made a page with the shapes you can make with a single HTML element and CSS.”

User Experience – Judging User Happiness
“We’ve found that our users are much better at telling us when they’re not happy with, and when we’re not doing something right, whilst the positive stuff is just silently enjoyed.”

Programming – Development for Designers
“This two-part series discusses how designers and developers can benefit from becoming more familiar with each others skills and I’ll offer some advice on how to get familiar with the “other side.””

Design – Pixel perfect vector nudging
“Most of the time I want to nudge in whole pixel increments. Here’s how you can do that, without zooming out to 100%.”

Gorgeous Headlines With @font-face And Letterpress Styles

June 2, 2010 By Lorraine

Remember when styling website headlines meant choosing between Times New Roman and Arial? How far we’ve come. Today, I want to show you a quick way to jazz up your website or blog headlines by combining @font-face with pure CSS letterpress styles.

You can use your favorite @font-face font, although for the letterpress to shine through you’ll want to stick with a boldfaced font. Go download an @font-face kit of your choice. I’m using the lovely Acknowledgement, which is big and bold and in-your-face, in my example.

This is my sample HTML:

[html]

10 Ways To Jump Over Lazy Dogs

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[/html]

Now for my stylesheet. First, I want to define my @font-face style:

[html]
@font-face {
font-family: ‘AcknowledgementMedium’;
src: url(‘Acknowledgement-webfont.eot’);
src: local(‘☺’), url(‘Acknowledgement-webfont.woff’) format(‘woff’), url(‘Acknowledgement-webfont.ttf’) format(‘truetype’), url(‘Acknowledgement-webfont.svg#webfont’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
[/html]

Basically, I’m specifying that the font-family named AcknowledgementMedium can be found in the same directory. Now, for the letterpress style:

[html]
h1.fontface {font: 40px/44px ‘AcknowledgementMedium’, Arial, sans-serif; letter-spacing: 0;color:#222;
text-shadow: 0px 2px 3px #555;}
[/html]

Here, I’m calling the AcknowledgementMedium @font-face, setting the color, and- the letterpress magic bit- the text-shadow.

Remember, the text-shadow element is defined like so (learn more about text-shadow here):

x-offset or the horizontal offset. Unnecessary for this effect.
y-offset or the vertical offset. Two pixels is all we need.
shadow blurriness
shadow color

And this is what it looks like:

You can see the live example here.

Once you have a good grasp of how text-shadow works, the possibilities are endless. Play with different shades of a color, create drop-shadows, all on a variety of fonts thanks to @font-face.

Five Fonts for @font-face

September 30, 2009 By Lorraine

I recently posted about using @font-face in your web design, and today I want to feature five very awesome fonts that are free to download and use with @font-face. The download links will allow you to download the font’s @font-face kit directly, which usually includes the font file(s), license file, and a stylesheet. Enjoy:

My Underwood

my-underwood

Good for: writer’s blogs, vintage designs, or ransom notes.
Download: My Underwood @font-face kit.

Chanticleer Roman

chanticleer-roman

Good for: formal and traditional designs, essay blogs, or invitations.
Download: Chanticleer Roman @font-face kit.

Souci Sans

souci-sans

Good for: retro styles, fancy designs, large-sized headers.
Download: Souci Sans @font-face kit.

Creampuff

creampuff

Good for: girly designs, baby announcements, retro applications.
Download: Creampuff My Underwood @font-face kit.

Andika Basic

andika-basic

Good for: modern designs, or when you’re tired of Helvetica and Arial.
Download: Andika Basic @font-face kit.

What are your favorite @font-face fonts?

Five tips for using @font-face

September 15, 2009 By Lorraine

As someone whose designs are definitely more plain than fancy, I’m usually happy to stick to font-family: Arial, Helvetica, Verdana, sans-serif; in my CSS. And the truth is that the first time I heard of font-face, I thought it referred to the free font website (which, by the way, is somewhere you can find fonts to use in your @font-face declarations).

Using @font-face is simple enough. In this example, I’ve uploaded the excellent Diavlo font to my server (in the same directory as my CSS, to keep things simple), and added the following to my stylesheet:

[code]@font-face {
font-family: “Diavlo Bold”;
src: url(Diavlo_BOLD_II_37.otf) format(“opentype”);
}[/code]

[code]p.diavlo-bold { font-family: “Diavlo Bold”, sans-serif; font-weight:bold;}[/code]

Now that’s in there, anytime I want a certain paragraph to display in the Diavlo Bold, all I need to do is:

[code]

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[/code]

and here’s the result:

font-face-html

You can see how this opens up a world of possibilities, and-especially when you’re a fontaholic like me- it really is easy to go nuts and @font-face every element on your page. But remember that with great power comes great responsibility, and keep these things in mind when using @font-face:

Check the font’s license.
You need to make sure that you’re allowed to use the font in this manner. A good place to start is this page of Fonts available for @font-face embedding, which lists fonts that specifically allow this (including the lovely Diavlo), those with an OpenFont license, and so on.

Remember that not all browsers support @font-face.
Right now, users on Firefox 3.1+, Safari 3.1+, Opera 10 and IE4+ will see your @font-face fonts. Yes, that’s a lot of users- but it’s still important to show some love to the users who can’t see your @font-face fonts, so make sure you include other nice fonts in your stack as well.

Keep loading times low.
Sure, you can put a hundred @font-face fonts on one page, but you really, really don’t want to. There are loading times for each font, so keep that in mind when you’re planning your style designs. This brings us to my next tip…

Look locally first.
If the user browsing your site already has the font on his or her computer, why bother finding it and loading it online? That’s why it’s always a good idea to have @font-face look for the font locally first. My example above, for instance, would become:

[code]@font-face {
font-family: “Diavlo Bold”;
src: local(“Diavlo Bold”), url(Diavlo_BOLD_II_37.otf) format(“opentype”);
}[/code]

IE uses another format.

Not to knock IE, but of course it does. Whereas you’ll do fine with TrueType (ttf) and OpenType (otf) fonts in all the other browsers, IE only supports eot (Embedded OpenType) fonts. To be truly cross-browser compatible, then, we need to add another line to our example (see line marked “Hello, IE”):

[code]@font-face {
font-family: “Diavlo Bold”;
src: url(DiavloEOT.eot); /* Hello, IE */
src: local(“Diavlo Bold”), url(Diavlo_BOLD_II_37.otf) format(“opentype”);
}[/code]

Because my chosen font is in OpenType format, though, I need to convert it to eot before IE will see it. First, I use a free online font converter to turn my otf to a ttf- then I use Microsoft’s free WEFT tool to convert the ttf to eot.

Do you use @font-face?