I am currently working on an enterprise-scale web app and my team lead is wanting to follow Google's Material Design System verbatim. I think the Material system is a good starting point, but there is one specific typographic guideline that doesn't sit right with me, and I need to "prove" that we need to make an adjustment.
So in Material's type guide they offer
this type system. For the most part, I think it works pretty well, but there are several instances where I think way too much tracking is added. Specifically, for Body 1, it is specified as 0.5 for letter spacing (tracking). I'm not sure the exact dimension tied to that, but it's the measurement used in Sketch. Below is a mockup showing Roboto 16 px text set with the Material tracking dimension (0.5) on the left and no additional tracking on the right.
Edit: Screenshot is displayed smaller than actual size, so be sure to click on it for viewing at actual size.
In my experience the Material tracking is way too spaced out. You could drive a few small barges up through there. No tracking appears to be best to me. Additionally, my understanding of adding tracking to sentence case text is only when it’s at very small sizes. This does not seem like a very small size — especially since it’s their recommended size for body copy.
So to sum up my questions:
- Does the 0.5 tracked out text in my example look incorrect, thus making it less legible?
- What are you basing your answer on? Bonus points for links to definitive resources.
- Finally, why did Material Design suggest so much tracking?
Comments
That said, slightly looser tracking in smaller-size settings of a font not meant for that does make it less bad. Although ideally one would use the best optical size (when available, like in the incomparable Sitka). BTW using a slightly darker weight, as well as one that's slightly larger on the body also helps.
The smaller Body 2 uses less positive tracking than the larger Body 1. This seems odd. You would expect it to be looser, not tighter.
H3, H4 and H5 all use Roboto Regular at different sizes, but the middle size has (slight) positive tracking, and the other two have zero tracking.
(Perhaps if I studied the entire system I would learn about differing use cases that would make sense of the above.)
You can consider even exchange the font basis Roboto and you can override text-styles as well. Google might employ tens of thousands of talented people, but there are only a tiny fraction of them working on Material Design guidelines and only an even smaller bunch of people finally making a decision about a certain tracking value in a design token. I don't think Larry Page is signing off each design decision in detail This means down to that level, knowledge is limited again and whether each tiny detail is really backed by heavy research I am at least in doubt.
To my surprise about Sketch, @Thomas Phinney seems to be absolutely right, that they use absolute pixel measures. This is weird, as every other application I can think of uses some sort of em-square related relative measure, because this allows to keep the measure static across different font sizes. I just did the test comparing Illustrator, Sketch, Figma on some text samples.