Create beautiful web typography with Typography.js in Gatsby

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.