Difference between demo website and usage themes

[nitzano]

Hya,

I've tried to use the typography-theme-moraga and compared the results to the demo in https://kyleamathews.github.io/typography.js/ after selecting the same theme.

In the demo website the moraga theme settings looks like this:

Checking the h1 tag gives font-size of 2rem (36px) and line-height of 2.34rem:

However in the source code of the package and react project (without any other css) the h1 tag gets font-size of 2.5rem (and indeed the scaleRatio in the code is 2.5) and line height of 1.1.

generated h1 css with typography.toString():

h1 {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  margin-bottom: 1.56rem;
  color: hsla(0, 0%, 0%, 0.85);
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 200;
  text-rendering: optimizeLegibility;
  font-size: 2.5rem;
  line-height: 1.1;
}

Can someone please explain why the results are different and which ones are the "correct" (the demo website or the actual usage).

Thanks

[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)`,
  },
});