How to use typography - 10 common examples

import Typography from 'typography'
import theme from 'typography-theme-lawton'
import CodePlugin from 'typography-plugin-code'

theme.scaleRatio = 1.618;
theme.plugins = [
  new CodePlugin(),
];

const typography = new Typography(theme)

// Hot reload typography in development.
if (process.env.NODE_ENV !== 'production') {
  typography.injectStyles()
}

export default typography

color: '#c85740'
  },
  'a:hover': {
    opacity: '0.7',
    boxShadow: '0 1px 0 0 currentColor'
  },
  'a.gatsby-resp-image-link': {
    boxShadow: 'none',
  },
})



delete Wordpress2016.googleFonts

const typography = new Typography(Wordpress2016)

// Hot reload typography in development.
if (process.env.NODE_ENV !== 'production') {
  typography.injectStyles()
}

const { rhythm, scale } = typography;
export { rhythm, scale, typography as default };

// Make baseFontSize on mobile 17px.
        html: {
          fontSize: `${(17 / 16) * 100}%`,
        },
      },
      [MOBILE_MEDIA_QUERY]: {
        // Make baseFontSize on mobile 16px.
        html: {
          fontSize: `${(16 / 16) * 100}%`,
        },
      },
    }
  },
}

const typography = new Typography(options)

// Hot reload typography in development.
if (process.env.NODE_ENV !== `production`) {
  typography.injectStyles()
}

export default typography

FairyGates.bodyFontFamily = ['Source Sans Pro']

FairyGates.overrideThemeStyles = () => {
  return {
    a: {
      color: colors.primary,
      background: 'none',
      textShadow: 'none',
    },
    blockquote: {
      borderLeftColor: colors.primary,
    },
  }
}

const typography = new Typography(FairyGates)

// Hot reload typography in development.
if (process.env.NODE_ENV !== `production`) {
  typography.injectStyles()
}

export default typography
export const rhythm = typography.rhythm
export const scale = typography.scale

// Make baseFontSize on mobile 17px.
        html: {
          fontSize: `${(17 / 16) * 100}%`,
        },
      },
      [MOBILE_MEDIA_QUERY]: {
        // Make baseFontSize on mobile 16px.
        html: {
          fontSize: `${(16 / 16) * 100}%`,
        },
      },
    };
  },
};

const typography = new Typography(options);

// Hot reload typography in development.
if (process.env.NODE_ENV !== `production`) {
  typography.injectStyles();
}

export default typography;

wrapper: {
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      textDecoration: "none",
      padding: `0 ${themeData["density.spacings.medium"]}`,

      // we can't override the :hover selector on typography's
      // style prop, so we have to style the text from the
      // container element
      "&:hover span": {
        color: themeData["colorScheme.accentColor"]
      },

      "& svg *": {
        fill: themeData["typography.body.color"]
      },

      "&:hover svg *": {
        fill: themeData["colorScheme.accentColor"]
      }
    },

    externalIcon: {
      display: "flex",
      alignItems: "center",
      marginLeft: "auto",
      padding: "6px 2px"
    },

    typography: {
      lineHeight: "26px"

export default function stylesheet(props, themeData) {
  const { hasHover, hasFocus } = props;

  return {
    // from base typography-medium
    fontWeight: themeData["typography.body.fontWeight"],
    fontSize: themeData["typography.body.fontSize"],
    lineHeight: themeData["typography.body.lineHeight"],

    // from typography-base
    fontFamily: themeData["typography.body.fontFamily"],
    margin: 0,

    // from default-link
    textDecoration: "none",
    cursor: "pointer",

    color: themeData["textLink.textColor"],
    outline: "none",

    ...(hasHover
      ? {
          color: themeData["textLink.hover.textColor"],
          textDecoration: "underline",
          textDecorationColor: themeData["textLink.hover.underline.color"]
        }
      : {}),

export default function stylesheet(props, themeData) {
  const { hasHover, hasFocus } = props;

  return {
    // from base typography-medium
    fontWeight: themeData["typography.body.fontWeight"],
    fontSize: themeData["typography.body.fontSize"],
    lineHeight: themeData["typography.body.lineHeight"],

    // from typography-base
    fontFamily: themeData["typography.body.fontFamily"],
    margin: 0,

    // from default-link
    textDecoration: "none",
    cursor: "pointer",

    color: themeData["textLink.textColor"],
    outline: "none",

    ...(hasHover
      ? {
          color: themeData["textLink.hover.textColor"],

export default function stylesheet(props, themeData) {
  const { hasHover, hasFocus } = props;

  return {
    // from base typography-medium
    fontWeight: themeData["typography.body.fontWeight"],
    fontSize: themeData["typography.body.fontSize"],
    lineHeight: themeData["typography.body.lineHeight"],

    // from typography-base
    fontFamily: themeData["typography.body.fontFamily"],
    margin: 0,

    // from default-link
    textDecoration: "none",
    cursor: "pointer",

    color: themeData["textLink.textColor"],
    outline: "none",

    ...(hasHover
      ? {

export default function stylesheet(props, themeData) {
  const { hasHover, hasFocus } = props;

  return {
    // from base typography-medium
    fontWeight: themeData["typography.body.fontWeight"],
    fontSize: themeData["typography.body.fontSize"],
    lineHeight: themeData["typography.body.lineHeight"],

    // from typography-base
    fontFamily: themeData["typography.body.fontFamily"],
    margin: 0,

    // from default-link
    textDecoration: "none",
    cursor: "pointer",

    color: themeData["textLink.textColor"],
    outline: "none",

    ...(hasHover
      ? {
          color: themeData["textLink.hover.textColor"],
          textDecoration: "underline",