Even the finest of details can be important

Posted 28th February 2020 in Brand and Design

Since my post on refining my brand, I’ve encountered a tiny issue that I wasn’t able to ignore.

With a circular crop, which is what services like Twitter do, the 8 × 8 grid the icon uses leaves the rectangular underscore too close to the edge of the circle. I mean, it looks fine, but it could be better.

The position on the x-axis is fine; it’s the height. It just needs lifting slightly. Lifting it a row on the 8 × 8 grid is too much – that brings the top of the rectangle onto the centre, which is too high. Half of that amount works really well, which is where a 16 × 16 grid comes in.

The tempertemper icon before switching to a 16 × 16 grid, where the underscore sits too close to the edge of the circle, and after, where it's positioned nicely

It’s worth mentioning that the 16 × 16 grid doesn’t quite work on a square or rounded square canvas, so I won’t be switching to the new grid completely. The 8 × 8 grid is perfect for those uses – super simple and nicely positioned/proportioned.

But where I know a service will display my icon on a circular canvas, I’ll be using that 16 × 16 grid in order to raise the underscore up a tiny amount. It’s a shame there isn’t a one-size-fits-all, but if a service that currently uses a square avatar switches to a round one (or vice versa), it’s not the end of the world – the icon still looks fine; just not perfect.

I can feel my team-mates’ eyes rolling whenever I pick out minutia like this on the Government services I work on, but I’ll happily continue to do so – attention to detail can have a big impact on the confidence users have in the products we ship.

Accessibility in your inbox

I send an accessibility-centric newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. Alt text for CSS generated content

    There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.

  2. The accessibility conversations you want to be having

    In most companies, accessibility conversations centre around WCAG compliance, but that’s just the start. Thinking beyond that is where you want to be!