What Twitter’s Chirp taught us about the importance of web font type design

Twitter’s new user experience with its Chirp font has netizens making memes, fuming about an unpleasant experience, and complaining about headaches. We speak to a few UX designers about why typography in online spaces matter

August 18, 2021 05:44 pm | Updated August 19, 2021 11:26 am IST

A tweet showcasing the new Chirp font and the redesigned ‘Tweet’ button

A tweet showcasing the new Chirp font and the redesigned ‘Tweet’ button

Over the past few days, the word ‘chirp’ became a source of chat for netizens. Twitter’s opinion-dividing font named Chirp was rolled out to its app and feed during the week of August 10. The quirky type incensed many netizens who could not figure out why they hated the font or even why it gave them headaches. This naturally fuelled a groundswell of online searches such as ‘why does font design matter’ or ‘why do I feel queasy reading a certain font.’

(Subscribe to our Today's Cache newsletter for a quick snapshot of top 5 tech stories. Click here to subscribe for free.)

Fonts matter. In the context of tone, it relies on the placement of each pixel within a letter or character which then forms the design and structure of the type itself.

Jay Dutta, Senior Vice President of Design at GoMMT (Goibibo and MakeMyTrip), is grateful that all this has transpired. Why? “Because, otherwise, we wouldn’t be having the conversation,” he laughs over the phone from Bengaluru. Jay, who is also the founder and curator of DesignUp Conference, wants design dialogue, including a discussion around typography, to be accessible to people at all levels.

The official tweet confirming the font change

The official tweet confirming the font change

A shifting dialogue

“Users never really noticed or thought much about the old Twitter font,” says Jay. He further explains, “So when a user encounters something new visually, the reading experience is not as easy as before — and that is just for someone reading English. Now look at a language with many other characters involved, like Arabic or Cyrillic.If the default operating system (OS) font had been replaced very suddenly, the incompatibility for the reader is heightened.” Twitter, however, has confirmed that font in other languages will stay, the same and Chirp applies to Western texts.

As per Twitter’s January 2021 blog post ‘Imperfect, by Design’ penned by Global Executive Creative Director Donna Lamar, the choice to implement Chirp across verticals was because “[the font] strikes the balance between messy and sharp to amplify the fun and irreverence of a Tweet, but can also carry the weight of seriousness when needed.” Meanwhile, Derrit DeRouen, Twitter’s Creative Director of Global Brand also tweeted, “In the history of the company we’ve either relied on someone else’s typeface, from SF Pro and Roboto, to Helvetica Neue in our brand.”

Chirp font display, as tweeted by Derrit DeRouen, Twitter’s Creative Director of Global Brand

Chirp font display, as tweeted by Derrit DeRouen, Twitter’s Creative Director of Global Brand

But not everyone agrees with the new choice and just like art, type is subjective.

Agreeing with this, Jay also elaborates on a very print-centric term: greys, where a page is very text-heavy. “There is a science to it but it is also an art. This helps you read more and that is why a UX, like that of Twitter, is typographically heavy. There’s a beautiful saying by typographer Beatrice Warde where she basically says type is like a crystal goblet that should hold all your content but be transparent. In the case of Chirp, which is derived from Franklin Gothic, the content and the container are fighting with each other and the user will think ‘the type is messing with my attention!’ Though you are reading tweets that are essentially short-form content, the scrolling makes it a cumulatively long-form experience.”

Read More | How infinite scroll is disrupting social media spaces

Thanks to the advent of doom-scrolling (earlier known as the less aggressive term ‘infinite scrolling’), platforms such as Instagram, Facebook and Twitter are not geared towards short-term consumption — 10 minutes or one hour — but rather several hours continuously.

Many people may agree with Jay as he feels Chirp would have better readability with more line spacing; just as the structure of the font matters, so does the space around it. “However, in the online world, this would mean more scrolls for the user (if you were scrolling 20 times before, you’d scroll 24 times with the added line spacing), and this is a trade-off designers have to make at some point. An example of this decision being taken can be seen with Medium where they have thought about this a lot,” he avers.

The Dark Mode conundrum

Jay also points out that with more smartphones and web experiences letting users opt for a Dark Mode, the text may look heavier which adds to the density of greys on a page. This is interesting, given the human eye is used to dark type on a light background to mimic ink on paper.

Read More | Dark Mode on devices may not save much battery life, study says

In a blog post titled ‘How to Design Dark Mode: A 2021 Guide for Mobile App Designers’, Pooja Chawla, Delhi-based Appinventiv’s Team Lead UI/ UX Designer, writes, “When a dark mode is designed incorrectly, it causes eye strain and makes reading in low light more difficult. The low brightness of this theme creates a sense of security in a dark environment. As a result, when creating gloomy themes, make sure they’re enjoyable, balanced, and readable.” This also pertains massively to font choice, as mentioned by Jay.

Additionally, we are seeing more online platforms and operating systems allowing users to customise fonts. Many UX designers think this does more destruction than disruption to the reading experience. With this setting on some Android devices, the UX of installed apps such as Instagram and Twitter will reflect those settings.

So, what makes a good font?

Andre Rodrigues, a product and UX designer in Bangkok, says the success of a font depends on several factors, the first being interaction readability. “You have to consider how well this font stands out against different colours of interactive buttons which, in this case, is the Twitter blue. The second factor is ‘universal browser render ability’ which is how this font renders on browsers as well as on different zoom sizes. Then there’s ‘accessibility’ for the inclusivity of users with visual impairments or motor-cognitive disorders. In this context, the colour contrast seems to be a big issue that could trigger photo-sensitive users. Finally, there’s ‘scan-ability’ where users don’t read but rather skim or scan, and then focus on what to read. So font choice matters here.”

Read More | Twitter responds to user complaints about website revamp

Aesthetically, fonts when italicised or made bold should also have reasonable negative space and not ‘bleed’ which has happened with some of Twitter’s redesign. On a more holistic level, Jay adds, a successful font should not disrupt horizontal and vertical spacing. “Yes, you do need type to be seen and heard and flex its visual muscles. Good type is where a designer understands the relevance of type for the right set of users and uses it appropriately in a given context,” he concludes.

Twitter recently confirmed they will work on amending the update to suit users with sensory issues and those prone to migraines.

0 / 0
Sign in to unlock member-only benefits!
  • Access 10 free stories every month
  • Save stories to read later
  • Access to comment on every story
  • Sign-up/manage your newsletter subscriptions with a single click
  • Get notified by email for early access to discounts & offers on our products
Sign in

Comments

Comments have to be in English, and in full sentences. They cannot be abusive or personal. Please abide by our community guidelines for posting your comments.

We have migrated to a new commenting platform. If you are already a registered user of The Hindu and logged in, you may continue to engage with our articles. If you do not have an account please register and login to post comments. Users can access their older comments by logging into their accounts on Vuukle.