ct-blog flight hotel local

[Design Nuances] Cleartrip now feels more at home

Cleartrip has always stood for attention to detail; Be it pixel fitted icons or the small little touches that makes the booking experience delightful. Today we would like to share a similar nuance where we’ve tried to make design invisible by changing typeface of our products.

After years of using Helvetica, we are moving into a more native family of fonts. Not that we have such an extreme opinion about Helvetica, but clarity is the first and most important characteristic of good user interface design.

So here is what we have done. Users will now see Cleartrip desktop site in their platform native typefaces, much like our App. Which means, Windows users we will see Cleartrip in Segoe UI, Apple fanboys will enjoy San Francisco and so on…

Native fonts on Cleartrip

Reason # 1 — Feel at home

Each native platform has done a fair share of research (Apple, Android, Windows) and offer best-practice approaches to navigation, typography, and more. Websites and apps that follow these guidelines feel like a natural extension of the host operating system. The primary reason for us to go with native typefaces is to give every user a more platform specific experience; there by concentrating more on the content than the ornamental aspects.

Which one of them is more native to windows? Certainly the one in front. Windows 7 users looking at Segoe UI

After Tuxedo, we ensured the visual language remains the same while staying grounded in the philosophy of making design invisible. Although it is a simple change, it’s actually one of our favourite design decisions since the difference is subtle but creates a huge impact on user’s comfort level.

Cleartrip homepage in different fonts

We have been following the same pattern in our app also which naturally feels more native.

Mobile-Native

Reason #2 — Legibility

For Cleartrip, our interface is actually our content, so ergonomics and readability are much more important for us than style. A good UI typeface has to be extremely clear and unambiguous in smaller sizes. We don’t want our users to pause for even a fraction of a second to understand glyphs and shapes.

Helvetica-mess

What’s going on here with Helvetica is quite surprising. However, when it comes to flights, there are a bunch of places where the user is deciphering the text than actually reading it. We can’t afford to live with that.

Cleartrip-Bookflow

Now just half close your eyes and look at the following image.

Font-comparison

The B. O. M. in Helvetica Neue seems to be blurring and mixing with each other, while clear and spaced-out in other fonts naturally. After lot of study and reassurance from multiple projects like Windows adaptive layout, Tuxedofying Mobile web, where we played with smaller devices, the consensus was unanimous, Helvetica Neue is not the right font for interfaces.

We identified places within Cleartrip which are critical for users while consuming information, and it’s almost everywhere. So our new CSS declaration at a body level now looks like this.

font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Ubuntu, Arial, sans-serif;

Due to this font change, there are a number of instances where the experience has dramatically improved, but we hope you don’t discover them, rather enjoy our content. To conclude, here is a nice article from 2006 which still is completely relevant today, “Web design is 95% typography.”