Update: Make sure to note that there are all sorts of different licenses here and you’ll need to verify that these really are free for distribution before including them in your app.  I guess I wasn’t clear about that earlier.  Sorry if anyone has been mislead.  That said, there are a number of fonts here that are truly free for use in your projects.  Thanks to the couple of you who sent email or comments reminding me to clarify this.  Okay, back to the post…

In spite of my humbug perspective on text rendering from the other day, I’m a huge advocate for using type creatively in your project and WPF and Silverlight both make that easier by giving you the ability to embed fonts right in there with the code.  The catch: you need a license to redistribute the font.  That can be pretty tricky with professional fonts.  Generally the licenses limit you to rights for production, not redistribution.

Your best bet in WPF and Silverlight, then, are free fonts.  Even these don’t necessarily grant you a right to redistribute, but you’ve got a much better chance.

In addition to the Ascender fonts which shipped in the WPF SDK, and sites like dafont.com or urbanfonts.com (where you get some good and some bad), Smashing magazine proves again and again to be a great source of really beautiful typefaces at the low, low price of free!

The great thing about these is that they tend to be freebies offered directly from foundries who would otherwise be selling them.  The result is really high quality type.  Usually that means multiple weights, great scalability even at small sizes, etc.  There are of course hits and misses, but definitely more hits.

Unfortunately, there’s not a central repository.  Instead the fonts leak out in posts.  Sorry, that means lots of links.  Here are the ones that I’ve collected so far:

• 15 High Quality Beatiful Free Fonts
• 40 Excellent Free fonts for Profressional Design
• Five More Free Fonts
• Free Brilliant High Quality Fonts
• Free Fonts You Shouldn’t Have Missed
• 17 More Free Quality Fonts
• Free Fresh Fonts
• Free Font of the Week

Do you have favorite places to get typefaces for WPF and Silverlight? Any favorites?

That’s how artist and designer Andreas Nicolas Fischer describes his medium.  He’s taken data visualization to a new level, producing (in some cases) physical objects to represent the data set.  The image above is a mapping of GDP around the world, carved into Beech wood!  There are some really neat ideas here and some great applications of 3D to data viz if you’re looking for inspiration.

(Update with an example.)

I was excited to see this post from Sriram about DirectWrite today.  I’m also glad to see that he’ll be PM’ing the DirectWrite effort.  He’s a former WPF guy, now on the Windows 7 team—a good guy to make sure that DirectWrite (a Windows7 API) gets well represented in WPF and (please!) Silverlight.

At this point, I think I would take better text support over any other feature in Silverlight or WPF.  Yup.  You guys can have blend modes, effects, 3D, and everything else I have asked for (or even hinted about) if it means I get awesome text.

The problem is that I start my designs in Photoshop and, frankly, Photoshop has a great text engine.  By the time I get to production, I’m just about always disappointed.  To my eye, WPF text rendering doesn’t even come close and Silverlight is losing its socks.  Sorry xaml-based technologies.  You know we’re still friends, right?  I’m just trying to help you grow.

By now, I (probably like you) have learned which are the “safe” fonts and the safe sizes in WPF, and I stick with them.  By doing that I can get some okay looking text that works with most of my apps (incidentally the Ascender fonts that shipped with the SDK are great!).  But, frankly, the importance of text in a UI can probably not be overstated and I’m tired of feeling like I’m settling.  In Silverlight, I rarely even use the text engine.  In most of the projects I’ve done, I’ve pre-rendered the text into images!  That’s a sad state of affairs.

So, here’s my wishlist:

1. Awesome type that looks great at any size and any weight with any well-constructed font (if the font is bad then we both agree that you can only do what you can do)
2. More developer control over the qualities of the rendering (let me control just how much sub-pixel rendering and how you do it—let me call the shots about perf and readability)
3. A WPF story (I think Scott Guthrie said something about this at PDC, right?)
4. A Silverlight story (ideally we’d get the same engine or at least some of the awesomeness even if we don’t get the tweaks)
5. A downward compat story (it would be a real bummer if this only showed up in Windows7—it means it’s not something that I can rely on and I end up back with my safe fonts.  Or, worse, I end up with a smaller set of safe fonts that work in both rendering environments—in that event, things got worse and not better).

I’ve written about Scott before.  He’s possibly my favorite working graphic designer today.  Check out this very positive review of Vista from him? 

That’s right I just said “favorite designer” and “positive review of Vista” in the same sentence (well, two sentences).  Nice work Scott!  Way to buck the hype and stand up for what you believe in.  Also, nice work Microsoft.  Looks like your future with the designerati is more secure than we knew!

“If it comes easy, you’re not doing it right.”

Great advice from Malcom Gladwell in this presentation about the process of creative synthesis that results in genius and creativity.  He touches on a point that became a bit of revelation for me when I first came across it: that great ideas rarely (if ever) appear fully realized out of thin air but are instead the result of dedication and hard work. 

This insight came to me in full force during my last months at Microsoft when I was doing a design firm tour, going from firm to firm to get insight into how different groups approach the creative process.  Prior to that, I had underestimated not just the time but also the meticulous process that was required to, eventually, generate the best ideas and best designs.

It’s tempting to see the work of a great designer and think that it was always that way and the better the design, the more effortless it might appear.  Great designs, great experiences and even great code (e.g. a great object model) are susceptible to a kind of under-estimation.  Mr. Gladwell’s welcome point, however, is that great works require great effort. 

Phew!  There’s hope for the rest of us!

Sprint (yup, Sprint) has built this addictive mosaic of random data visualization widgets, providing must have up-to-the-minute stats like People Stuck in Elevators and the current number of Sticky Notes Being Produced.  It’s a fun site that takes an ironic jab at our modernist need for information.  Hmmm… that sounded kind of heavy.  Better: it’s a fun site and a great source of inspiration for playful interaction and interesting ways to look at data.

A Presidential election is, of course, an epicenter for data visualization.  It is, after all, the data that gets the last word and it’s the data that, ultimately, we’ve all been watching and discussing for the last 6, 12 or 18 months.  For the Numerati, this is good times (“high five for that chi square extrapolation!”).  It’s also good times for finding cool ways to look at data.  Here are some favorites I’ve jotted down.

My top pick for pure aesthetics has got to be the news tracker at everymomentnow.com.  It’s instantly understandable, clean and useful.  Each bar represents a day and the width of the bar represents the number of article references in that day for the candidate, providing information about media trends between the two candidates.

Another, and perhaps the ambitious, is the New York Times’ Visualization Lab.  The Times teamed up with IBM’s Many Eyes (and Wordle) to allow you to visualize all kinds of sources (including articles in the Times itself).  Construct your own visualization of Sarah Palin’s speech at the RNC or check out a Wordle of Obama’s acceptance speech.

For a general purpose and up-to-the minute perspective on the online coverage of the election, check out Perspctv.  This one also meets a high bar for aesthetics which makes the data feel highly accessible.  Yahoo has also put together a really nice dashboard, which includes a cool bit of interaction where you can play out your own electoral scenarios.

Of course with all this data being thrown at us, we’re becoming more savvy about how we interpret it.  Takeaway.org has picked up on that, I guess, and gives us a poll of the polls.  A visualization of how the different pollsters predictions stack up (literally) against one another. 

This idea (and others) has been incorporated into the “new” approach to polling that we see at fivethirtyeight.com.  I first heard about those guys in an interview on the Colbert Report.  I guess they started off by predicting sports scores and were able to do so with a significantly better track record than others.  We’ll see if their prowess holds out for the election, but right now they’re giving McCain a 3.3% chance of winning.  Sorry Red States.

Last of all, Saturday Night Live has done a very nice job of putting this all in perspective.  The skit it is brilliant.  The technology is pretty great too.

Between my wife and I, we own something like four iPods and two iPhones (including a first generation iPod which, amazingly, looks like an antique now) and so I have a long-term relationship with iTunes.  I don’t dislike iTunes but it’s old.  In fact, it hasn’t changed much since I plugged my antique 1G iPod into it 7 years ago.  There’s a lot of value, I guess, in iteration but I was hoping that iTunes 8 was going to be release that got me hooked again.  So far, I’m still kind of luke warm.

Enter Zune 3.0.  Wow!.  Can you call software sublime or is that weird?  Either way, I’ve got one doozy of a software crush on this music player.  Unfortunately for Microsoft, I haven’t broken out my Zune device for at least a year but I’m spending 10 hours a day in the software.

From the polish and attention to detail, it’s clear that this release went out with a some extra love.  Some favorite moments for me:

• The sound visualization has been integrated right into the background of the app (check it out above…that pink glow at the bottom moves in real time to the music…it looks cool!).
• It ships with multiple “themes” (which are really just backgrounds) but the default (and my favorite) is one called zero which is literally just a white background.  Nice.  Way to be bold by being subtle.
• If you leave the app alone it goes into one of two modes: one visualizes all of your album art in a giant grid.  It looks cool.  The other gives you band photos which it pulls from somewhere online and then overlays lyrics and song titles on top of it (that’s what’s going on in the image above).  This, by the way, is a great example of some blend mode awesomeness.
• The navigation is amazing intuitive in spite of being relatively complex and not feeling overly structured.
• MixView is the new music discovery service (also in the picture above).  As an example of paying attention to detail, the entrance animation for MixView eases in and then just slows but never stops.  That’s a bold thing to do, but it feels great.
• It doesn’t feel like an app, it feels like an “experience””—more like something a marketing team would create than app team.

So, well done Zune!  Now if only my Zune could make calls…

The Incredible Book Eating Boy is my new favorite bed time story (for reading to my two and four year old sons).  I looked up the illustrator (Oliver Jeffers) the other day to discover that he, like me, could appreciate a little nerd with his art as evidenced by his uninhibited use of math (that’s right, math) as a design element in his illustrations and paintings.  Sweet!  I really loved his portfolio for the content, but the site itself also stands on its own.  It’s simple, but really effective.  Shows how sometimes less == more (a little more math for you).

It turns out that being a freelancer is about twice as much work as you expect.  It’s been fun, but it’s been really busy.  So, Blog, sorry if you feel a little neglected.

If it makes you feel better, I’m about 1200 items away from being caught up in Google reader.  You’re not the only one being neglected (oh, and hi honey if you’re reading this).  So, you’ll forgive me if I’m a little late responding to this awesome post about multi-input shaders on Greg Schechter’s blog.  Did someone say blend modes?

If blend modes weren’t the first thing that came into your mind when you ran across that post, don’t feel bad.  Caring about blend modes isn’t intuitive.  In fact, it’s kinda hard to do.  So here are some quick thoughts about why I think they are rock and roll…get ready to hop on the blend modes bandwagon.

Blend Modes Defined

I’m not an expert here and if you want to know more, then you may want to check out this or this.  My practical understanding, though, is that blend modes give you the ability define how a layer visually interacts with the objects below it.  We’re used to a really simple blend mode (although I’m not sure if it actually counts) when we set the opacity on something and can see the content below it.

When we do that, somewhere some math is done that combines the value of the pixels of the object where set the opacity with the pixels that were below it.  WPF and Silverlight support one version of that math, the “normal” one.  If you’re going to support one, that’s probably the right one.  Photoshop supports something like 25 different ways to do that math and Flash supports a bunch too.  These are blend modes and they have names (like Color Burn, Linear Burn, Overlay, Vivid Light, etc.).

Why Blend Modes Mattter

So what’s the big deal?  For a lot of scenarios, there isn’t one.  Regular transparency blending is often exactly what you’re looking for.  On the other hand, once you start thinking in blend modes they start to pop up every where, much like transparency or rounded corners.  You didn’t think you cared until you had them (or noticed that everyone else was using them).

I have a couple of favorites, but a top pick (at least in Photoshop) is a mode called Linear Burn and I think it has some good application to UI.  First, here’s a simple example of layering an orange square over a paper texture.

You can see how the best we can do with the standard transparency blending (the Opacity Overlay) has the effect of “evening” out the texture of the paper.  We lose a lot of the contrast information as everything fights to be a little bit orange and a little bit paper.

Check out the Linear Burn, on the other hand.  When we apply that guy, we keep that contrast but do so in an orange kind of way and the result is much more vibrant and a much better texture.

Why Blend Modes Mattter for UI

There are tons of applications to UI, but a semi-geeky one is that this “dimming” effect of regular blending makes it much more difficult to create generic designs that can be colored or manipulated at runtime.  Here’s a concrete example: you’ve probably created a template for a button in the past that uses a gradient to produce some depth on the buttons’ surface.  You might do that with a partially transparent white-to-black gradient on top of the button’s background to produce something like this:

Not bad, but look how dim our vibrant green became.  If the consumer of that button set the background to be a very bright green and ended up with this, he might be disappointed.  (By the way, you would probably work around that by not including any white in your gradient.  Now you would have more vibrant albeit relatively dark button, but at least you could keep the original color).

Much nicer, right?  Linear Burn is a good one for something like this but theoretically the sky is the limit.

Multi-input Shaders == Blend Modes Potential

And that’s where multi-input shaders come into play.  With more than one input into the shader, you could combine the gradient and green to produce this or any other smart combination that you could think of.  You just do some math to say how the pixels combine.  Forget 25 blend modes Photoshop or Flash, WPF just gave us infiniti (that was for you Scott Barnes).  That’s essentially what Greg did in his post.  Great job WPF team.

So here’s the thing.  The math for blend modes is pretty straightforward.  It’s probably just a weekend for someone to start building some of these for us.  So, any takers?   Oh, and Silverlight…we’re watching you.