Improvements to Typography and UI

We've rolled out another big update. This time it's about typography and UI enhancements to SupportBee.

Typography is not just about a font change, it's about everything the font affects. If there's a box in which the font needs to be contained, how does the font look in the box? What should the font-size in the box be? How wide should the box be? It's a lot of elements that contribute to an update as significant as this and we'll speak about our process in implementing this change.

We use SupportBee ourselves and while using it we figured out that although the product is usable, it dint feel right. Something seemed amiss. This, coupled with us wanting to extend language support for our product, made us rework the typeface we were using and get some consistency in the User Interface of the product.

How did we go about choosing our font?

First step in the process was picking the right font. In support, we and our customers deal with a lot of tickets and replies, in turn, dealing with text heavy content. And this being the case, we had to pick a font which offered good legibility and readability. We experimented with a bunch of fonts in the design phase and after tons of discussion, we ended up choosing Proxima Nova.

Here are some of the reasons,

  • Weights, Proxima Nova has 7 weights and 3 widths which help in giving a nice transition between hierarchical data
  • Large x-height increases legibility of individual characters
  • Extensible character set
  • Cross Browser rendering works like a charm, Browser samples
  • Generous spacing between letters
  • Simple and clear letter-forms
  • Good readability on smaller resolutions
  • Typekit had it!


Here's the entire Font specification

After choosing Proxima Nova

Once we finalised 'Proxima Nova' as our font, it was time to implement it... correctly. In our pursuit of doing so, we came across this fantastic List Apart article about More meaningful typography.

With the extensive character set that 'Proxima Nova' has to offer and the font being available on typekit, helped us support multiple languages. Here's the article which enumerates Support for different languages on Typekit

How did we choose our scale?
Here's our Modular scale

The font readability is crisp at 16px and we chose it as our ideal text size as the first parameter for the modular scale. The second parameter of the modular scale is an important number for which we chose a number/size(24px). We used this number for headings to clearly differentiate between the various types of tickets in the SupportBee application.

We didn't want a large difference between our font size, hence, we stuck to the 1:1.618 ratio.

Here's a nice article which gives Tips for choosing a scale

As the List Apart article rightly points out

Modular scales are a tool, they’re not magic.
They’re not going to work for every measurement, and that’s okay.
Math is no substitute for an experienced designer’s eye, but it can provide both hints and constraints for decision making.

We used the modular scale simply as a 'helper tool' more than anything else and we're quite pleased with what we've put out as a first cut for the type change.

UI Consistency

We didn't just want to roll out a type change. We wanted to roll out a change that'll make you sit back and take notice. SupportBee has had a lot of changes, big and small, in this update and it will only get better.

Everything has been tightend up just that much to make it feel just right.

What's in the pipeline

We're by no means done and as a matter of fact, we're only getting started. You'll be seeing loads of improvements. SupportBee will look, feel and work much better as a product.

SupportBee is looking for full-time designers and design interns. If you would like to work with us, please drop a line at workwithus@supportbee.com or you could even get in touch with us on twitter, our handle is @supportbee.