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.

So here you go, best albums of 2010 to date (Q1 and Q2). So far, 2010 has not only met, but in many cases, exceeded expectations. Well done 2010. And the rest of the year looks just as bright. We’re anticipating some great music in third and fourth quarters.

Note that a couple of these are pre-release tracks from albums that still haven’t come out. The first song (Ring Ring by Sleigh Bells) is the single from an album that has since been released and by the time the album came out, the track had been renamed Rill Rill and sounded quite a lot different. I liked this version better.

Also, the order here is kind of rough still. I think the Charlotte Gainsbourg album may show up a little to early and the Surfer Blood album comes too late. Well, it’s only mid-year…still plenty of time to get it right for the list that counts.

(By the way, this is a modified version of this (slightly better) app. The editorial text was the time sink last time so I cut it from this version and tried to move things around a little to fill the gap. It only kind of worked, so you’ll have to forgive the layout that feels like it’s missing something.)

I got an email tonight with a great question and I thought I’d share my thoughts / gather some feedback.

Here’s the question:

One problem that I have always had  that after I design a website or Silverlight application I tend to start second guessing what I have produced.  Next thing you know I start tweaking a little bit here and a little bit there and in the end it ends up totally different when maybe it was fine to begin with.  It’s almost as if it’s not good enough and I am over critical. Do you have that problem?  If so, how do you deal with it or how do you recommend I deal with it?

Here’s my response:

That’s a great question. I’m certainly no stranger to overdesigning something that was good to begin with. On the other hand that refining process often makes things better not worse. So, I don’t have a perfect answer for  when to stop, but I do have some thoughts:

First, your instincts get better with time and you need to trust them. If you don’t have that “in the pocket” feeling about something, it’s probably good to keep exploring. You can always go back.

Second, it’s always a good idea to put some space between you and a design from time to time. I usually have two or three things “cooking” just so I get some perspective as I bounce between them. If you have the luxury of a time, taking a few days is great. Use that time to try to shift your thinking, find new inspiration, etc. When you go back, you’ll almost definitely see the design in a different light.

Third, backup as you go and keep a history of your iterations. Once you give yourself some space, go back and try to deconstruct your thinking. That will give you a chance to find the good among the bad. It will also help you understand yourself and refine your instinct.

Your response?

Wondering what other folks would say to this. Anybody have thoughts to share? How do you know when a design is good enough to stop?

Posted via email from Robby Ingebretsen

Titilium

Very nice sans serif that works well for display. Comes in many weights. I’ve actually used this font a lot in WPF for display and had good luck with it. It’s a little square so it leaves the UI looking a little futuristic if you don’t manage the weights properly.

Raleway

Light weight font. Very friendly (because of a big x-height for those who came to the design fundamentals workshop). Feels a little bit like an updated light futura. It’s may be too thin for display in WPF and SL because of the platforms tendency to thin out typefaces at render time.

Miso

Really beautiful functional looking font. Comes in three weights (light, regular and bold)

Medio

A classic Bodoni style font. Very clean lines, classic and elegant.

Ubunt-title

Nice modern looking rounded sans-serif. Very modern feel. Friendly. Presumably created for the Ubuntu linux distro. Released under GNU.

Serif Beta

Serif beta is a temporary name for this font which is theoretically still not finalized (thus the beta) but it’s a very cool multipurpose serif.

League Gothic

Perhaps my favorite open source font out there right now (and, incidentally) the font I used for my slides at MIX10. Very cool narrow gothic based on Alternate Gothic No.1, a typeface from the 1920’s.

Chunk Five

A very “chunky” slab serif that is perfect for headlines. This is the font I used for the “Best Albums of 2009” app that I posted a few months ago.

Junction

This is a really nice humanist sans serif that would work great as a display font. It’s got a really unique shape for the lowercase “n” and “u” that makes it fairly recognizable.

New Athena Unicode

Very unique sans serif. Would make a great headline or display. Released by the American Philological Society and has good Unicode support plus some interesting open type features.

Posted via email from Robby Ingebretsen

All fantastic books. There are other great books, but for me these are the essentials.

1.       How to Think Like a Great Graphic Designer by Debbie Millman  //  Amazon
This is the book to read if you want to understand the ethos of designers and understand design culture. Perfect way to begin to feel like you’re in the club.

2.       The Elements of Graphic Design by Alexander White  //  Amazon
By far the most organized thinking about design composition that I’ve encountered.

3.        The Elements of Typographic Style by Robert Bringhurst  //  Amazon
Not such breezy reading as the other two, but a very structured approach to typography, something that is normally left mostly to intuition.

Posted via email from Robby Ingebretsen

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!

Kaxaml Update

I had a great conversation with Rob Relyea (Mr. XAML) yesterday about the future of Kaxaml and he shared a lot of very useful pointers about how to use some upcoming .NET 4.0 features to make Kaxaml super awesome. Looks like he’s already written much of the code for us!

So here’s the plan. No updates until the week after MIX, but I’ve reserved a few days that week to dig in. At that point, I’ll also update the code on codeplex and if anyone would like to lend a hand, I would warmly welcome it. I haven’t done a good job getting community support in the code so far. Part of the next update will be (hopefully) making community participation a little easier. If you’re interested in lending a hand that week, let me know. It will be fun. Maybe we can make t-shirts or something.

Some of the features I’d like to add (time permitting):

• Support for external assemblies
• x:Class / Event stripping
• Basic .csproj support / App.xaml support
• “Real” intellisense (right now I just parse a big .XSD)
• Better Silveright support (some tough problems here still)
• ResourceDictionary preview
• Better MVVM (when I wrote this, MVVM was really new and the current implementation feels very broken now)

Downloads

I noticed this morning that I’ve had 88,000 downloads of Kaxaml so far. That sort of blew my mind. I realize that as developers we reinstall our machines a lot. At least a dozen of those downloads are from me, but it’s still a much bigger number than I expected. I’ve had a pretty good number of inquiries over that time from people who want make donations. I’ve never accepted anything but the gesture has always been really appreciated.

The Request

Well, I have a request. If you use Kaxaml, here’s a way to help: this morning I got an email from a colleague in Romania (Niamtu Dragos). He’s the man behind xamltemplates.net. Dragos is currently donating any sales of the content on his site to Daniel Raduta.

I don’t know Daniel, but he’s got leukemia and needs a bone marrow transplant that he can’t afford. He’s a developer like us and he has a family. He’s expecting his first child next month. I find it tragic that right now his life depends mostly on financing! The knowledge and technology to beat this exist, he just needs to pay for it. Seems like that should be a technicality or an afterthought but right now it’s the thing that’s keeping him from getting the help he needs. That’s heartbreaking!

So, here’s the request: If you’ve thought about donating to Kaxaml in the past then use those funds to support Daniel. Theoretically, there are thousands of us. If we each donated just a few dollars we would save this guys life! To donate, you can buy something from xamltemplates.net or donate directly to Daniel by clicking below. If you do and you want to let me know it was for Kaxaml, drop me a line (or feel to keep it anonymous too).

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).

That said, it’s been a long time since I dusted off the Kaxaml source. Here’s where we are: 1) Unfortunately, Kaxaml is just a hobby so it always takes a backseat to real (read “paying”) work. 2) I really want to release a new version based on the .NET 4.0 xaml parsing stuff. I wanted to ship that in beta before MIX, but my workload may keep that from happening. We’ll see. 3) The current Kaxaml “beta” actually does support Silverlight 3 even though the website implies that we’re just barely there for Silverlight 2. Sorry Kaxaml. You know I think you’re the best, right? Let’s totally promise to get together soon. Call me.

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.