Letter spacing configuration key about typography.js HOT 4 CLOSED

No — the API is focused on providing high-level controls over your typography e.g. changing the baseFontSize doesn't just change the body font size but it also changes the baseLineHeight which changes the size of our rhythm unit which then changes the spacing between dozens of elements.

Changing the letter spacing just changes the letter spacing. So for styles that don't have cross-cutting effects, I just use css. I do like to control styles like this with Typography.js. For my sites I have a utils/typography.js in which all global styles go. For changes like letter-spacing, see the overrideStyles API option. You can pass a function in and set arbitrary CSS. This gets called after the rest of the CSS is generated so you can add additional rules or override defaults.

from typography.js.

And a fwiw, I don't like using letter-spacing. If you want a narrower or wider letter spacing, I'd rather choose a different typeface which is more narrow. Just like you'd much rather use a real italic instead of browser's emulated italic. A number of larger font families will also include a narrow or condensed version as well.

from typography.js.

Thanks.

Agreed on the letter-spacing as a fallback option. I mostly use it out of necessity when finding a similar font that's narrower/wider isn't viable given constraints.

from typography.js.

@KyleAMathews can i see an example of how you include global styles inside your utils/typography.js
Im looking to add letter spacing to all my headers and am curious how you approached this as im just using a standard css file to for all h1,h2,etc

Also if you have a link to a blog/tutorial on how to use the overrideStyles id much appreciate it TY.

from typography.js.