Letter avatars issues with circular profile images


(Michael Downey) #1

Looks like some of the auto-generated profile images with the letters aren’t happy with the new circular shape. Centering issues for some, and whitespace issues on other wide ones like “W”. Especially pronounced with round letters like “C” or “O”.

This is not extremely pronounced but someone detail-oriented might like to work on it.

A few examples:


(Jeff Atwood) #2

If they are not centered in the circle they were not centered in the square either.


(Michael Downey) #3

True. There is some typographical & design theory around this but I believe it’s due to the shrinkage of whitespace that it becomes more noticeable, particularly when the eye is drawn to what it perceives should be parallel curves (e.g. “O”).


(Jens Maier) #4

It’s partially visual appearance, partially actual misalignment. The characters should extend an additional 1px to the top and right (or, probably better, 1px less to the left and bottom). Also, the font has curved characters dip slightly below the baseline:



(Michael Downey) #5

FYI, this (descenders) is standard practice for most typefaces. The overall size might need to be reduced, too, to accommodate sufficient whitespace around the “W” (pretty much always the widest letter).


(Jens Maier) #6

Yeah, I did read up on typography when I was fussing with :smile:

(By the way: the logo is surprisingly hard to google… brb, nuking my search history. :blush:)


(Régis Hanol) #7

Ok, let’s try this and see how it feels

https://github.com/discourse/discourse/commit/266f3d677d3cbcef470eeb9f4719de2f44a36c26


(Michael Downey) #8

Definitely an improvement!