Wishes

[mg901]

Hello, Miriam! Your implementation is modular scale, at the moment - the best I've seen! However, I want to offer you a few points that would make it even better.

1. Ability to set font sizes for each breakpoint. Jake Giltsoff (designer from Adobe Typekit) in his project Sassline (framework for improving typography on the project) uses different font sizes and different rhythms to achieve the optimal result.

2. The value of line-height should not be exactly modular scale rhythm, as well as the ability to set the value of line-height for each breakpoint. Matej Latin , in his project to improve the quality of typography in the web space, sets not only different font sizes for each breakpoint, but also different line-height.

P.S. Jake Giltsoff also uses the value of line-height not tied to the rhythm of the modular scale.

Thank you in advance.

[mirisuzanne]

Hi @maxinakenty - glad you like what we have. I try to keep these tools as abstract and opinionless as possible. I think we already support everything you're asking for - we just don't automate it. If you want these things automated, I'd recommend building new project-specific/opinionated tools on top of an abstraction like this.

Font Sizes & Breakpoints

You can either define it all up front, and then call the different values at different breakpoints:

$ratios: (
  'small-ratio': 'minor-third',
  'large-ratio': 'fourth',
);

$sizes: (
  'small-root': 16px,
  'small-line': 'large-root' ('small-ratio': 1),
  'large-root': 20px,
  'large-line': 'large-root' ('large-ratio': 1),
);

html {
  @include font-size('small-root', 'small-line);

  @media all and (min-width: 40em) {
    @include font-size('large-root', 'large-line);
  }
}

Or, if everything is defined relative to a single root and ratio, you can use the same names across the board, and just change those base values at your breakpoints. Since the math happens inside the function call, changed values propagate on-the-fly.

$ratios: (
  'my-ratio': 'minor-third',
);

$sizes: (
  'my-root': 16px,
  'my-line': 'my-root' ('my-ratio': 1),
);

html {
  @include font-size('my-root', 'my-line');

  @media all and (min-width: 40em) {
    $sizes: map-merge($sizes, ('my-root': 20px)) !global;
    $ratios: map-merge($ratios, ('my-ratio': 'fourth')) !global;
    @include font-size('my-root', 'my-line');
  }
}

The second option would probably call for a new mixin or two, helping manage sizes and breakpoints.

Line Height & Rhythm

There are a few places where we use the rhythm keyword as a default for line-height - but you can always override it with anything you want. They should not be strictly linked together anywhere in our tools. See above - the font-size mixin accepts both font-size and line-height arguments.