Typography.js with sage


#1

Just on the offchance that anyone has had a go at using Typography.js https://github.com/KyleAMathews/typography.js in a sage site? it seems a really nice way to quickly get some good typography going although I do not know how best to incorporate this into a none react app. Its basically a set of generated css rules thats easy to customise and has themes.

I think it would have to run in webpack and output o a css file which can then be included into sass?
or the usage has a typography.toString() which could be used to insert the css into my styles with webpack?

import Typography from 'typography'

const typography = new Typography()
// Output CSS as string.
typography.toString()

// Or insert styles directly into the <head> (works well for client-only
// JS web apps.
typography.injectStyles()

#2

Hey Jake - not sure if you ever figured this out, but I just started playing with Typography.js.

I’m sure you can run it via webpack, but I was able to get it working with this:

// @ resources/assets/scripts/routes/common.js
import Typography from 'typography';

export default {
  init() {
    const typography = new Typography({
      baseFontSize: '18px',
      baseLineHeight: 1.45,
      headerFontFamily: ['Avenir Next', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'],
      bodyFontFamily: ['Georgia', 'serif'],
    })

    typography.injectStyles()
  },
  finalize() {
    // JavaScript to be fired on all pages, after page specific JS is fired
  },
};