iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
🔤

Improving the Visual Aesthetics of Alphanumeric IDs

に公開

Looking at individual incident pages on Cloudflare Status, I felt that when IDs are assigned using random (?) alphanumeric characters, the strings look cluttered and aren't very appealing.

https://www.cloudflarestatus.com/incidents/k9ppxftx8bs5

In Zenn's case, it uses 16 HEX characters (0-9, a-f), so since there are no letters with descenders, they look more uniform. To compensate for the higher probability of collisions, these IDs are 14 characters long—two characters longer than Cloudflare Status's IDs.

https://zenn.dev/15/articles/b7ae9f25ffac75

I wondered if I could change the appearance even further by restricting the character set, so I tried creating IDs using only characters that fit within the x-height. I made them 14 characters long, just like Zenn, but since there are only 13 character types, collisions are even more likely.

https://example.com/articles/oasrmunxecavom
https://example.com/articles/szvomecarnuxwo
https://example.com/articles/cawxerumozsvan

Looking at it this way, when everything is composed of characters that fit within the x-height, it is difficult to distinguish the differences between each ID at a glance.
HEX might be better as it strikes a good balance between character variety and visual appearance, providing high legibility.

Discussion