Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Create beautiful web typography with Typography.js in Gatsby

    Artem SapeginArtem Sapegin

    Learn how to define typography styles for Gatsby sites with Typography.js. You’ll learn how to setup Typography.js with Gatsby using gatsby-plugin-typography, how to use Typography.js themes to improve styles of your site, and how to create your own themes.

    This lesson is compatible with Gatsby v1 and v2.

    gatsbyGatsby
    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 First, install gatsby-plugin-typography and its peer dependencies react-typography and typography js. Then, add the plugin to your Gatsby config file. If you're using the Gatsby default starter, you need to remove its default styles from layout js file.

    00:15 Run Gatsby, and you can see that your site is now using the default typography js theme. Now, go to typography js site and choose one of the many themes. I like the Lincoln theme.

    00:33 Go back to your terminal and start it from npm. Create a new file, typography js, import typography and our theme. Create a typography instance with our theme. Now, go back to your Gatsby config and point the typography plugin to our new file.

    00:56 Restart Gatsby. Now, our site is using the Lincoln theme, but look at the header. Something is wrong here. Let's have a look at the browser developer tools. Aha, they used text shadow to remove link underlines around letter descenders. Let's get rid of it.

    01:14 Typography js theme is an object with various typography js options like base font size or baseline height. We can overwrite any of them in our typography js file.

    01:25 For example, header color. You need to restart Gatsby to see your changes. Our text shadow thing is more tricky. Here it is in the Lincoln theme. It's inside overrideStyles function.

    01:41 If we override it, we'll replace everything this function returns here, which is not what we want. Luckily, typography js has another function called overrideThemeStyles, which does exactly what we want.

    01:55 Everything this function returns will be merged with style overrides from the original theme. Here it is. The header looks nice. Of course, you can create your own theme for typography js.

    02:08 Everything you return here will be merged with the default typography js theme.

    Discuss

    Discuss