Support for responsive values in themes and typography helpers

Hey guys,

I’m new to typography (or at least to thinking about it) and this library, so I’m not 100% sure if the following makes sense.

At the moment it’s possible to define responsive typography like this:

{
  fontSizes: [
    12, 14, 16, 18, 24, 32, 48, 64, 72,
  ],
  fonts: {
    body: 'system-ui, sans-serif',
    heading: 'Poppins, sans-serif',
  },
  fontWeights: {
    body: 400,
    heading: 900,
    bold: 700,
  },
  lineHeights: {
    body: 1.5,
    heading: 1.125,
  },
  text: {
    heading: {
      fontFamily: 'heading',
      fontWeight: 'heading',
      lineHeight: 'heading',
    },
  },
  styles: {
    root: {
      fontFamily: 'body',
      fontWeight: 'body',
      lineHeight: 'body',
    },
    p: {
      fontSize: [2, 3],
    },
    h1: {
      variant: 'text.heading',
      fontSize: [5, 6, 7],
    },
    h2: {
      variant: 'text.heading',
      fontSize: [4, 5],
    },
  },
}

To me, it doesn’t seem very practical or appropriate to use a single font size scale to define font sizes for several breakpoints.

Even if you calculate the scale using an algorithm as typography.js does – which is similar to https://type-scale.com/ (if I remember correctly) – then it’s probably not easy (or even possible) to define a scale that works for all breakpoints.

Wouldn’t it make more sense to define responsive values in the theme?

The theme from above could be changed to:

{
    breakpoints: [
        '40em', '56em', '64em',
    ],
    fontSizes: [
        [12, 14, 16, 18, 24, 32, 48, 64, 72],
        [14, 16, 18, 24, 32, 48, 64, 72, 80],
        [16, 18, 24, 32, 48, 64, 72, 80, 88]
	//  Most likely bad font scales...
    ],
    ...baseTheme

And then ‘theme.styles’ could be defined like this:

 {
        ...baseTheme.styles
        p: {
        fontSize: 2,
        },
        h1: {
            variant: 'text.heading',
            fontSize: 8,
        },
        h2: {
            variant: 'text.heading',
            fontSize: 7,
     },
}

The value for ‘fontSize’ would be selected according to the active breakpoint.

Besides a better approach for creating font scales that are optimized for the defined breakpoints, I think this would require less mental energy, would be easier to maintain and would make it easier to stay consistent within the project (which seems to be a goal of ThemeUI).

With the current approach, if I want to define a responsive text that’s as big as an h1 heading, I have to remember that I need to use the indices [5, 6, 7] from the font size scale.

With my proposal, it would always be just ‘8’.

I also think with my proposal it would be easier (or at least easier for users to understand) to define ‘theme.styles’ presets that could be shared – and that work out of the box with responsive font size scales (as proposed by me) or with a non-responsive font size scale (as it’s used at the moment).

It also would be easier to define a community font size convention like “index 0 is for very small text, index 1 is for small text, index 2 is for paragraphs, index 3 is for h6, …”.

Then on top of that, it would be useful to provide typography helpers similar to what typography.js offers.

For example something like this:

{
    breakpoints: [
        '40em', '56em', '64em',
    ],
    fontSizes: generateFontSizes([18, 20, 22], scale),
        // Or 'generateFontSizes(18)' for a single, non-responsive font size scale
        // If the other theme values are needed, 'generateFontSizes' could return a 
        callback which is called with the theme object.
    
    // Another approach would be to define 'baseFontSize' and 'fontScale' which is used 
    // to calculate 'fontSizes':
    baseFontSize: [18, 20, 22], // or 'baseFontSize: 18' for a non-responsive scale
    fontScale: [1.25, 1.5, 1.75] // for a responsive font scale
    ...baseTheme
}

For other theme fields responsive values and helpers like that would make sense too, I think.

It seems the helpers could be created with the helper functions from Theme-UI/typography.to-theme.

Does that all make sense?

[d4h0]

If you need to use different type scales for different screen sizes, you can use nested objects within the fontSizes scale to separate them

So the following would work?

theme = {
    ...baseTheme
    fontSizes: {
        mobile: [12, 14, 16, 18, 24, 32, 48, 64, 72],
        tablet: [14, 16, 18, 24, 32, 48, 64, 72, 80],
        desktop: [16, 18, 24, 32, 48, 64, 72, 80, 88]
    },
   styles:  {
        ...baseTheme.styles
        p: {
          fontSize: ['mobile.2', 'tablet.2', 'desktop.2']
        },
        h1: {
            variant: 'text.heading',
            fontSize: ['mobile.8', 'tablet.8', 'desktop.8'],
        },
        h2: {
            variant: 'text.heading',
            fontSize: ['mobile.7', 'tablet.7', 'desktop.7'],
        },
    }
}

That’s, basically, what I need. Just a little more verbose.

But on top of that, it should be easy to create a helper like fontSize: fontSize(7) that returns an array with the appropriate values.

but generally I’d recommend using a unified typography scale.

Okay, I’ll experiment with a unified typography scale and see if this works for me.

That said, I’d be open to exploring other approaches to the API, but I’d recommend starting off with code usage examples and documentation before diving into implementations.

Alright, I think for now I’ll experiment with the existing API and maybe create some helpers on top of it.

If I think these helpers are useful, I’ll open a new issue to discuss if it would make sense to add these helpers to or extend the API of System-UI/Styled-System.

At this point, it should be easier for me to provide better code usage examples.

[d4h0]

Okay, thanks. I’ll post any question or update I have to this thread.