Difference between demo website and usage themes
nitzano opened this issue · 3 comments
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
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
.
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)`,
},
});