by Jasper Goodall | via Buamai

8 March byIunewind

Black Wood by Jordan Metcalf

Bolda Display by Morten Iveland

CMYK Lovers by Arbol Charyou

CrowdSourcing by Pablo Alfieri

Elevator Dubois meets Fugger by Darrin Umboh

Cups by Boey on Fubiz

Garamond III by Leonard Clagett


Since I saw her pictures she became my favourite photographer. The 16 yo Jacqueline Rivera has obviously a great talent. via BenTrovato

by Adolfo Correa

by El_Silencio photostream

Radical Element by Dr4oz

Try-Type by Til01

Wash Your Hands by BK1ll3er

Waste Not. Want Not. by Mike Campau

What Will You Defend? by kolOut

Caroline and Micah met at the Otis College of Art and Design in Los Angeles where they graduated after working together
on Thegoodsideof.us, their senior thesis and an online community where people can share stories of their good deeds.
Using their creativity to make the world a better place one site at a time is an attitude that they kept and earlier this
year they founded A Good Company, their design studio which brought us The League Of Moveable Type.

DB: Let’s talk about The League of Moveable Type. Please, introduce this project yourself.

Caroline: The League started when we saw this thread on Typophile calling type designers for an open-source font project. We saw the negative reaction that it got from a lot of people, and thought that we ought to do something about it. We thought that it was a great idea, especially with the possibilities of what we can do with @font-face, it seems like too good of an idea to just let die. We also realized that there are a lot of free fonts out there, but more than just giving away free stuff, being designers (and most of our work involve the web) we wanted to raise the standard of typography and design on the web. So we came up with the idea for an open-source type foundry, where we focus on quality not quantity, so we can provide people with hand-picked quality fonts.

Micah: It’s funny, it kind of started as a dare. Everyone was saying “that’ll never work,” and “what a dumb idea,” and the rebel in me was just shouting, “Oh yeah?!” So we came up with this idea, it exploded, and now we’re trying to push even further.

DB: Why you chose to support the distribution of open-source fonts on the web? Is there a phylosophy about the future of the web behind that?

Caroline: Well, you see, we’re communists. No, just kidding.
The reason we support the idea of open-source fonts, is not so much because it’s free, I mean, yes, we like free stuff, as much as the next guy, but we also like the idea of groups of people, from different backgrounds, all over the world, working together, not for monetary incentives, but for the common goal of making something work better than the way it does now. It’s already happening with software, and we want to do the same with typography and design.

Micah: That sounds pretty Communist to me. I love it. That’s what the internet was founded on, and I think that’s the way of the future. People are making money on the internet right now, for sure, but I think it’s just a phase. Eventually it won’t really matter.

DB: was it difficult to launch the site and find other type designers that wanted to join you?

Caroline: in terms of finding people to join us, well, we’ve gotten a ton of support from people who appreciate what we’re trying to do, and that’s been really encouraging for us to work harder on The League, and make it better.

But finding type designers who are willing to give away their typefaces for free, is rather difficult, especially when their livelihood’s dependent on selling typefaces. But we’re also lucky that some designers are actually quite generous with sharing their typefaces, we’re talking about our wonderful contributors, of course.

We’re super grateful that they’re willing to share their work with everyone, and we’re always on the look out for more designers who are willing to share their work or help us expand/finish/improve the fonts we currently have, because I believe that’s the way The League can sustain itself, if people come together and contribute to the open-source movement in some way.

DB: are you making some plans to expand this project in the future?

Micah: I think the biggest issue we want to face with our future plans is how to turn all the people who love typography but don’t consider themselves typographers, into typographers. If everyone who wants to help works together somehow, we can completely flip both the internet’s design community and the professional typography industry on their flippin’ heads.
We’re still very much brainstorming, so we’re trying to collect great ideas from anyone enthusiastic about the topic, and I cannot count the number of hours that Caroline & I have gone back and forth discussing crazy ideas of things we hope to do with this.

DB: how you think Moveable Type could help designers, why they should choose it?

Caroline: I think The League is useful not just for designers but for everyone on the web community. As a part of this open-source movement, designers, typographers, programmers, we can work together to improve typography on the web and elsewhere.

One of the things that I feel strongly about The League is that we want to offer more than just a site for free fonts. Yes, the typefaces are there for the taking, but free fonts is a finite resource, what we need is co-investments, we need people to also give something back and take away something other than free fonts, something like knowledge or collaboration between peers to make something awesome.

DB: what do you think about the .openfont idea by Tal Leming & Erik van Blokland? And about Typekit renting licences?

Caroline: I’ve been following the webfont discussion, and my personal take on it is this: type foundries, type designers, and entrepreneurs can use whichever solution they find most suitable for them, as long as it doesn’t mean getting rid of @font-face and forcing everyone to comply to one standard of webfont.

People should have choices. Leaving the playing field open will allow people like us (the type users) to come up with our own solutions. Companies and type foundries will continue to come up with different ways to deliver fonts on the web, from Typekit, to .webfont, to Fontdeck, as Johno of ILT says,

we’re all “just hacking away to find a solution that satisfies our demands until a workable standard… is eventually approved and we can all hold hands and sing songs.”

That’s fine with me, and there’s no reason why the open-source type movement should not jump at this chance and be just as active as those guys in finding a solution. I see this as a chance for the open-source community to work together and carve it’s own niche in the world of web typography. There are tons of excellent type foundries out there with high quality typefaces, there’s no reason why the same can’t be true for open-source type, I believe that one day “free” fonts (free in terms of freedom, not just price) will be as legit as typefaces released by a type foundry, it’s just a matter of time, and we’re just trying to do our part in it.

Micah: I have to say, Caroline’s much more open minded about it than I am. It didn’t occur to me until a week or two into the debates that it’d be okay as long as there was choice. It really seems to me that the big type foundries want to follow Microsoft or Columbia Records’ footsteps. They seem intent on DRM, which, in my opinion, hurts the users. I was in quite a tizzy about it all, truthfully. But I guess I’ll put aside my steam as long as The League is still able to do its thing. Cuz we’re gonna knock their socks off.

DB: is there a CSS3 property you are looking forward to be fully adopted? apart from @font-face

Micah: It’s just getting there, but I can’t wait till we use columns all the time. My personal blog uses columns, and frankly, it’s awesome.

DB: do you have any upcoming project you want us to know about?

Micah: Why, yes, in fact, we do! We’re playing around with this sweet new idea. Lettercase, we’re calling it, and it’s a social font manager. It’s in the earliest stages a project can possibly be in, but we think it could be intensely powerful, and while most of the details are still hush-hush, you should keep an eye on http://www.lettercaseapp.com

DB: last question, more of my interest then the audience: what music do you listen to while designing?

Caroline: I listen to all kinds of random stuff, you can see some of them here: http://blip.fm/chadilaksono

Micah: Dogs whining, to the rhythm of Bach’s Concerto in D Minor. Or Noah and the Whale, depending on my mood.

foto: © Lars Williem Veldkampf (photostream)

Introduction to webfonts:

When it comes to web design typography is a problematic subject. Since always designers have been limited to use those so called web-safe fonts.
When specifying typefaces in font-family property within a stylesheet you tell the browser to use that font to render the html text the property refers. As different OS have different standardly installed fonts we, as designers, were forced to use those more common and known to be available to the majority of visitors (remember that the browser seek for the font on the local machine of the visitor).
That’s also why we write stacks of fonts and not only one: we try to ensure that if a font is not available on that machine then the next one will be loaded.

This article by David Rodriguez better explains in detail the situation about web-safe fonts and its practice. If you want to improve your font stacks and try new solutions still inside the boundries of web-safe fonts I suggest you download the pdf over at Unit Interactive, it has become my reference since I read it.

Of course you may argue that you have seen on many websites different fonts then the usual verdana or georgia (just to cite a couple). That’s because there are some existing techniques like sIFR3, cufòn and image replacement to use not common fonts, but they all imply the use of flash or javascript or images with many disadvantages and they are therefore used only for headings generally.

i. alternatives

Today something is apparently changing things and all typophiles around the globe are shacking for the excitement (too much?).
I’m talking about @font-face, the new CSS rule that allows to embed fonts on your site.
I’ll give you a tutorial about how to use it effectively in a while, but first let’s see what is the situation at the moment in regard to the availability of fonts.

ii. webfonts proposals

ILoveTypography has a nice complete article about the subject which I’ll summarize here.
Microsoft in 1997 devoleped its proprietary Embeddable Open Type (.eot) format which was then supported from IE 4. They submitted the proposal at the W3C but was rejected mainly for security reasons.

Now Tal Leming and Erik Van Blokland proposes a new format, .webfont, which would consist of two files: a raw file of the font (i.e. ttf or otf) and a info.xml file wich contains the permissions about that site using that font. The browser read it and decides if it’s ok to load it or not.
You can read at ChezPorchez more in detail about how that works.

David Berlow of Font Bureau proposes instead permission tables for Opentype inserting permission infos inside the font file (so you get only one file) already embeddable by @font-face because it’s still a .otf.
One critic about these solutions is that we could edit the xml file to add permissions without owning a license.
Meanwhile Ascender has been working to evolve the EOT format of microsoft in a more friendly to use EOT Lite.

In latest news, the efforts of Leming & Blokland have joined those of Jonathan Kew (Mozilla Corporation) to give birth to the WOFF format, a unique compressed font file which contains meta-datas and private-use data. Here’s a quotation from the official document

The WOFF format is directly based on the table-based sfnt structure used in TrueType[1], OpenType[2] and Open Font Format[3] fonts, which are collectively referred to as sfnt-based fonts. A WOFF font file is simply a repackaged version of a sfnt-based font in compressed form. The format also allows font metadata and private-use data to be included separately from the font data. WOFF encoding tools convert an existing sfnt-based font into a WOFF formatted file, and user agents restore the original sfnt-based font data for use with a webpage.

Apparentely tools for the conversions of files are yet to be created, but that’s a step further towards a solution. The official document is here.

However the problem is that all of these solution must be accepted by W3C to be adopted in the future, but W3C will start working only on a proposal that is supported by the majority ot typefoundries and there’s not an actual type industry — commonly represented at least — so the decisions are always pretty indivualistic and this slow things down. Then of course we should wait that browsers support it.

iii. distributors solutions

Someone is already supporting @font-face rule by selling licensed fonts enabled to be embedded.
One is Typekit, which rents the font instead of selling completly the license.
You chose on which domain you’ll use it and then you’ll pay per domain monthly. In exchange you get a javascript code which embeds the font hosted on a third party server.
Typoteque is doing something very similar, selling licenses (not monthly but per domain as it seems) and hosting on a cloud the font. You’ll get instead of javascript a css code to add on your site. They also explain that when you pick the font you also need to select the language. This helps them eliminate the characters you won’t need and serving you a much shrinked file for fast loads.

Andy Clark over at For a Beautiful Web complains that typekit is a nice solution bu it lefts a problem for us designers: if we have a license that allow us to only embed a file on a site and we don’t own the font, how can we use it offline to show projects to our clients?
Actually he doesn’t care too much because he is also pushing his collegues to start working within the browsers which would also solve this problem.

Then of course there are some openfonts to use, free typefaces in some cases created as opensource projects or simply offered with free embeddable licenses.
On Webfont.info and Font Squirrel you can find some great list of available fonts for embedding. In particular on this site I use a couple of fonts hosted by The League Of Moveable Type and Cape Arcona, you can see which in my about page.
Jos Buivenga also offers a nice selection of fonts.

Can I use every font I want? No, you are obviously limited by End User Licensing Agreement (EULA) therefore choose carefully which fonts you use.
For instance you can’t upload online a font among those that came with your OS because they are generally licensed strictly for a use within desktop applications. By uploading them you would violate the license and also expose that font to be downloaded by anyone as it’s on a web server. Always choose fonts you know that are specifically licensed for embedding.
Always read carefully the EULA of the font you bought or found online, because even when you pay you’re not really owning the font but only a license to use it. On Font Feed they explain very well how to read an EULA with the exemple of the new version used at Fontfont.
If you find a font which is free and you are not sure about you can write a comment in your stylesheet near the @font-face rule asking for permission, as it is suggested on Hack.Mozilla.

@FONT-FACE: HOW TO USE IT

If you read the first part of the article you could think that everything is still very messy and we won’t use this method any time soon yet.
No, infact everything is ready and you can finally enjoy the new @font-face rule to style your body copy.
There are some limitations about the availability of fonts, but we already have a vast variety at our disposal, and many last generation browsers support it (Opera 10, firefox 3.5, IE since 4, webkit-based/safari 3.1.) You can find a detailed list at webfont.info

So, here it is how @font-face works: it’s a rule for your stylesheet that allows you to link to a font (a .ttf .otf .eot file) the same way you now link to codes and images. Your font file is hosted on a web server and @font-face load it from there to render your html text where you specify it.

/* Graublau Sans Web (www.fonts.info) */
 
@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}
 
body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif; 
}

It has 3 declarations:
font-family: which is the referral to later use in your font stacks. It’s arbitrial, you can freely choose how to name it as long as you use the same name in the font-family property for the styled elements.
src: this is where you insert the path to the font hosted on your web server.
if you think the font could be already installed on visitors machine you can then use local(fontname) and maybe list some alternatives as well as the path to an hosted file.
format: let’s you specify which kind of file you are using (.ttf or .otf).
font-style: the standard value is normal but you can use this to chose between italics and bold. Actually if the font support it you can specify up to 9 weights.

If you need to know the exact name of the file to write a perfect path on Mac OSX and Linux you can simply click “font info” among the file’s options, on Windows instead you’ll need the font proprietary extention. However generally the name of the font is given by the family and the style (i.e. “helvetiva bold”).

To recap: Look a this exemple from HackMozilla

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), 
       local("HelveticaNeue-Bold"), 
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
 
body { font-family: MyHelvetica, sans-serif; }

You see that each @font-face rule has the 3 declarations. With font-family they assign a name to the font, with src they grant more then one place to find that font locally on the visitor machine or on the webserver, with format they specify that is a TrueType file or an OpenType.
Then they style the element “body” normally with the property font-family and they put in the font stack also the name we chose before, so the browser will recognize it and refer to what’s in the @font-face rule to load it.

ii. helping IE

IE, as usual, has its own rules. This time we have to admit they came first with their proprietary format Embeddable Open Type (.eot) and they support @font-face since IE4. Unfortunately that situation didn’t evolved much since then and they are the only to use that (.eot). Plus, IE doesn’t recognize the descriptor “format” and will ignore any @font-face rule containing that hint.

This means that to ensure crossbrowser compatibility you’ll have always to add a @font-face rule specifically for IE on top of the others, linking to a eot file and avoiding the format descriptor.

/* Font definition for Internet Explorer */
/*         (*must* be first)             */

@font-face {
  font-family: chunkie;
  src: url(type/Chunk/CHUNKFI0.eot) /* can't use format() */;
}

And where do you think you’ll find the eot files? nowhere, smile! you need to convert your ttf files with the Microsoft WEFT tool (I’ll explain you how shortly). This tool is only available on Windows, but here you can find the GPL opensource equivalent for other OS.
However this two tools help you convert only .ttf files in .eot, but what about Opentype .otf? you’ll need to follow the instruction of J.Malcolm in this comment.

As I mentioned a few lines above, let’s see how to use WEFT to convert .ttf files into .eot
Jon Tangerine explains here his way, probably the best.

iii. Optimizing for IE

Allright, you would have all the element to use @font-face successfully, but you would still need to use 2 selectors to support IE and this is not that beautiful. Moreover, even if you’re not so concerned by your code’s beauty, you may be about your performances.
Andrea Giammarchi early this week noticed that when IE read your @font-face selectors tries to load also the .ttf files simply getting a 404. You won’t notice this unless you check your server log but it’s still useless work for the server. Paul Irish comes on his white horse to save us with a simple solution: in one selector you can list first the src to the eot file for IE and then a local src which makes IE ignore the subsequent src to a ttf file for any other browser. simple, slick, beautiful. You can read about the whole testing process on Scott Kimler’s blog.
Here instead an exemple of the working code taken from Giammarchi’s page:

@font-face {
    // define the font name to use later as font-family
    font-family: "uni05_53";
    // define the font for IE which totally ignores local() directive
    src: url(../font/uni05/uni05_53.eot);
    // use local to let IE jump this line and
    // redefine the src for this font in order to let
    // other clever browser download *only* this font rather than 2
    src: local("uni05_53"), url(../font/uni05/uni05_53.ttf) format("truetype");
}

Conclusions:

That’s it, we have seen what was the situation of typography in web design until yesterday, what are the proposals for tomorrow and how to use @font-face today.
You have all the tools you need and even if it looks tricky reading such a long article I can assure you that it’s very simple.
So it’s time for you to contribute to a better Web with beautiful typefaces!

If something is not clear feel free to ask me anything in the comments or have a look at the resources I listed below under “Get to know more”.

Warning: it may take a while to load due to the ammount of images.
it’s worthed, though.

If I hever pubblish an EP I want my disc to be like this.
via Design Boom

Infographic poster by italian students of Politecnico di Milano together with Density Design.
Flickr Author Gallery | DensityDesign

Infographic poster by DesigningTheNews where Dave experiments on data visualization.
Designing The News

Cool collection of photos with colorful reflections.
Original Picture | via 10steps

Interesting set of picture by Romain Laurent.
Romain Laurent | via My Modern Met

Lovely fashion photography by Chris Searl.
Chris Searl | via BenTrovato

Incredible paintings by swedish artist Linnea Strid. Extremely evocative and realist.
Linnea Strid on Flickr | via Evasion

Neill Cameron has launched a fun game on his blog: for every letter of the alphabet he’ll draw an illustration with a comic’s character doing something funny. The only rule is that everything must have that initial. And the visitors picks the theme!
Neill Cameron | via Diskursdisko

FormFiftyFive is an amazing blog I found and sadly a bit late because it seems to have been around for quite a long time. I love the design and it’s also a great source of inspiration and news.
FormFiftyFive

Kleber Studio is one of the big names in the game and they just restyled their website. Interesting concept, check it!
Kleber

This is part of an identity work Jens Nilsson, a Swedish designer, did for a coffee shop in Stockholm. I love the smart game with the “o” and its simplicity. Afterall Leonardo used to say that Simplicity is the ultimate sophistication.
Dancemade

Richard Hogg is a very talented illustrator and I love his work. On Creative Review there’s also an interview with him for his latest solo show. Make sure to check both links.
Richard Hogg | CreativeReview interview

Wooooo is a magazine but looks like a book. that’s already cool for me. It features articles and interviews to many interesting people as well.
Wooooo Magazine | via CreativeReview

Ali Agur has pubblished a small booklet with all the flyers he created from ‘88 to ‘03 for Plastic People, a club in London. I usually like flyers when they’re creative and I think for an artist to recap a period of his life and his work in a book is a great satisfaction.
Ali Agur | via Creative Review

StatKey | via CoolHunting

Bad ass, right? Designed for those free spirit costrained in a city.
Mac Motorcycles

Not sure of how much is useful but it’s a very stylish solution to store all your magazines lost around the house.
Malafor | via Design Boom

Incredible complex of buildings in Beijing linked together. A project by Steven Hall’ studio.
Personally I would like to see even more of this interesting buildings in our city.
Steven Hall | via Design Boom