Getting text to look OK in print and screen

Typography

import * as React from "react";

import { extendTheme } from "@chakra-ui/react";
import { rhythm } from "../../components/page-components";

const theme = extendTheme({
    styles: {
        global: {
            "@media print": {
                "*": {
                    WebkitTransition: "none !important",
                    transition: "none !important",
                },
            },
            html: {
                overflowY: "scroll",
            },
            body: {
                background: "#fff",
                fontFamily: '"opensans-regular", sans-serif',
                color: "#737c85",
            },
            "p, li": {
                pageBreakInside: "avoid",
            },
            "h1,h2,h3": {
                pb: `calc(${rhythm(0.25)} - 1px)`,
                color: "hsla(0,0%,0%,0.8)",
                fontWeight: 600,
            },
            h1: {
                mt: rhythm(1.5),
                mb: rhythm(0.75),
                fontSize: "2rem",
                lineHeight: rhythm(1.5),
            },
            h2: {
                mt: rhythm(1),
                mb: rhythm(0.25),
                fontSize: "1.51572rem",
                lineHeight: rhythm(1.5),
            },
            "h3,h4,h5,h6": {
                mb: rhythm(0.5),
                mt: rhythm(1),
            },
            h3: {
                pb: 0,
                fontSize: "1.31951rem",
                lineHeight: rhythm(1),
            },
            p: {
                padding: 0,
                marginBottom: "0.8125rem",
            },
            "ul,ol": {
                ml: rhythm(1.25),
                mb: rhythm(0.5),
                listStylePosition: "outside",
            },
            ul: {
                listStyleType: "disc",
                marginBlockStart: "1rem",
                marginBlockEnd: "1rem",
            },
            l1: {
                pl: 0,
                mb: `calc( ${rhythm(0.5)} /2 )`,
                display: "list-item",
                textAlign: "-webkit-match-parent",
            },
            a: {
                color: "#4078c0",
                textDecoration: "none",
            },
            "a:hover,a:active": {
                textDecoration: "underline",
            },
            blockquote: {
                borderLeft: "gray.800",
                color: "gray.500",
                marginTop: 0,
                marginRight: 0,
                marginLeft: 0,
                paddingLeft: `calc(${rhythm(1 / 2)} - 1px)`,
            },
        },
    },
});

export default theme;