typography.js: Add breakpoints option

@KyleAMathews @TylerBarnes any updates on this?

Wanting to use Typography.js in a production website but I need breakpoints. Are breakpoints a feature that we can expect soon?

Hey there! Any news on the breakpoints?

Cheers,

Michael

@Siyfion I’m guessing he’s been busy with Gatsby V2. Responsive generated typography would be an awesome addition to Gatsby V2 though 😉

+1 for breakpoints. It is really helpful in responsive design. Otherwise, this could be a serious stopper in real production.

Another workaround here is to update the typography object when your key breakpoints change (assuming you’re using React here, but this is probably adaptable to other frameworks). May also need some adjustments for SSR.

function useTypography() {
  // I have a hook that updates when one of my theme breakpoints change
  // modify based on whatever solution you use here
  let breakpoint = useBreakpoint();
  let typography = React.useMemo(() => {
    let baseFontSize = breakpoint === 'small' ? defaultOpts.baseFontSize : '22px';
    let scaleRatio = breakpoint === 'small' ? defaultOpts.scaleRatio : 2;
    return new Typography({
      ...defaultOpts,
      baseFontSize,
      scaleRatio,
    });
  }, [breakpoint]);

  // layout effect prevents a flash if your first load doesn't match your default styles
  useLayoutEffect(() => {
    typography.injectStyles();
  }, [typography]);
  return typography;
}

// I can now stick this in my theme provider to get dynamic scale and rhythm
// values elsewhere in the app
const ThemeProvider = ({ children }) => {
  let { value: isDark } = useDarkMode(false);
  let typography = useTypography();

  return (
    <ThemeContext.Provider
      value={{
        theme: isDark ? darkTheme : lightTheme,
        typography,
      }}
    >
      {children}
    </ThemeContext.Provider>
  );
};

I was able to solve this missing option with a workaround by overriding the font-size of the html tag. Typography config: baseFontSize: "16px" this will result in font-size: 100%. Then I added this in a global css:

@media (min-width: 480px) {
  html {
    font-size: 112.5%; /* --> 18px base size */
  }
}
@media (min-width: 600px) {
  html {
    font-size: 125%; /* --> 20px base size */
  }
}

@johncmunson the solution in the PR is different than the hack posted above.

I’ve published a temporary package for myself and anyone else that wants breakpoints until they’re officially supported.

You can install it with npm i tyjs or yarn add tyjs. It should be exactly the same as typographyjs except for the added breakpoints option. You should import Typography from 'tyjs' and it probably doesn’t play nice with the typography gatsby plugin so probably you’ll need to use typography.toString() and add the string to your site somewhere.

@johncmunson while that method is super useful, it’s not the same as having actual breakpoint support. Breakpoints inside override styles wont allow you to set up different ratios across media queries. I have a PR open (#157) that adds this functionality to typography.js but I think Kyle is too busy with Gatsby to merge it (understandably). I’m thinking soon I’ll publish a wrapper library around typographyjs because I want this functionality but I also want to work out an easy way to integrate typographyjs with styled components / styled systems

Hey guys, it appears that @hcavalieri’s clever hack is no longer necessary and that Typography.js now at least partially supports media queries inside of the overrideStyles property. Checkout where @KyleAMathews has used this feature in one of the Gatsby demonstration sites. I have tested it out myself and it’s working just fine.

@KyleAMathews Is there any update on this?

In search of using typography.js for production, I’ve found a silly and not-so-useful-but-better-than-nothing hack to declare media queries:

overrideStyles: ({ adjustFontSizeTo, rhythm }, options, styles) => ({
        'h1, h2, h3, h4, h5': {
            color: '#0f092b'
        },
        '@media screen and (min-width: 760px){h1{font-size:200px}}': {},
    })

However, this doesn’t allow me to use variables such as rhythm and I’m still not able to change the scaleRatio between breakpoints… @KyleAMathews I’d gladly try to implement breakpoints to Typography.js, but I’m a bit lost with the repo and I’m still a bit raw with JS, any directions you could give us?

@TylerBarnes Thank you so much, it works beautifully. I hope that @KyleAMathews sees it as something that should be in the main repo because otherwise, you’re stuck trying to find a middle ground between smaller and larger devices.