web fonts – Page 2

Friday Focus 03/19/10: Left-Aligned

March 19, 2010 By Sophia Lucero

Here’s an old-school pattern that hasn’t gone the way of the dodo: left-aligned designs. Symmetry is great, but asymmetry? Even better. Welcome to this week’s Friday Focus!

Designs of the Week

Going left-aligned isn’t just about “being different”, sometimes the design really calls for it, like this one does. It also has a fixed area—those two seem to go hand in hand for a lot of sites, don’t they?

Utterly simple formula (photographic background + minimal graphics) but it works!

This one’s the polar opposite of the previous design: a calmer look, Flash for the photographic background transitions, and custom fonts.

Do your users hate long-scrolling pages? Make people love ’em—this site makes it easy with the up/down arrows. I also like that the heading backgrounds match the portfolio color schemes.

Not shown, but I like the treatment of the posts in the lower half. Another example of matching by color (and by icons), and also breaking the boxiness away.

I love elegant, subtle designs. Interesting portfolio technique: display nothing but a full-size screenshot of your work for each client page. That way people experience the designs as close to the real thing as possible. Lightboxes and other solutions usually resize down.

Social Media Weekly

Design – Free Icon Search Engine – FindIcons.com

CSS – CSS Font Shorthand Property Cheat Sheet
“I’ve prepared a printable cheat sheet that you can download and hang next to your computer, which will come in handy in case you decide to use this property yourself, or are forced use it in a stylesheet from an inherited project.”

CSS – The Right Frame of Mind: Applying the Lessons of CSS Frameworks
“The purpose of this article isn’t to debate whether or not you should use a framework, but to examine why the need for such solutions exists. We’ll take the processes used (and lessons learned) in their creation, and try to show how they can be applied to your own style sheets.”

HTML – HTML5 structure—div, section & article
“These elements are replacements for the common ad-hoc semantics we applied before HTML5 with @class and @id, for example <div class="sidebar"> or <div class="nav">.”

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?

Friday Focus 07/24/09: For the Birds

July 24, 2009 By Sophia Lucero

This week’s Friday Focus features designs with pretty little birds in them. (No, this isn’t another collection of Twitter-related sites—only two of them are.)

Designs of the Week

Illustrations are inspired by origami and papercraft, animations are done purely in JavaScript. Pleasant and brilliant.

I love the mobile motif here—everything is hanging onto something until the very end of the page. Great concept for an online shop.

I like the illustration style here because it’s more cartoony instead of delicate and craft-y. And it seems dotted and dashed lines are all the rage these days.

I like it when sites go all out on a metaphorical design. This one has the content floating on ice!

Two things about this site mask how simple it looks. First, the hawk looks stunning—big, bright pink, and detailed. Second, the illustrations (aka Twitter backgrounds) listed on the site speak for themselves—if you’re designing a portfolio, do the same thing.

Some of you might have to squint to see the birds, but I appreciate the subtlety while still paying attention to detail—you can play hangman (or is it hangbird?) on the site! They’re all over the place, though, so you will enjoy their company.