Apple’s systematic off-centering

Centering a shape on a plane — say: centering a number, a letter or a symbol on a virtual key — is fairly easy; if you work at any company, which doesn’t give a sh*t about user experience and design.

The easy way

Around every shape is an invisible box, limiting its borders:

Captial E with box

Calculate the box’s centroid and fix it on the plane’s centroid and you have done your job.

This doesn’t need to look bad. If the box around every letter are nearly equally sized and therefore the letters are of roughly equal proportions, this looks really nice and tidy; as it does on the standard iOS-uppercase-keyboard.

The good way

If your letters, numbers or symbols aren’t equally sized you get a complete mess as lined out vertically by Eli Schiff’s Keyboard Smörgåsbord:

Zack Isaac’s demonstration how wrong the lower-case iOS 9 keyboard is centered

This mess isn’t the first time, Apple has been called out for being lazy centering their characters. Gizmodo ran and documented the crusade against the infamous off-centered-1 in the calendar app’s preview. The 1 appeared off-centered, because the eye had reference points in form of the day’s name on top and while identifying the name as one word — which was centered — and not individual letters, it expected the 1 to be centered as well.

Our eye is trained in the real world, where centering is not done with a box, but determined by the shape and mass-distrubtion of an object. Therefore our eye expects the “heavier” part of an object to account for more influence on the center of gravity.

For letters the areas with more mass are the ones with more “ink”. Centering a lower-case f pleasingly, means centering it more to the right than a computer would expect it to be based on its outlining box.

Expectations

If a company sells their products based on design and user experience I think it can be expected to go the extra mile and choose the right way to center an object.

I missed the lower-case keyboard on my iPhone, ever since I switched from Android. But since this mess triggers my OCD I can’t help but publish following advice:

Go to Settings -> General -> Accesibility -> Keyboard and turn Show Lowercase Keys off.

Like what you read? Give Lennart Grabowski a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.