Investigate not using letter-spacing, to fix font kerning

ArthurClemens commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

dalemartyn commented 7 years ago

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 commented 7 years ago

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:

Lowercase letters don’t ordinarily need letterspacing. Nor do capital letters when they appear at the beginning of a word or sentence, because they’re designed to fit correctly next to lowercase letters. But when you use capital letters together, that spacing looks too tight.

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

sgomes commented 7 years ago

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 commented 7 years ago

@shyndman what's your take on this?