Responsive typography

[lcfd]

Hi! Does exist a way to manage the responsiveness of the font-size?

Example:

• Desktop: font-size: 18px;
• Mobile: font-size: 14px;

Thanks for your time and attention!

[jxom]

Hey! Yes there is a way to manage the responsiveness of the font-size... You can do this via the theme:

import { css, theme } from 'fannypack';

const myTheme = {
  global: {
    base: css`
      @media screen and (max-width: ${theme('fannypack.layout.desktopBreakpoint')}px) {
        font-size: 18px;
      }

      @media screen and (max-width: ${theme('fannypack.layout.mobileBreakpoint')}px) {
        font-size: 14px;
      }
    `
  }
}

<ThemeProvider theme={myTheme}>...</ThemeProvider>

However, in the upcoming v5 version of Fannypack, this should be a bit simpler with the breakpoint util:

import { breakpoint, css } from 'fannypack';

const myTheme = {
  global: {
    base: css`
      ${breakpoint('desktop', css`
        font-size: 18px;
      `)};

       ${breakpoint('mobile', css`
        font-size: 14px;
      `)};
    `
  }
}

<ThemeProvider theme={myTheme}>...</ThemeProvider>

[lcfd]

You are awesome! 🎉 Screen responsiveness of this package was the only problem that had prevented me to entirely use it. I think that more examples in the docs will be a cool enhancement that can help many others.

[jxom]

That sounds like some good feedback! 🙏