YouTube — Lost polar bear plays Life And Death on accordion.

YouTube — Arrested Development Tribute.

It’s beautiful.

L&S and the SD Dept. of Public Safety put together this chilling PSA against texting while driving. Knowing the ending doesn’t take away from the impact of the video. Work like me this makes me very proud to call Lawrence & Schiller my employer.

via Walt Disney’s 25 million reasons to re-release Snow White.

Q: What’s black and white and red all over?
A: The newspaper

Q: What’s worse than finding a worm in your apple?
A: Finding half a worm.

Someday I’ll explain the whole story behind both.

Hint: refer back to the title.

I Want My Fancy Headings!

Let’s face facts — I’m sick of Verdana. It’s no fault of Verdana’s (though she’s always been a little large for my taste), it’s just that I’m more than ready to see other typefaces. I’ve dated Arial; I’ve flirted with Times New Roman. I had a passionate affair with Georgia that I’ve never admitted publicly. Yet, for all my years on the market, I’ve never found the one.

Sure, body copy might have to rely on the old tried-and-trues, but what about our headers? Why can’t the most important parts of our HTML shine? We put all this work into designing the perfect section headlines, which inevitably get relegated to background images or substitutes. It’s not fair. Our websites deserve to be living, breathing documents, not simply static representations of their inception. “Welcome to Our Website” might be a perfect heading for go-live day, but does it still hold up six months later? If it doesn’t, you have to find those initial design documents, create an alternate image, upload it to the live site, and make any CSS tweaks necessary.

Then I learned a startling fact; Internet Explorer has supported embeddable fonts since IE4. What? Seriously?? For whatever reason, I had assumed that embeddable fonts were a recent invention, with IE lagging behind as usual. In fact, it was almost the opposite, with the modern browsers only recently adopting their own @font-face implementations nearly a decade after Microsoft. You know what that means? We can quit stallin’ and get implementin’.

Baby Steps

My first adventures into this realm were through Flash-based replacement services, usually called sIFR. The way it worked was that you would provide a font to a Flash script, which would get dropped into your HTML via Javascript. This meant that every place you wanted to use this fancy font (every headline, for instance) was now a little Flash movie. Wow. The issue I had with this technique is that I don’t use Flash much. This means that if the Flash file wouldn’t work for some reason, I’d be fairly powerless to correct or debug it. NEXT.

I tried Cufón, and I really liked the concept and technology behind it. Cufón is a Javascript-based solution, and it has two parts: first you generate your font, then you embed it on your webpage. You upload a font to the Cufón website, which gets converted to JSON. Essentially, your font file gets turned into instructions for drawing that font. How cool is that? The Cufón converter turns your font file into a Javascript file that you include into your document like any other Javascript. Then the Cufón Javascript renders your font as VML (for IE) or canvas (for everyone else), doing a similar find and replace as sIFR above. Despite how much I loved the creativity behind this solution (and the beautiful way it displayed), it seemed only marginally better than the Flash technique. NEXT.

Toddler Steps

Enter the commercially-viable solutions. There seems to have been a mini ‘splosion of these services in recent months. They seek to provide two benefits: a better way to include fonts into your website and a mutually beneficial way to license fonts for web usage.

Typekit was my first venture into this space mostly due to mutual timing. Typekit was getting some buzz while I was getting really interested in this new technology. I got in during some of the beta testing (score!), and I immediately started playing with the service. You pick a plan, you pick your fonts, you drop some Javascript into your website, and you enjoy. The Typekit system allows you to manage your various websites from one fancy kit editor. You could also set all your CSS rules from said kit editor.

Typekit has a decent selection of fonts. You can browse the entire library, or simply the fonts from your plan. If you browse the whole library, and you’re logged in, you can see which fonts you need to upgrade to get. Typekit also does a great job of categorizing their fonts, making them easily browsed. Want a sans-serif font that is “clean” and “fun”? Try Sovba. Typekit is also one of the few Javascript-based solutions; the others that I’ve found mostly use a custom CSS method.

What I love about Typekit is the people behind it, the technology behind it, and the ease of use. Of all the font services, this one feels like it has the most legs. I think foundries are going to really like having their fonts hidden behind the Typekit servers, web designers are going to really like the ease with which they can browse and choose their fonts, and web developers are going to really like how easy it is to drop into HTML. The pricing feels reasonable, and they’ve worked really hard to build a reliable platform that answers a lot of concerns on all sides of the table. Still, I wasn’t satisfied with stopping there.

Typotheque, like Typekit, offers a library for you to choose from. Unlike Typekit, you license your fonts individually. When you purchase your font, you can add on a license for web embedding that font. Once you complete the transaction, you get CSS to drop into your page for that font. Ascender Fonts has taken a similar approach in pricing. After browsing their Web Font library, you can purchase the font as a web license. You can then add fonts to resources and resources to websites (don’t ask me how that all works). What’s clear is that Ascender is trying to offer users some ability to easily manage their web fonts, which can go a long way toward adoption. Also in this ring is FontSpring. FontSpring’s solution seems to be much like the other two; purchase a font with their special license, and they’ll give you some tools for dropping that CSS into your web page. Fontspring, while it offers similar embed licenses to the services above, doesn’t host the files for you. Upon purchase, you get the freedom of including the font files on your server, using the @font-face declaration of your choice. Their web license does include a number of restrictions, so be sure to read it thoroughly to see what your options are. What’s nice about all these services is they offer free trials. What isn’t nice is that you license the fonts individually. This practice differs from what print designers have enjoyed, where purchasing a font meant having it for as many publications as you needed. On the web, you’re merely renting the ability to display that font for a period of time. That can be a hard budget item to swallow.

There’s a strange in-between service here called TypeFront. TypeFront, rather than being a foundry or library service, is a web font distribution system. You upload your font (assuming you have a web license for it), you add domain names that can use that font, and then you drop their CSS into your website. You aren’t stuck paying for individual fonts, but you don’t have the library of options, either. This solution is perhaps best for the web developer who has the fonts but doesn’t want to deal with hosting or embedding them. However, I think that’s a small cross-section of developers.

Teenage Steps

The only thing better than paying someone to do the work for you is to get the same product for free. Kernest is a service much like the CSS-based foundry sites above except that it offers a wide range of free fonts as well. You add domain names, which simply allows the system to create customized CSS for that domain. The most severely limiting factor for Kernest is the lack of selection. It’s nice that most of the fonts are free, but the trick will be in acquiring interesting-enough fonts to bring people back. I, for one, will not be going back.

This begs the question, why use a service at all? This stuff isn’t rocket science. Can’t one reasonably find the tools and syntax (1,2,3) to put together a cross-browser font statement? Well, yes, you can. You could browse the list of fonts available for @font-face embedding on Webfonts.info. Then you could browse any number of web design websites for snippets and tips and tricks. Just drop the font onto your webserver, add the appropriate rules, and style up your headlines. It’s that easy.

Adult Steps

That brings us to my favorite service so far. It’s a website called Font Squirrel. Font Squirrel offers the do-it-yourselfers a little leg up. You can use their system one of two ways. The first way is to browse their site for the font of your dreams. Font Squirrel has partnered with an impressive list of foundries to offer a decent list of fonts. I wish it was the other way around, but I’ve got time on my side.

Every font is “100% free for commercial use”, so boasts the Font Squirrel logo. The fonts can be filtered by style or technology, as well as by foundry. When viewing a particular font, you have the standard specimen, character map, and type your message options to help make your decision. When you’re ready to use the font, you can download the font file itself or an @font-face kit which includes fonts, demo page, and stylesheet to make including that font on your website a breeze (like I’ve done here).

The second option that Font Squirrel offers is its @font-face Generator, a tool that makes creating cross-browser @font-face rules easy and pain-free. You give the system your font, and it gives you a series of options. When you’re done, you download an @font-face kit just like you would above. This tool worked like a charm for me, and it produced the font I gave it in all formats necessary for the browsers we test in.

This combination of browsing a library of fonts and generating your own specific font kit give Font Squirrel a one-two punch. If the font list keeps improving, Font Squirrel could be a heavy rival in the web font game, even up against the commercial services which might seem more legitimate. Free certainly doesn’t hurt, but I’m willing to bet that they will adopt a pay model before too long, with access to more popular fonts.

Next Steps

I don’t think there’s been a clear winner in this web font arena. Font formats are still getting a healthy debate, let alone how to serve them up and embed them onto web pages. However, I think what will help give this movement steam is usage and adoption. Foundries need to know that it’s safe to invest in services like those above. Those same services need to know that developers and designers will use their technology and pay reasonably for it. Lastly, and most importantly, web developers and designers need to know that there are good, high-quality fonts out there for web embedding.

Web designers, please seek out a web embeddable library of fonts for consideration in your next project. Talk with your developers about what technologies they have used and are comfortable with. A well chosen font can free your design of typographical boredom and still save time when turning it into HTML. It sounds impossible but it isn’t.

You might never have to use Verdana again. Just don’t tell her I said that.

My research: http://delicious.com/awayken/ls-webworks+20100323

UPDATE: A comment by Ethan Dunham clarifies the details behind Fontspring. I’ve updated the post appropriately.

Holli and I are sure that this quote has shown up in LOST before, but we can’t find it. Do you guys know? It’s figuratively killing us!

If you know it and include episode number or title in your comment, we’ll name our baby after you*.

*If Jacob lets us.

Knowing that there are multiple programming languages (I just told you so, remember?), one reasonably wonders, “Why not just one programming language?” My brother wondered the very same thing in an email to me, which inspired this post. As children often do, his question revealed to me a greater query that I hadn’t stopped to think about before: why NOT just one programming language? (The joke here is that my brother is in his mid-twenties.)

One reason why there isn’t just one computer language is that there isn’t just one type of computer; there are thousands of different types of computers. Computers all speak a language called “machine language”. This, essentially, is the 1s and 0s of binary. Jotting down 1s and 0s would be a terribly ineffective way of communicating with a computer, so programming languages were devised.

The different programming languages came to solve different problems. The C language, for instance, was created as a systems language. It’s goal, as a language, was to build servers and operating systems. Prolog, on the other hand, is a logic language, designed for use in artificial intelligence. SQL makes it easy to manage data in a database management system. None of these languages are useful for creating webpages easily. That’s why we have Ruby, Java, PHP, ASP.Net, and CFML (ColdFusion).

Sometimes, a programmer will like the concepts of one language, but they’ll want the syntax of another. So, they create a new language. Some languages only exist as proof that a concept is possible. Some languages are specific to the platform for which they are written. For instance, a mobile phone might have it’s own simple operating system with a special programming language used to write the cell phone’s applications, or a social networking site might develop a language in their API for developers to use to get data from that social networking site.

Perhaps an analogy is in order. Programming languages are like tools. When you’re trying to hang a painting, a hammer is better for driving a nail than a mallet. A mallet will do the job, but that’s not quite what it’s supposed to be used for. And, most importantly, you couldn’t do everything you needed to do with just a hammer. You could do a lot, and get close to almost all of it, but in the end it’s nice to have other tools in the box.

Another analogy is out of order, but I’m just that crazy. Programming languages are not like natural languages. People hear PHP, Ruby and ColdFusion, and they think of German, French, and English. RESIST THAT URGE. Programming languages are not at all equivalent to natural languages. The main reason for this is that natural languages sprang up from a human need to express the scope of intellectual thought and the breadth of expression capable in their speakers; computer languages just make computers do stuff and junk.

Using the programming language criteria above, are a French-speaking person and an English-speaking person so fundamentally different that they require different languages? Of course not. A French-speaking person is just as capable of learning English as an English-speaking person. Similarly, French doesn’t solve any problem that English can’t solve. You might be inclined to say that French poetry is much easier on the ears, or that English is a much better business language, but these aren’t properties of the language per se. English might be considered a better business tool because of its wide adoption, and French… well, I guess it IS easier on the ears, but that’s not the reason French was created.

At L&S, I usually find myself playing in ColdFusion (CFML), HTML, CSS, and JavaScript, but I’ve also played with PHP, Java, Python, and Classic ASP. On a recent project, I found myself using ASP.Net and C# for one half and CFML for the second half. In my personal time, I’ve played with Ruby and Google’s Go, among others. I’m not listing this all out to impress you, but let’s be honest; some of you are really impressed. I’m listing these languages to show just how varied the Internet landscape is right now. In fact, looking at this list, I think my list of languages might be light for a web programmer these days. No Perl? No Clojure? No Scala? No Processing?

As servers get better at deploying (and virtualizing) the ability to utilize these languages in an integrated environment, web developers are getting more interested in picking the right tool for the job. Better server performance means giving developers more tools to play with and utilize. That, in turn, means faster, more efficient websites and, regrettably, a whole lot of developer ego.

Those guys can get pretty insufferable. Trust me.

Honestly, I think I’ve had this dream before.