1

Visual design is part of user experience design, hence its safe to ask question related to visual inconsistency on this platform.

Question

If anyone of you has used the new google task application, then you might have came across a inconsistent mix of Roboto and Product sans fonts in the application.

For example, when entering a new task, the name of the task is set in Product Sans; when it is added to the list, it becomes Roboto. Tapping on the task takes you to a details view where, now, the name of the task is in Product Sans. There are three options to add more information: if you want to add details, you'll do it in Roboto, but adding a due date will be in Product Sans. The "add subtasks" button -- well, text in the same grey as everything else except other buttons that are blue -- is set in Product Sans, but the tasks are set in Roboto.

What are your views on this inconsistent usage of fonts?

1

In its original (and current) form, Material Design uses typographical cues to set apart buttons from text: Material buttons have medium weight, are written in all caps, and often have a distinct color from the rest of text.

The new GMail and Tasks app, as well as the in-progress Android P, are based on different typographical rules. Buttons now seem to be sentence-case, but in a distinct font (Product Sans) from the rest of the UI (Roboto). All headings seem to be rendered in this font as well.

It seems that there are patterns to this use of typography and I expect Google to announce clear guidelines on it soon. From my limited usage, I don't think it's inconsistent internally.

That said, my personal take on the change from using GMail is that buttons are harder to recognize than before, as important distinguishing cues have been removed. Now that headings and buttons use the same typography, one can't rely on font alone to make a judgement. Making matters worse, Roboto and Product Sans are not that dissimilar, so it takes a bit longer to recognize which one is used. Color isn't a reliable cue—many buttons are gray. And capitalization is no longer used as a cue.

Time will tell whether it's a problem, though. Links have also lost its key distinguishing factors as time went on (blue color, underline), but we're still all able to use the web.


Update May 13, 2018:

At this year's Google I/O, Google expanded Material Design system to allow room for alternative "themes"—visual tweaks that communicate the brand without going against Google's research-based recommendations. What you see in the new Tasks application, the new GMail, or Google's upcoming Android P ROM for Pixels is Google's own custom theme that they're rolling out across its products. Here's a detailed blog post on the topic from their design team.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.