Ghost theme - Part 5: Typography

The layouting is pretty much done, bar the margins and paddings of the elements. In order to get those figured out nicely I want to introduce the Typography first.

It will surely help to see how much space we will left to play with after both Fonts and their sizes are finished.
Since this topic is huge and complicated I like to use a tool to assist with the choice.

Over at https://kyleamathews.github.io/typography.js/ there is a wide selection of typography themes to choose from.
I am going to use the GitHub one.

Getting the CSS

Since typography.js is a JavaScript library we will need to extract the CSS somehow, so we can integrate it into the website.
To do this lets create a temporary folder initialize a dummy npm project in it and install typography.js and the typography-theme-github.

mkdir /tmp/typo
cd /tmp/typo
npm init
npm install --save typography typography-theme-github

Now we can create an index.mjs file with the following content:

import Typography from "typography";
import theme from "typography-theme-github";
import fs from "fs";

const typography = new Typography(theme);

fs.writeFile(`./typography.css`, typography.toString(), function(err) {
  if (err) {
    return console.log(err);
  }
  console.log("The file was saved!");
});

We can run this file with node --experimental-modules index.mjs. This will use the Experimental Modules added in Node 10, so make sure you Node version is up to date.

Integrating the typography

Now that we got the typography.css file at /tmp/typo we can copy it into our theme. It should be in assets/css/helpers.
Importing it into the styles.css is something Ill leave up to you.

Next up

Now that the theme has a simple typography its time to think about colours.
That is also going to be the last part in the series, as all other changes will be detailed layouting, which will be a lot of adding margins & paddings.
If you somewhat followed along, you can go ahead and do that already. Since the colours should not be influencing those rules.