Material-components-web: Investigate not using letter-spacing, to fix font kerning

[ArthurClemens]

I consider the use of letter-spacing bad practice that should be discouraged. It changes the carefully crafted font character kerning, and replaces it with some arbitrary spacing value. It disregards the font author and does not even improve readability because of the uneven result.

The design specs on typography do not show any example of letter-spacing.

Consumers of this framework will need to override the styles in many places in order to achieve natural fonts.

Please remove letter-spacing from the stylesheets.

[Garbee]

The letter-spacing appears to be an attempt at the tracking of the text which is defined in the "Tracking and kerning" section. What would be an alternative here to make sure the tracking is still per the spec's guidelines?

@sgomes Looking at our current spacing from this, our display-4 tracking is about -0.64px. Which seems to be a far cry from the -10 the spec shows for this display. While we're looking into this can we get verification of the spacing we are using? Maybe something else affects the math to get the -10 tracking total here, not sure since I'm not a typography person.

[sgomes]

I should point out that these values were designed for Roboto, specifically, by some folks who are much smarter than me about kerning and typography in general :)

Perhaps we should loop in some of the designers for a thorough review. @traviskaufman, who should we call?

[Garbee]

So, this does cause a slight problem with other fonts. For example, we pull in display1 to card supporting text. Now, we don't set the font family for this, so without mdl-typography as a parent or on it, the font will be the default or whatever the developer sets. Which the letter-spacing can then interfere with things.

The letter-spacing should only be applied when we know Roboto is used, otherwise it should be left alone as to not interfere.

[sgomes]

The currently expected usage is that the mdl-typography class is used wherever MDC components are, but I'm open to having the font-family definition as part of those mixins. @traviskaufman WDYT?

[Garbee]

SGTM, we can include it and if Roboto isn't there it will just fall-through. And if developers modify the font, well, they're kinda responsible for making sure everything around it is done right.

s/mdl/mdc/g :wink:

[sgomes]

After discussing with the team we're thinking of not having letter-spacing by default, but applying it if Roboto is in use. This means that letter-spacing will only be applied if the mdc-typography class is present. An example of output (the actual change would be done via mixins):

.mdc-typography {
  /* Use Roboto font */
}

.mdc-typography--display4 {
  /* Font size and weight definitions for display4 */
}

.mdc-typography .mdc-typography--display4,
.mdc-typography.mdc-typography--display4
 {
  letter-spacing: -.04em;
}

This means that developers can easily choose between Roboto or not by applying the mdl-typography class, and if they do choose Roboto, all the correct letter-spacing definitions get applied. How does this sound, @ArthurClemens?

[ArthurClemens]

This is a step in the right direction.
Still I don't see why letter-spacing is needed, knowing that Roboto is a carefully crafted screen font. If wider kerning was needed, it would have been in the font. And as mentioned above, I didn't see any mention of letter-spacing in the specs.

[sgomes]

@traviskaufman Do you happen to know why the typography prototype we got from the designers included letter-spacing?

[dalemartyn]

The specs mention tracking, which is the same as letterspacing. Letterspacing doesn't affect Kerning, as it affects all letters, not specific pairs.

However, having looked at the MDC, the values for letter-spacing are way off. The specs range from a tracking of -10 for Display 4 to 20 for Caption. This translates to letter spacing of -.01em and .02em. However, in MDC it's currently set to 4 times higher (-.04em to .08em). This should be changed.

[ArthurClemens]

I've somehow managed to miss the Tracking and Kerning section in the specs. So yes it is specced. Nevertheless, I don't understand the need. The referred http://practicaltypography.com/letterspacing.html writes:

Low­er­case let­ters don’t or­di­nar­ily need let­terspac­ing. Nor do cap­i­tal let­ters when they ap­pear at the be­gin­ning of a word or sen­tence, be­cause they’re de­signed to fit cor­rectly next to low­er­case let­ters. But when you use cap­i­tal let­ters to­gether, that spac­ing looks too tight.

So that only leaves a case for button labels, although I doubt that Roboto caps will look too tight.

[sgomes]

It sounds like we need to get back to the typography experts who made the initial prototype, and find out why the letter spacing doesn't match the spec tracking recommendations.

Marking this issue as needing design guidance.

[traviskaufman]

@shyndman what's your take on this?

[shyndman]

I don't have enough experience to comment. @davelab6, any thoughts?

[davelab6]

I agree with @arthurclemens not on principle but because currently most browsers font rendering will, as he says, and afaik, stop their application of kerning data when calculating glyph positioning when letter-spacing is applied. They could not do that. But they do. So Arthur's point is a fair one for MDC, being web focused.

I don't know what other platforms font rendering is like and if any can apply letter-spacing (aka tracking) and kerning simultaneously

[davelab6]

All caps settings like button labels will still benefit from letter-spacing imho

[dalemartyn]

hi @davelab6 . do you know anywhere I could learn more about the kerning not working properly with letter-spacing applied? I just tested in chrome, safari and firefox on the Display 4, toggling css font-kerning: none; on and off and it appeared that it was working as expected.

Also, any comment on the current values for letter-spacing not matching the spec as I described above? many thanks

[davelab6]

Is your test page publicly accessible? :)

[dalemartyn]

try this http://codepen.io/madebydale/pen/ggmZWZ

[davelab6]

@dalemartyn THANKS!! :) I just tested that on latest OS X versions of Chrome, Firefox and Safari and all did in fact apply kerning while letter-spacing was applied, and in proportion. Great news - to me - and apologies for being out of touch on progress on this :)

[davelab6]

All caps settings like button labels will still benefit from letter-spacing imho

But that general typography recommendation is to apply _positive_ letter-spacing to app caps text, to space the caps wider than normal, because (as @ArthurClemens has been saying) a font's default spacing has been carefully crafted by the type designer, but often that is to work in Title Case settings, which means too tight for ALL CAPS settings, and thus a little additional letter-spacing is helpful in such settings.

Some OpenType fonts can provide that extra spacing with the cpsp feature, but it must be manually enabled... however, having that easily configured could be helpful.

[dalemartyn]

@davelab6 you're welcome 👍

any idea why MDC web is using letter-spacing 4x the spec?

MDC:

Spec:

it's especially noticable on Caption and Body - way too loose!

[frattaro]

Is this also happening in mdc-card__subtitle? I see a letter spacing of .04em on that class, and it looks too wide to me. I added a rule to my site's CSS to override it to .01em assuming the x4 issue. (I've already added rules to the mdc-typography classes reducing the letter spacing by a 4x factor)

[clshortfuse]

The values are also off for a lot of components. For example, the letter-spacing from text-field input is listed as 0.04em, but when I do a pixel-to-pixel comparison with spec, it should be 0.00em (normal).

0.04em spacing:

Normal spacing:

I'm not saying there isn't a need for it. For example, .mdc-list has a value of 0.04em but the accurate value is closer to 0.0075em. Also .mdc-list-item__secondary-text should be 0.01em, not 0.04em.

So either the MDC-Web's math to calculate the spacing is wrong or the Material Guideline spec images are wrong.

[Garbee]

General guidance is ignore images in the spec and focus on words. The images get out of sync for various reasons and can't always be trusted to reflect actual intent.

[clshortfuse]

@Garbee That may be true, but I would assume MDC-Web should at least line up to the reference image on tracking and it doesn't.

I think I narrowed down why it doesn't though. It seem as though the web version of Roboto font has a default Tracking of 10, which means you shouldn't apply any letter-spacing to anything smaller than Title (except for Caption). That's why everything looks far more spaced out than it should.

You can see for yourself in this Codepen I wrote up:

https://codepen.io/shortfuse/pen/BJvGVr

[dalemartyn]

@clshortfuse Is it not just that MDC is just 4x too large?

[clshortfuse]

@dalemartyn I don't know if I'd say it's 4x. But, yes the letter-spacing wrong. Check out the SCSS in the Codepen and you'll see that anything that the spec says is Tracking 10 should have letter-spacing set to normal.

Google probably set the tracking in the font intentionally, so people don't have to manipulate the letter spacing when using the Web Font.

[dalemartyn]

that actually makes a lot of sense. If the tracking is 10 by default then adding letter-spacing will cause the loose spacing. your codepen demonstrates that perfectly.

also, weird how the webfonts’ kerning between the T & r doesn't match the spec.

[sidot3291]

@sgomes @traviskaufman Do you have any update on design guidance for this issue?