UIs are not simple, but in a limited and literal way, they can be superficial—particularly in websites, there’s a fairly reliable boundary between front-end code (what someone sees when they use a site in a browser) and back-end code (the program that answers requests from browsers).

Now that I’m thinking about it, there’s something kinda weird about the way I build stuff. A lot of people—certainly everyone I’ve ever worked for—want their UIs to look good, and to feel good to use, and in general to be as polished and pleasant and accessible as practical. It feels weird to say that I don’t share that goal—it’s a good goal—but I kinda…don’t?

I want my UI to be an accurate reflection of the state of the underlying system, as I understand it. That is, when the underlying system is a bit messy, a bit unstable, I want the UI to signal that accurately. It feels dishonest for me to make a UI pretty and inviting if I feel like the underlying system is unsound^[1]. All of which is partly a lame excuse for letting the UI of this blog languish for so long, and partly my secret hope that other practitioners feel the same way. I think we’ve all worked on systems with pretty UIs and thought, “If they only knew what this looks like behind the scenes…”

Anyway, as I mentioned in my last post, I finally got to a point where the UI was honestly worse than my experience of the system as a whole, which meant that I could spend time on a makeover without feeling bad about it. So I did what I usually do when I’m trying to make something look like what I think other people think is “good”—I went and found a bunch of examples of reading and authoring UIs and I wrote down what I observed about them. I wanted to get a sense of “how people do authoring UIs” without deferring to my own sense of which ones are good or bad. I looked at the reading UIs on substack, medium, and the new york times, along with the authoring UI on medium, as representatives of popular longer-form services. For shorter-form services, I looked at instagram, tumblr, twitter, and linkedin.

All of the services I categorized as “longer form” use serif typefaces; all the shorter form ones use sans. The main text font-size on the shorter-form sites are smaller than the longer-form sites^[2]. However, almost all of the sites used a text size that ended up being around 10 words per line of text. The outliers were nyt, which uses narrow columns and seemed to have closer to eight words per line, and instagram, which has a very small font relative to its column size; I counted 17 words on a line. This was all very unscientific but so were my needs. Most but not all of the sites dropped their font sizes slightly on mobile; more prevalent with the serif typefaces. Most of the sites had font-family overlap withing their category—serif or sans. The nyt’s house typeface is called “nyt-imperial” which I feel gives the game away a bit. All the sans-serif sites included “Segoe UI” in their font stack, which turns out to be the name of Microsoft’s sans-serif UI typeface.

The only service that allowed much customization was tumblr, which seems to let individual bloggers control the look of their own blogs. That seems cool as a feature but in terms of “survey of massively-popular UIs” it muddies the water a bit—I ended up not really being able to characterize a prevalent style there.

One fascinating thing I noticed was that, when viewing the instagram website on Firefox in “iphone mode,” most of the UI appeared to be rendered in a single, empty div tag. If that’s true and not just my browser acting up, that would mean that the whole site on mobile is more-or-less a single image, controlled pixel-by-pixel with javascript. That would be an if-I-knew-I-could-get-away-with-it kind of eyebrow-lifting decision if ever there was one. EDIT: I revisited this because it seemed just…really unlikely. It turns out to be a bit less interesting. What the site is actually doing seems to be using a big transparent element on top of a lot of smaller absolutely-positioned elements.

The final construction detail I noticed was that out of all of the sites, only linkedin seems to use CSS grid for positioning. The rest mostly use a lot of nested flex boxes. That was interesting because when I started building my own UI I expected to use grid, but in every case the nested flex box approach turned out to be easier. I expected that fulltime professionals might skew toward grid; not, apparently, the case.

I’m glad I looked at these examples. I never would have thought of 18px as a normal font-size for authoring, but having tried it I’m happy with the decision. I also made the text columns narrower—I was aiming for around 12 words per line. I think overall I’m satisfied with the authoring experience I’ve built, which I’ll be releasing with the alpha in a few weeks. A lot of my next challenges—something like a “news feed,” comments, etc—are going to involve similar UI capabilities, so I’ll need to internalize some ways of thinking about them.