# Change letter avatar font to Roboto?

**URL:** https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918
**Category:** UX
**Created:** [9월 30, 2015, 9:33오전 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918 "2015-09-30T09:33:30Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![mpalmer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mpalmer/32/45740_2.png) [@mpalmer](https://meta.discourse.org/u/mpalmer)
#### Post date: [9월 30, 2015, 9:33오전 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/1 "2015-09-30T09:33:30Z")

</div>

@codinghorror thinks that the [Roboto font](https://www.google.com/fonts/specimen/Roboto) 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)😄

 ![](https://global.discourse-cdn.com/meta/original/3X/f/2/f2f286bf91852bbf51bed36905e55838f36f725d.png)

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.

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [9월 30, 2015, 9:38오전 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/2 "2015-09-30T09:38:40Z")

</div>

> [@mpalmer](#):
>
> Do the avatars look better in Roboto than Helvetica?

They definitely look better in **Roboto**. 👍

> [@mpalmer](#):
>
> Is the ‘D’ off-centre too nasty to be reasonable?

I find it too off-centered…

> [@mpalmer](#):
>
> Are there any other letters which look unacceptably wonky to anyone?

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

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [9월 30, 2015, 9:49오전 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/3 "2015-09-30T09:49:55Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![mpalmer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mpalmer/32/45740_2.png) [@mpalmer](https://meta.discourse.org/u/mpalmer)
#### Post date: [9월 30, 2015, 10:54오전 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/4 "2015-09-30T10:54:56Z")

</div>

> [@codinghorror](#):
>
> if there is no offset specified for the letter (or number) then use the default

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

---

<div class="post-metadata">

### Author: ![rickdmer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rickdmer/32/116792_2.png) [@rickdmer](https://meta.discourse.org/u/rickdmer)
#### Post date: [9월 30, 2015, 1:10오후 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/5 "2015-09-30T13:10:37Z")

</div>

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. [https://www.google.com/fonts/specimen/Roboto](https://www.google.com/fonts/specimen/Roboto) (look at the difference between the letter G here and in the avatar pic).

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [9월 30, 2015, 4:28오후 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/6 "2015-09-30T16:28:27Z")

</div>

> [@mpalmer](#):
>
> Are there any other letters which look unacceptably wonky to anyone?

I take issue with “N” 😉

---

<div class="post-metadata">

### Author: ![mpalmer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mpalmer/32/45740_2.png) [@mpalmer](https://meta.discourse.org/u/mpalmer)
#### Post date: [9월 30, 2015, 10:28오후 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/7 "2015-09-30T22:28:18Z")

</div>

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

---

<div class="post-metadata">

### Author: ![mpalmer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mpalmer/32/45740_2.png) [@mpalmer](https://meta.discourse.org/u/mpalmer)
#### Post date: [9월 30, 2015, 10:34오후 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/8 "2015-09-30T22:34:04Z")

</div>

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](https://github.com/google/fonts/tree/master/apache/roboto), 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.

---

<div class="post-metadata">

### Author: ![Bones](https://avatars.discourse-cdn.com/v4/letter/b/a88e57/32.png) [@Bones](https://meta.discourse.org/u/Bones)
#### Post date: [10월 1, 2015, 11:25오전 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/9 "2015-10-01T11:25:53Z")

</div>

> [@mpalmer](#):
>
> Is the ‘D’ off-centre too nasty to be reasonable?

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

I hope that’s helpful.

---

<div class="post-metadata">

### Author: ![mpalmer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mpalmer/32/45740_2.png) [@mpalmer](https://meta.discourse.org/u/mpalmer)
#### Post date: [10월 1, 2015, 11:33오전 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/10 "2015-10-01T11:33:45Z")

</div>

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

 ![](https://global.discourse-cdn.com/meta/original/3X/7/6/766ac158435361458f191f3a896ffcf71243fdeb.png)

Changes from last time:

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

> [@Bones](#):
>
> To me, H and U look too far to the right and 7 looks too high.

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?

---

<div class="post-metadata">

### Author: ![Bones](https://avatars.discourse-cdn.com/v4/letter/b/a88e57/32.png) [@Bones](https://meta.discourse.org/u/Bones)
#### Post date: [10월 1, 2015, 12:19오후 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/11 "2015-10-01T12:19:39Z")

</div>

> [@mpalmer](#):
>
> I don’t really see the H and U problems myself

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

Looking good though 🙂

---

<div class="post-metadata">

### Author: ![mpalmer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mpalmer/32/45740_2.png) [@mpalmer](https://meta.discourse.org/u/mpalmer)
#### Post date: [10월 1, 2015, 10:37오후 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/12 "2015-10-01T22:37:39Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![Moter8](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moter8/32/120941_2.png) [@Moter8](https://meta.discourse.org/u/Moter8)
#### Post date: [10월 3, 2015, 9:42오후 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/13 "2015-10-03T21:42:52Z")

</div>

The **B** looks terribly off-centered to me!

 ![WSgvLOE](https://global.discourse-cdn.com/meta/original/4X/9/0/6/906f0e6950f6cdfa165b04d0915b4c2b59bc99f0.png)

---

<div class="post-metadata">

### Author: ![nightpool](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nightpool/32/121298_2.png) [@nightpool](https://meta.discourse.org/u/nightpool)
#### Post date: [10월 4, 2015, 12:31오전 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/14 "2015-10-04T00:31:29Z")

</div>

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)

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [10월 4, 2015, 12:54오전 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/15 "2015-10-04T00:54:40Z")

</div>

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.

 ![](https://global.discourse-cdn.com/meta/original/3X/c/5/c5ac7470641d12306beb458f984b2532f801a777.png)

---

<div class="post-metadata">

### Author: ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)
#### Post date: [10월 4, 2015, 1:44오전 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/16 "2015-10-04T01:44:55Z")

</div>

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

---

<div class="post-metadata">

### Author: ![mpalmer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mpalmer/32/45740_2.png) [@mpalmer](https://meta.discourse.org/u/mpalmer)
#### Post date: [10월 4, 2015, 10:50오후 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/17 "2015-10-04T22:50:21Z")

</div>

> [@Moter8](#):
>
> The B looks terribly off-centered to me!

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.

> [@nightpool](#):
>
> Maybe we should calculate letter centroids and use those instead or something?

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.

---

<div class="post-metadata">

### Author: ![Martin\_Bansey](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@Martin\_Bansey](https://meta.discourse.org/u/Martin_Bansey)
#### Post date: [10월 19, 2015, 3:51오전 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/18 "2015-10-19T03:51:55Z")

</div>

> [@mpalmer](#):
>
> 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.

How did you get on with the tweaks?

---

<div class="post-metadata">

### Author: ![mpalmer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mpalmer/32/45740_2.png) [@mpalmer](https://meta.discourse.org/u/mpalmer)
#### Post date: [10월 19, 2015, 8:04오전 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/19 "2015-10-19T08:04:43Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [10월 24, 2015, 4:35오전 UTC](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918/20 "2015-10-24T04:35:43Z")

</div>


