Difference between demo website and usage themes about typography.js

[morgs32]

This might be related. From the code, I would have expected a line height of 1.1 for all headings. But I'm seeing something else upon inspecting the element on the demo site. For example, using the default theme, the line-height on an h2 is...

[albingroen]

I'm experiencing the same issue. I'm using the GitHub theme with Next.js. On my version, h2's get a line height of simply 1.1 for example, but on Kyle's example website, they have a bigger line height of 2.4375rem.

[albingroen]

Try adding this to your typography configuration, it solved at least some things for me.

theme.overrideThemeStyles = ({ rhythm }) => ({
  "h1,h2": {
    paddingBottom: `calc(${rhythm(1 / 2)} - 1px)`,
  },
});