Plenty of people (myself included) have had some less than favorable things to say about text rendering in WPF and Silverlight. Well haters gonna h8, but we’ve come a long way! Here’s thet thing: text rendering is not only hard but it’s highly subject. That’s why a tool like photoshop makes you choose a rendering method (one of 5) for every text element on the canvas. There really isn’t a single rendering methodology that is going to look great for all fonts in all situations.

If you think about it, you’re dealing with the intersection of a lot of variables: the glyphs in the font itself (is it thin, thick, etc.), the features of the font (whether it supports hinting, etc.), the size of the font and the context in which it is used (the color of the text, the color of the background, etc.).

The fancypants engineering that turns all of that into pixels on a screen is not going to get it right all the time, especially for something like type where our eyes are highly trained and people (designers and non-designers alike) have strong opinions.

So, in that spirit, I thought I’d share some of my (highly subjective) opinions. Here are a couple of things that I do get better text rendering in Silverlight:

1. Choose Good Fonts at the Right Size

Some fonts just seem to be made for Silverlight and some feel like a fight. Unfortunately, there are no rules about this. It takes a little trial and error. And to make it even more complicated, the results are pretty dramatic depending on the size at which you’re rendering. The same font might look pretty good at 12px and crummy at 13px.

Segoe and Verdana both look okay at display sizes. I prefer Verdana at 11px or 12px. Segoe works great at 14px but kind of looks awful at 11px (especially bold).

Confusing? Unfortunately, it sort of is. The good news is that for display font sizes (10-14px or so), you’re generally better off sticking with what you know anyway. At that size, you shouldn’t be trying to be creative or really even establish a mood. You should probably be focused on conveying information. To that end, a common font is an asset because it lets the text itself have the voice instead of the font its written in.

For larger sizes, you may want to be a little more expressive and there you’ll have to do some digging. Keep that in mind as you design or work with your designers to that they understand: when it comes to production, you may have to tweak font sizes by a pixel or two here and there to find a match to the Silverlight text rendering engine.

Seems a little arbitrary, right? Why should the same font look so different (jaggy vs not, etc.) at two very similar sizes? It’s because of text hinting and that brings us to…

2. Understand Hinting (and turn it off some times)

Text hinting (or font hinting) is like pixel snapping for fonts. It’s a way for the font author to specify the “critical” lines in each of the glyphs, the ones that need to land on pixel boundaries. The result of well hinted text is that the stems in a letter like “M” fall on pixel boundaries and you get text that looks much crisper.

Microsoft tends to be pretty aggressive when it comes to text hinting and that typically accounts for the difference in font rendering between Windows and Mac. Strongly hinted text feels crisper but a little bit more jaggy. At large sizes, text hinting doesn’t matter and in WPF and Silverlight, you can usually find the “magic” size where the rendering algorithm stops paying attention to hints. For Segoe UI (in WPF) this happens somewhere between 20 and 21px. You can see the difference below:

This is how text hinting accounts for the big differences between seemingly small sizes. It’s not just because hinting switches off at certain sizes, it’s also the fact that as you move from size to size, you’re doing a bunch of rounding. You’re literally changing the underlying glyphs that make up the characters in the font so that they align to pixel boundaries.

This also explains why you get a lot of artifacts in the “medium” sized display sizes (13px through 20px or so): at smaller sizes, hinting does less because many of the glyphs end up being a single pixel wide (think of the letter I at 10, 11 or 12px—there’s a good chance that it will only be a single pixel wide at any of those sizes). When you move up just a little, you still have hinting in the math, but now the difference is more noticable and as you move from, say a 17px font to an 18px font you may actually see a significant change in the shape of a glyph. This effect sets in even earlier for bold text.

You can probably already feel my bias here. At small sizes, I really like hinted text but for medium sizes, I think it distorts the glyphs and generally looks too crisp. In my opinion, this is why people complain about Silverlight and WPF text rendering. It’s too aggressive in it’s approach to hinting. I won’t pretend to be an expert, but I’ve heard that this has something to do with something called a gamma table. I mention that only because it sounds awesome.

Earlier I said that Photoshop lets us choose between 5 different mathemagical formulas to get pretty precise control of text appearance. Well, Silverlight isn’t quite that generous, but there’s one huge switch that we can throw: TextHintingMode. Hooray!

When you set TextOptions.TextHintingMode=”Animated” you are essentially telling the rendering engine to ignore hinting. Thanks! I think it’s called “Animated” because if you’re text is animated, you presumably don’t care about how it lines up against pixel boundaries anymore.

Basically, when you set TextHintingMode=”Animated, you tell Silverlight to render your text using the same algorithm it uses at larger sizes, the one that ignores hinting. The result can be that the text feels a little fuzzy at smaller sizes, but I think it often looks much better. Here are a couple of examples:

You might prefer the hinted text (Fixed above). From a technical perspective, you could probably make an argument that it’s more “correct.” It’s definitely brighter and I think that some people would argue that’s more readable because of that.

On the other hand, I think anyone would agree that the “shape” of the letters in the “Fixed” text is a little distorted compared to the “Animated” text. Look at the top sample. That’s Verdana. Checkout the top of the “6” in 16 for the bold version of that font. It’s been reduced to a single horizontal line. The same goes for the top and bottom lines in the little “z” in size. If you compare those to the non-hinted version, it’s clear that those lines should all have a little more weight to them.

The result of all of this is that I use TextHintingMode=”Animated” a lot. A whole lot. In fact, this property inherits and I usually just set at the top of the app and then “opt out” instead of opting in. If that makes things look fuzzy, um, sorry. I like it.

I realized this morning that MIX is just a few weeks away and by a few I mean less than four. I can’t wait. MIX might be my favorite week of year (sorry Holiday Season) and this looks like it’s going to be a great year. Even Joshua Topolsky (Mr. Engadget) thinks so, or did at 4:05PM the other day anyway.

I’m Speaking! Woohoo!

In addition to attending, I get to speak again this year. Twice, in fact. First off is a workshop. This will be an encore (and updated) performance of the workshop I did last year about the fundamentals of design. Microsoft specifically asked me to present the same workshop this year because we had a really great response to it last last year and this seems to still be a very hot topic. That’s awesome: technical folks want to know more about design.

I’ve refined some things for this go around, but the basics of the content will be the same: the fundamental principles of design presented for non-designers. New stuff is: new content about typography, some updated thoughts about realism in UI, icons and imagery as well as some better organization and refinement overall. I’ve also tried to update a bunch of the examples we look at.

It’s Not Too Late to Register for the Workshops (Even if You Already Registered for MIX)

Some things about workshops: first, it was a fluke that it was recorded last year and I don’t think we’ll be so lucky this year. Second, even if you’ve already registered for the conference (and I’ve heard that space is running out), you can go back and add the workshops to you’re registration if you’ve had a change of heart. And you should. The workshops look really cool this year.

My Session: Hands on With Design

In addition to the workshop, Microsoft is also letting me present a session. This session is mostly made up of content that didn’t quite fit into the workshop. Where the workshop is a lot about “what is” design, the session is more hands on and “how to” design. It may be a little random (it’s the scraps after the workshop after all) but hopefully really fun and useful. I’ll cover everything from process kinds of stuff to some tactical XAML kinds of things.

This Year’s Kaxaml Swag

Finally, a little about Kaxaml swag this year. So, it just didn’t feel right to order new swag this year since 1) I have about 450 stickers left and 2) Kaxaml hasn’t really changed at all since last year. So this year we’re going sticker crazy! The goal is to “place” all 450 stickers in good homes so that next year when we have a fresh version of the app we can also have fresh swag to celebrate. Therefore, if you are at the conference and have a need for a sticker, do not hesitate get one (or two or up to 450). They are quickly become collectors items, by the way. Time is running out.

Well, that’s it for now. See you at MIX!

UPDATE: There were some issues with the Silverlight app before but they’ve been fixed. I was using a custom MP3 encoder to get live audio visualizations in the app but it was crashing in certain browsers. Everything should be working now (sans visualization), but don’t hesitate to let me know if you’re running into issues. The source, by the way, still includes the audio visualization and if someone can see where I’ve messed things up I’d love to know about it!

I realize that 2010 is officially 1/12 over and so any excuse about waiting until the last minute to allow for late breaking slam dunks is going to seem disingenuous. The truth is that over Christmas vacation, I compiled most of the list and even wrote 90% of a Silverlight app for showcasing it. I made the mistake, though, of including a place for a “blurb” about each album in the app and it’s taken me until tonight to write all of those. Well, without further ado, here it is: my best albums of 2009.

This is (as I mentioned) a Silverlight 3 app. You’re welcome to download the source (here) and do with it as you please. It uses the completely awesome Saluse Media Kit to create the playback visualization bars (in conjunction with the must have WriteableBitmapEx extensions for WriteableBitmap). If you have your own list of 25 albums, it would be easy to reuse this. It’s driven by an XML file. Expect more lists from in the near future (including the already compiled best albums of the decade which just need blurbs now).

I’ve gone a little dark on the blog lately, mostly due to a suddenly very busy schedule (a good thing for our small team of one at Pixel Lab World Headquarters). I’m excited, though, to share a little about at least one project I’ve been working on: Seesmic for Windows which was announced today at the PDC.

I helped out with the UX on this one, doing a lot of the design work and much of the UI implementation in the Windows / WPF version. What a fun project. Seesmic has been great to work with: really talented engineers and super passionate leadership.

Seesmic, of course, already had a solid app going into the project, and much of the design process was about keeping the good from the current app in tact. They’ve had, after all, a whopping 3 million downloads in 6 months.  Also, Seesmic has got special appeal with twitter pros (the guys who manage multiple accounts and tweet blindfolded) and we felt that it was critical that we not take anything away from them.

On the other hand, we we wanted to evolve the UI so that it felt native, clean and beautiful on Windows.  That resulted in things like the integration with Windows glass and the updated visual design. We also wanted the app to look and feel really lightweight and ultimately, much of my job was to keep the UI quiet so the focus of the app would be the content.

The design will continue to evolve, but here you can see the current app next to the new. I’m excited about the direction.

Well, It’s been an exciting day. There’s been good coverage about the app, including stories from TechCrunch and Mashable and a nice write up on the Windows Experience Blog. You can read more about the new and planned features there (including a very exciting plugin model that .NET developers won’t want to miss). To download the beta, you need to join team Seesmic. I think that may be Seesmic’s way of reminding you that this is still a beta! If you try it out, I’d love to know what you think.

Funny how your own site is always the lowest priority when your job is to create websites for other people. It’s like the auto mechanic with the broken down car. Well, last week (while I was on vacation with the family) I was finally able to sneak a couple of hours to get the site for Pixel Lab (that’s my budding young company) out the door. You can see the (kind of) finished product here.

I say kind of because I haven’t had a chance to build out the “case studies” section under services yet and, frankly, that’s probably the thing people want to see. For now, I’m just happy to have something live! Case studies will be coming soon.

It’s fun to be your own client. The design reasoning went something like this: first of all, it’s a lab, so it needed to be kind of sciency. For me, the quintessential science feeling happened in labs in the late 50s and 60s. The feeling I wanted is something like Flubber meets Heisenberg. So, I was drawn to retro science photographs and equipment.

It turns out that there is also a very strong design aesthetic associated with that era: the International Typographic Style is an an aesthetic that has, arguably, become an archetype of design. It’s instantly recognizable as Design (notice the capital “D”). International typographic (sometimes called “swiss style” or “swiss typographic”) is known for strong order, use of grid, black and white imagery, bold colors and, most of all, Helvetica (and a handful of similar fonts).

So, I was settling in on a style: swiss typographic + retro science stuff. It was a nice package, all from the same era. To move the aesthetic forward a little, though, I introduced a second font (the one that matches the Pixel Lab logo) for the main headings on each page and I built out some gradients (some softening on the pixels in the logo and highlights on the zoomed in content), and added a bunch of motion. Then I went about building content.

For fun, I also played around with some sound. I’m not normally a fan of a lot of sound, but my wife had to talk me down from actually using music! So, I got a little caught up in the whole sound thing I guess. In the end, sound is off by default because I still haven’t gotten it quite right (plus as we all know, sound can be a little annoying if you weren’t expecting it). I really like how sound can influence a mood though. The song I was trying to cut up for a soundtrack, by the way, was “Don’t Give Up” by Whites Boy Alive. It’s a cool song and the perfect mood for the site. I think my wife was right, though, that not many people can pull of a soundtrack on a website (although, for the record, Scott Hansen can).

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

At a technical level, I learned some stuff about sound and wrote some handy code that is worth sharing so expect a forthcoming post on Silverlight and sound effects.

Incidentally, the design happened quickly on this one. It was much less labored than other designs that I’ve done with myself as the client. I’ve been trying to figure out why that would be. Perhaps inspiration just struck, but I also keep being reminded of Hillman Curtis and the emphasis that he places on discovering a theme. With this project, I discovered the theme early on and I think that may have made the difference.

Either way, it was a fun project and, even if there is still a little more to do, it feels great to have it live. So, let me know what you think!

I found out today that my MIX09 worskhop is now officially online. I won’t lie, it’s kind of long. The session is three hours of what I wish I had learned about design when I jumped on the design wagon train.  You’ll either want to do this one an hour at a time or else prepare some snacks.

By the way, thanks to the Microsoft guys (Jaime and other folks) who made sure this recording got online. Initially, since it’s a workshop, it was not going to be posted. Normally workshops and precons don’t get recorded or posted. Microsoft really went out of their way, though, to get this one out there (after we found out it had been recorded by accident). Maybe they realized that this is a tough year to be budgeting for addons (like workshops) at conferences and there are probably people who would have liked to have attended.

I guess we also want to thank the attendees who asked to get it online. I think that enough people clamored to get it up there. So, thanks guys!

1. Stickers
For those of you who have submitted haikus, it’s finally sticker time. I’ll be mailing them out in about a week. Between now and then, please send me a physical address where I can send the sticker. Also, let me know how many you want. No reasonable request will be refused (where reasonable maxes out at about 8 or 9) You can use the email address robby@kaxaml.com. For those of you who didn’t submit a haiku, well, it’s not too late. By the way, I gave away about half of the stickers away at MIX. Wow, that’s 500 stickers (but looks like approximately 1 wheelbarrow full) so I was pretty happy.

2. Video from the workshop
The good news is that the workshop was recorded. It must have been meant to be, because not all of the workshops were recorded, but (mostly by a stroke of luck) mine happened to be one of the lucky few to end up on tape. The bad news is that the first pass at encoding the video produced pretty poor audio. The good news (last one, I promise) is that it is being re-encoded and should probably be live sometime next week. Sweet!

3. Kaxaml and Silverlight 3
The latest beta of Kaxaml works with Silverlight 3 with you doing anything. That said, I’m looking to expand the support and finally bump SL support out of beta. Unfortunately, Kaxaml takes a back seat to paying gigs these days so the best way to get a new release of Kaxaml is to not hire me.  Wait a minute…I mean, if you hire me then I’ll hurry and get you a new release of Kaxaml. I’ll even customize the colors for you.

Realistically, I’m hoping to get a new version out the door in the next few weeks. If you have features or bug fixes that you really care about, now is a good time to let me know. You can send feedback to bugs@kaxaml.com

4. Great conference, see you at others
Well, once again, great conference Microsoft. Looking back, I think it’s my favorite MIX yet and I’ve been to all four! It even beat MIX06 (which has a special place in my heart since it was, well, the first one). I have budget for one or two more conferences this year. One will probably be the PDC. Does anybody have suggestions on the other? I’m currently debating between FITC (Toronto) and Web 2.0 Expo (New York). Hope to see you there!

My hats of to Microsoft today for putting on a truly inspiring keynote. Deborah Adler shared her story of redesigning the little orange prescription medication pill bottles that we’ve been using for the last 50 years.  I love that story and I had heard it before, but to get it straight from the designer was a real treat. It’s an incredible story and shows the real impact of design, an impact that truly improves (even saves!) lives. I was also happy that she emphasized the importance and the power of empathy, putting yourself in the shoes of the consumer of your design.

More importantly, I felt like today’s keynote with Deborah Adler and yesterday’s with Bill Buxton spoke volumes about Microsoft’s commitment to design.

To be sure, a decision to spend 60 minutes of a 90 minute keynote with a non-technical designer was not taken lightly. There were big risks. And if you watched the tweets during the keynote, you probably saw some of them playing out with many people questioning the value of the keynote (in addition to the many more who were praising it). I can’t help but feel like the venture paid off, though. I was invigorated by the content and encouraged by Microsoft’s commitment to it.

These are some of the other things I’ve seen Microsoft do this year to further the voice of design at the conference and in their products:

• They’ve arranged a special screening of Objectified here (the second in the country?) and managed to get Gary Hustwit on stage for Q&A
• They gave a copy of Bill Buxton’s book to every attendee.
• They introduced features like SketchFlow, Photoshop import, Illustrator import and others into the next version of Blend, features that are clearly a direct response to feedback from the design community.
• They gave us features in Silverlight like effects, perspective 3D, and H.264 video, all features designed to further the fidelity of experience that we deliver on that technology.
• They gave me three and a half hours to introduce developers to design principles! (as well as at least a dozen other design focused talks).

I thought I heard Bill Buxton saying something yesterday about over half of the audience in the keynote being designers. Did I get that right? That’s a big number. Well, it was a good day to be a Microsoft designer.

By the way, for folks who attended the workshop, Debora Works for Milton Glaser, the same guy who created the Bob Dylan poster we talked about in the discussion about design vs. art. That was him sitting at the computer with her working on the new icons in the news story she showed.

If you’ve been following me on twitter at all this week, you know that I’ve fallen off the typography deep end.  I’ve been working on the typography slides for the workshop at MIX and become, well, a little obsessed (and/or annoying depending on how long you’ve been in a room with me).

I’ll refrain from the barrage of links that is my twitter feed, but here are two videos that show the impact of type as a visual element.  Interestingly, the videos (as far as I know) are unrelated to one another but share a very similar retro aesthetic.

The first is from this guy and his whole portfolio is incredible, but this one stands out. Really amazing motion. What’s black and white and Helvetica all over? This.

Is there any meaning to the text? It isn’t clear to me if there, but it is interesting to see how individual words can have an impact. Our brains read fast and we can consume words almost like pictures so if you see a strong word like SPEED, it conjures emotion the same way an image might.

The second in a Nina Simone video.  The interesting thing to watch here is how the type is matched to qualities of the singer’s voice so that letterforms become very emotionally connected to qualities of the singing.

I just came across this great addition to the already very cool Kuler color picker app (which is, in case you haven’t seen, now Expression friendly).  It’s a visualization of color additions by season and geographic location.  The impact of culture and season on the palette seem to be subtle, but some interesting trends emerge (like a bias toward blue in the US and one toward pink in Japan).  Whether it varies much or not, it’s fascinating to see color choices laid out like this.  There seems to be an affection along the “temperature” poles—blues on the one hand and warm reds and oranges on the other.  The more ambiguous hues—the greens and purples—appear to be used more selectively.

Data viz is seeing it’s day and this is a striking example.  That’s partially due to a great dataset that lends itself well to visualization.  But it’s also a great execution.  Nice job Kuler!