Input Needed: Letterspacing on An Elevator Panel

Well, technically number spacing. I'm working on a project that involves the design of a very post-modern elevator panel, which, as you can see, has been set in Gotham (with counters filled) on a diagonal grid. Within each cell, the idea is that the letters are right-aligned and intersect with the bottom edge:

The problem is the 1/4/7 column. Every other number has a relatively even, boxy shape that was easy to center. But my original plan was to align the right edge of 1, 4, 7 with each other vertically, then raise them to the same vertical height as the midpoint of the other numbers in their respective rows. My thinking is illustrated here:

While this makes some sense logically, the result (as seen in the first image) clearly doesn't look right. The 7 in particular has an awkward amount of negative space that isn't being addressed at all. To rectify this, I've created a new layout that moves the 1 and the 4 up a bit higher and pushes the 7 back to compensate for all the space:

At this point though, I don't trust my eyes and am just looking for some fresh-eyed feedback. Any input you might have on the fixed version of the layout would be great.


hrant's picture

You need to "fix" Gotham's numerals.


J Weltin's picture

Have you tried to use slanted numbers and bringing them upright? I’m not fully convinced about the top situation of 1, 3, 5, 4 an 7. Especially the different parallels of the slanted shape and the 1. 4 would need to be redrawn, especially the situation below right is unsatisfying. I would pull down the 7 more out of the shape. And overall i find the deleted counters not a good treatment, because thus some numerals tend to be more important than others. And is there a zero floor?

Jean Paul Beumer's picture

I'd do it like this...

J Weltin's picture

That’s what i meant.

Jean Paul Beumer's picture

I think I was quicker putting it together compared to typing text ;-)

Jean Paul Beumer's picture

BTW, I would move /4/ slightly to the right. I made this in Illustrator, with all numerals aligned to the right.

J Weltin's picture

Yes. And the curves don’t look right and 8 is falling to the left.

William Berkson's picture

I don't see the point of right alignment, and it exacerbates the problems with vertical alignment of proportional numbers. The 'help' is centered, inevitably it seems. Also the filled counters throw off the balance of the numbers with one another. This needs to be rethought to get a good solution IMHO.

amv's picture

Awesome, thanks so much for the feedback guys. As always it's much appreciated.

To provide a little perspective, I've uploaded a picture of how this layout is actually being used in the "real" elevator environment:

With this image in mind, I'd like to respond to the comments so far. And I apologize in advance; I'm sure this will all sound like very transparent rationalization and excuse-making. :)

1) The counters aren't being filled in for a stylistic reason, or at least not for a "directly" stylistic reason. As I think is clearer in the supplied image, the buttons are intended to have a very industrial, precision-machined feel to them, and casting them in a single piece of metal conveys that better than including separate, floating pieces in the counters. With the metal finish and the backlighting behind each button, I hope this looks more like a deliberate decision on a manufacturing level, if not a typographical one.

2) I really appreciate the version of the layout with the skewed numerals. I agree, the layout is much more stable and consistent that way, and certainly easier to align/balance. Ultimately, though, one of my favorite parts of the diagonal buttons is the way the non-diagonal numerals contrast in their directions; alignment headaches aside, I think the vertical numerals generate interesting intersections with the angled edges of the buttons. The numbers almost appear to be "emerging" or "rising up" from the bottom of the buttons, rather than "sinking" along with them. For an elevator, I think this is an appropriate connotation.

Also, on a purely optical level, I want to avoid the typical artifacts that affect the curves of algorithmically skewed letterforms.

3) William's comment about the right alignment being problematic and unnecessary is true and not really one I can argue against. However, this was another case where I found the center alignment a bit bland (with the exception of "HELP", where it was simply unavoidable and, in my opinion, an acceptable exception since it's the one non-numeral). The right alignment, which I agree is a minefield and not hugely obvious in its necessity, ties back into the underlying elevator notion of up/down motion; my intent was to create a sense of lift in each letter, and by pushing the numerals to the highest point within each button (which just happens to be the right side), I think I capture a little more of that. In a lot of ways they almost resemble a person riding an escalator, which isn't EXACTLY appropriate for an elevator, but close enough. :)

In other words, everything above is my way of saying that while I agree with all the practical and aesthetic arguments against the layout, these decisions play too heavy a role in my conception of the elevator concept to abandon, leaving me no choice but to make the best of them. So I've made some slight modifications to the 1/4/7 column that I think balance things out about as well as can be expected given the admittedly stubborn requirements listed above. In particular, the /1/ and /4/ numerals are now centered with the /7/ beneath them.

There's probably still a lot to nitpick about the exact placement of everything, but I think overall this works well enough. Considering how awkward the premise of the layout is to begin with, "good enough" seems acceptable to me.

Lastly, you'll notice that unlike the buttons, the array of 7-segment displays (the digits on the screen) is slanted along with the shape of the screen itself. This is arguably a pretty blatant inconsistency, so I'm going to experiment with a non-slanted version. (I just wanted to point that out preemptively :)

Anyway, this process was extremely helpful, even if we don't have the same ultimate opinion on things, so thanks again! I really do appreciate the feedback either way. Additional commentary is still welcome, btw.

J Weltin's picture

If you think it’s perfect how you made it, why ask for second commentary?

hrant's picture

Because even artistes posing as designers need to exhibit their work.


amv's picture

I certainly didn't say anything was or is perfect. Quite the opposite, in fact; my whole point was that it's a very awkward premise to begin with and there was probably never going to be a perfect way to balance my own ideas for the design with the more typographically graceful solutions you guys provided. But I still wanted to give it a shot and at least know for sure. That's why I said that even though I ultimately more or less stuck with the design I had, I still found this process very valuable.

And come on, I love Typophile, but this would be a very odd way to "exhibit" my work if that's what I were after.

hrant's picture

Maybe I was too harsh.


owiecc's picture

You will need custom skewed 7 segment displays for this project.

dumpling's picture

Why do I get the feeling the "HELP" button will be the one that gets most often used?

It would look less terrible (but maybe still terrible) if the 7-8-9 were on top. This way, the digits would be arranged from bottom to top in order from least to greatest, including on each slanted row.

If you really want to be an "artiste", use the Lo Shu.

toshiraw20's picture

Positive site, where did u come up with the information on this posting? I have read a few of the articles on your website now, and I really like your style. Stairlift Prices I liked this blog man. This information is very important. I will suggest you to my other friend.

Albert Jan Pool's picture

Question: Is this an input panel and is the floor number displayed by the four digit number above?

on a purely optical level, I want to avoid the typical artifacts that affect the curves of algorithmically skewed letterforms.

I second the design with the skewed numbers. You could consider to take the italic and skew it slightly to get the right angle. The visual distortion you then get will only be a few degrees. Much less then when you take the roman and skew it to the desired angle.

Syndicate content Syndicate content