Change letter avatar font to Roboto?

@codinghorror thinks that the Roboto font is quite the mallard’s testicles, and I’ve put together a version of the letter avatars code that renders Roboto avatars. This is a rendering of all letters/numbers in both the existing font (top) and Roboto (bottom):smile:

A few questions for the assembled experts:

  • Do the avatars look better in Roboto than Helvetica?
  • Is the ‘D’ off-centre too nasty to be reasonable? (I can’t push it right without making the rest of the avatars look crap, unless we start having per-letter offsets – which I’ll do if I have to, but I’d prefer not to…)
  • Are there any other letters which look unacceptably wonky to anyone?

Thanks for any insights.


They definitely look better in Roboto. :+1:

I find it too off-centered…

If I want to be nitpicky, the letter “P” is kinda having the same issue as the letter “D”.


I think we should bite the bullet and have per-letter offsets. It can be a sparse array, e.g. if there is no offset specified for the letter (or number) then use the default.

1 Like

Yeah, I was thinking a hash with a default would work well enough. It won’t be too icky, just a teensy bit icky.

It looks like they are using the OLD version of Roboto. Google updates Roboto and the new one looks a lot better in my opinion. I haven’t tested the avatar letters but I’d be willing to guess a lot of these issues have already been solved in the latest version of Roboto. (look at the difference between the letter G here and in the avatar pic).


I take issue with “N” :wink:


You don’t like my new, zero-width, ‘N’? I think it looks downright spiffing. Only people named, say, @neil, would have a problem with it. :stuck_out_tongue:


Not being a font ninja, I honestly can’t see the difference, but I’m happy to take your word for it. I downloaded the font file from Google’s github repo, which was updated in March, after the new version of Roboto was announced. If that’s actually an out-of-date version of the font, I’d appreciate a pointer to a known-current version, to make sure I don’t accidentally get the wrong one again.


To me, H and U look too far to the right and 7 looks too high.

I hope that’s helpful.

Here’s an updated version of the avatars, once again with both current code and Roboto versions side-by-side:

Changes from last time:

  • Now with a letter ‘N’!
  • The ‘D’ and ‘P’ have been pushed a little to the right.

I don’t really see the H and U problems myself, but I do see what you mean about the 7. It might also be a few pixels left of optimal?


That’s fair enough, maybe it’s just me.

Looking good though :slight_smile:

We’re running with Roboto avatars on meta as of a few hours ago. I’ve just deployed a few tiny tweaks to Q, T, V, W, Y, and 7, so they’ll slowly filter out as people’s caches expire.

Thanks to everyone who contributed to making the new avatars look extra awesome!


The B looks terribly off-centered to me!


Seeing the B problem as well.

(Maybe we should calculate letter centroids and use those instead or something? I don’t know enough about fonts to tell if that’s a viable option)

I think most of the “looks off” is because of an optical illusion type of effect from the “more solid” left side and the curves and “less solid” right side in combination with being in a circle.
Despite my somewhat shaky mouse maneuvering in Paint, it does look a bit off though I have no idea what would fix it unless maybe a small tweak moving the letter down and to the left?

Though I think that would be “more correct” geometrically, I have a feeling it would look worse.


It needs to be moved down and to the right, not left.

1 Like

Now you mention it… cannot unsee…

I’ll tweak that. Not sure how it’ll need to be moved down, but moving it to the right a little wouldn’t go astray.

It’s a theoretical possibility, and almost certainly better than ImageMagick’s current algorithm (center the font image in the larger image), but I can’t find any way of doing it with IM’s feature set. It’s almost certainly less work to just tweak letter placement for the 36 forms we need to generate (the myriad size/colour combos don’t – or at least shouldn’t – have an impact on visual balance) rather than write custom avatar drawing code that’ll calculate the centroid and place the glyph correctly.

On the other hand, if we ever decide to make avatar fonts user-selectable… then that custom drawing code will be written right quick. I’m not doing hand-tweaks for placement of every font everywhere.


How did you get on with the tweaks?

Forgot to mention it here, but I did the tweaks, made everything look better, and it’s been the default on here for the past couple of weeks.