Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Investigate not using letter-spacing, to fix font kerning

See original GitHub issue

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.

Issue Analytics

State:
Created 7 years ago
Reactions:5
Comments:29 (11 by maintainers)

Top GitHub Comments

3reactions

clshortfusecommented, Jan 18, 2018

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: 0.04em

Normal spacing: 0.00em

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.

2reactions

sidot3291commented, Mar 10, 2018

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

Top Results From Across the Web

Keeping track of letter-spacing, some guidelines | CSS-Tricks

Use letter-spacing, not spacing characters However, on the web you want to avoid adding any extra glyphs—such as spacing characters—between ...

VS Code: change letter spacing (kerning) - Stack Overflow

For example, I'm using the following code in my settings to tighten up the letter spacing ever so slightly: { "editor.letterSpacing": -0.15 }....

Change the spaces between text - Microsoft Support

Change spacing between characters, kern fonts, stretch or scale text, and set line spacing.

font-kerning - CSS: Cascading Style Sheets - MDN Web Docs

The browser determines whether font kerning should be used or not. For example, some browsers will disable kerning on small fonts, ...

The effect of letter spacing on reading speed in central and ...

Reading speeds were calculated based on the RSVP exposure durations yielding 80% correctly read words. Letters were rendered in Courier, a fixed-width font....