Open nitzano opened 4 years ago
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...
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)`,
},
});
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 givesfont-size
of2rem
(36px) andline-height
of2.34rem
:However in the source code of the package and react project (without any other css) the
h1
tag getsfont-size
of2.5rem
(and indeed thescaleRatio
in the code is 2.5) and line height of 1.1.generated
h1
css withtypography.toString()
:Can someone please explain why the results are different and which ones are the "correct" (the demo website or the actual usage).
Thanks