Serif Fonts in UI Design with José Scaglione from TypeTogether

Today, for the first time with a guest, I’m joined by wonderful José Scaglione. He is a type designer, lecturer, and co-founder of the high renown foundry TypeTogether, which is behind popular typefaces like Bree or Adelle. They worked with top brands, like Apple and Google, where they also contributed serif typefaces for screen rendering.

And this is why I invited José – to discuss with him the predominance of sans-serif in user interfaces and screen design more broadly. We speak about, why it might be a legacy issue, and that moving out of your comfort zone can be very rewarding. It brings us to legibility, readability, and accessibility. José also shares how he experienced the switch from static fonts to variable fonts as a type designer and foundry. If you struggle with pairing typefaces, this episode also has some tips for you.

Listen to the Podcast

Besides the video on YouTube, I also released this conversation as a podcast, since there is not really a benefit from watching it – except our pretty faces, of course 😉. You can find it on Apple Podcasts and Spotify, or simply listen to it here:

Talking Points

00:28 – Introduction
02:39 – Greeting to José Scaglione
03:36 – Is the font in the TypeTogether logo overused?
06:01 – Don’t use tabular figures on business cards
07:27 – Benefits of learning about typography
09:49 – Why is sans-serif dominant in UIs?
13:02 – Legibility, regardless of sans or serif
15:34 – Why are neo-grotesques so popular?
17:08 – Arguments against neutrality & Helvetica
18:57 – Portada: A serif typeface for UI design
20:39 – Complexity of printing vs screen
24:30 – Variable fonts and optical sizing
27:57 – Variable fonts and file size
29:37 – Do you need the design space of VF?
31:31 – Belarius: Slab serifs in UI design
35:40 – Accessibility and typography
42:38 – Advice for typography newbies
43:20 – Tips on pairing typefaces
45:26 – Rapid Round of questions
47:11 – Goodbye
48:18 – Summary

Featured typefaces

The TypeTogether logo type on which Bree is based on

Bree the very distinct, friendly and gained large popularity in the late 2000s. This is why it is also a bit overused 😉

Portada is a serif type family and icon set that’s as clear and readable as a sans in restrictive digital environments.

Literata was originally created as the brand typeface for Google Play Books. It exceeds the strict needs of a comfortable reading experience on any device, screen resolution, or font size.

Belarius is a three-axis variable family that shifts from sans to slab serif, from condensed to expanded widths, and includes every possibility in between.

Quotables

“Don’t use tabular figures for business cards. You would end up with a big gap between the 1 and the 0, you don’t want that.”

“As graphic designers, we try to make communication more efficient, not just beautiful. Most of the things will require written language. So knowing about typography is like knowing how to use a hammer for a carpenter. It is really one of the most basic tools that graphic designers and communicators use every day.”

“Regardless of serif typefaces, you have to look for fonts that look good in small sizes. Closed terminals, narrow letters always look bad, on screen and on paper. The principles of legibility are very similar on both mediums.”

“Where you don’t have continuous reading, you have to be clear about the message and text.”

“The popularity of neo-grotesque sans-serif has come and gone through the years. It will go away, and it will come again, for sure.”

“There is nothing inherently good about neutrality, if you think about it. And I would argue if Helvetica is neutral or not.”

“Using a serif typeface for a UI would move designers away from their comfort zone. But looking for new solutions can be very rewarding.”

“Type size and contrast are the most important for accessibility. Even more important than sans or serif.”

“For proper paragraph reading, serif typefaces are still my number one choice.”

“Try to combine serif and sans in different roles. Combine typefaces that speak the same language in terms of how organic they look. If they look machine made or handmade.”

Links

TypeTogether’s Website
José Scaglione on Twitter


What did you think about or conversation? What was the most interesting part to you? Happy to read it in the comments below!

Typographic power to your inbox

  • Font Friday: I recommend one typeface per week, free fonts included.
  • Type Tuesdays: articles & videos that up your design game.
  • Join 2500+ typography enthusiasts, unsubscribe anytime.

Leave a Reply

Your email address will not be published. Required fields are marked *