Responsive letter-spacing

[larsenwork]

I'm currently using media queries for responsive letter spacing to increase letter spacing at smaller font sizes but would be great if they could be variables here. I know these are some very minute adjustments but they can make a big difference in overall typographic sexiness.

E.g.:

$min-font            : 12px !default;
$max-font            : 20px !default;
$min-font-spacing    : 1px !default;
$max-font-spacing    : 0px !default;
$header-font-spacing : -0.2em !default;

[larsenwork]

This is how  has done it with their new system fonts. @corysimmons any thoughts on this?

[corysimmons]

Seems complicated for a small payoff. I think maybe Typographic is already overly complicated, but I'm willing to examine a PR if you want to make one.

Appreciate this.

[larsenwork]

@corysimmons you're right about it being a bit complicated - but it's very capable though ;)

I don't have the time or skills to make a pr right now and what I'll end up doing sometime in the future (if someone else doesn't beat me to it) is making a typographic-light with this feature added and some other trimmed.

Feel free to close this issue or leave it open for someone else to stumble upon

[corysimmons]

Sorry it's taken me so long to respond. I have my ups and downs with being a good maintainer.

I'm planning on migrating this project to PostCSS in the next month or so, and when I do, I'll probably rewrite it from scratch.

---

Sorry I didn't take a proper look at this earlier. This seems pretty easy actually. It should be the same concept as scaling down the fonts, except we'd be scaling the letter-spacing.

I'll definitely try to add this feature to the next version of Typographic. Sorry again!

[larsenwork]

@corysimmons no worries, looking forward to it. I tried simplifying the font scaling calc function in typographic using rem units but for some reason it doesn't work properly in safari (firefox + chrome works perfectly) - any idea why:

font-size: calc(0.875rem + (1.25 - 0.875) * ( (100vw - 20rem) / (40 - 20) ) );

[corysimmons]

It's possible Safari doesn't know how to add 0.875rem + 0.375?

[corysimmons]

Do you happen to know where the letter-spacing formula is that Apple is using?

[corysimmons]

Dropping a note here to use ch units for this.

[larsenwork]

safari had an issue with rem, em worked

[larsenwork]

unfortunately don't know the exact formula

[corysimmons]

Yeah I'm probably gonna drop rem's all together in favor of em's.

[jpamental]

VICTORY ;)

But seriously, that's the biggest benefit of using EM's over any of the other relative units: they are very universal. As long as you never put font-size on a container but rather on the element itself, you'll never have the inheritance issues that so many people complain about. CH and CX are interesting, but unfortunately not very well supported yet.

Nice work Cory!

[corysimmons]

:+1: Sorry I didn't understand your point years ago. I think the PostCSS version will be cool. =)

[jpamental]

No worries; probably my fault for not explaining it well enough :)

[corysimmons]

I thought it meant I couldn't be lazy.

Like once you start nesting with em's, many things become coupled/dependent on font-sizes higher up the chain.

I thought the rule you were trying to say was "Always use em for everything ever".

Now I realize you can use hard values to reset these font sizes wherever you want. http://codepen.io/corysimmons/pen/zrQaje?editors=1100 (not that all these need to be resetted)