Allow font-size to be `em` units

[green-arrow]

I'm not even sure if this is possible with the methodology backing this project, but there are many times in my projects that I like to control sections of my application separately, with separate scaling. To do this, I normally use rem sizing at the section level, and em sizing for everything else, that way I can individually scale sections based on various conditions, like breakpoints. Is it possible to allow em for the typeset mixing, in addition to px and rem?

[tbredin]

Hi green-arrow,
I'm interested to hear more about your intention here. Are you wanting the em-scaled content to snap to a local grid, or are you just concerned about measuring from cap height when setting your spacing? (ie; are you working with $baseline-scaling on or off?)

I think the idea of a local grid is an interesting idea but my concern is that we would need to add additional parameters to the typeset mixin so we can know the local font-size context, and tell it to output in em's.

Another option would be to assume the rootsize as the context and rely on tweaking the sizing of your sections with the font-size of a parent element (which I assume you're doing already), which would give you a number of local grids. However we still need either a per-mixin parameter to tell it to output in rems, or perhaps a global setting might be more appropriate? That way we wouldn't clutter up the typeset mixin with too many extra parameters.

[green-arrow]

Hi @tbredin

After thinking more about this, I think what I'm interested in is a local grid.

About the extra parameters: would it be possible to create another mixin wrapper like min-width that could be used to store information about the container font size? That way, you could always have access to the root size, kind of like you always have access now to the breakpoint via existing mixins.

[tbredin]

I like the concept. I'll have to spend a bit more time investigating whether this is viable, but something like this seems like it might work:

.parent {
    @include with-rootsize(14px) {
        .child {
            @include typeset($sans, 16px, 2, 1, 2);
        }
    }
}

I'm thinking that this would apply the typeset mixin to .child in em so that we can then scale this locally based on the font-size we give to .parent (applied by the wrapper mixin).

I'll try find some time soon to give this a go; I do think it would make a pretty cool feature but just so long we can figure out a way to do it that doesn't overcomplicate existing mixins or result in any unexpected behaviour in edge cases (eg: I'm not sure how far we should go to support the use case of having something on a global grid that switches to a local one at a given breakpoint..).

[green-arrow]

Yeah, something like that is exactly what I was thinking. It would also be awesome if the with-rootsize accepted rem as well.

I don't think we want to overcomplicate existing mixins either, and I don't think the switching from global > local grid based on breakpoint would be necessary. I feel like exactly what you have above, a root container sized in px or rem, with all typeset mixins inside resolving to em is perfect.