Typography.js Versions Save

@BarryThePenguin did a fantastic job in #90 adding near 100% code coverage in one swoop. Thanks!

We also decided that the old body/header gray value & hue API was... confusing. That's not how most people think about the color of text. So now there's just bodyColor and headerColor. Also per @bvaughn suggestion in #92, headerColor defaults to 'inherit' so it's simpler to override header/body font colors together.

The helper function awkwardly known as adjustFontSizeToMS is now simply scale which nicely parallels the other commonly used Typography.js helper function rhythm.

scale is used to scale font sizes. When called it returns an object with calculated values for fontSize and lineHeight

e.g.

scale(1) // => { fontSize: '1.51572rem', lineHeight: '2.25rem' }

This makes it easy to adjust the size of elements when using inline styles or css-in-js. E.g. <div style={{...scale(1)}}</div>

To calibrate your understanding of scale values. A scale value of 0 is the size of the body font. A value of 1 is the (default) size of h1s.

Two breaking changes in interest of simplifying the UI.

• baseLineHeight takes the css unitless number now instead of a px value. This is what most people use for line-height so made sense to make the switch. PX values still work so this isn't technically a breaking change but you're encouraged to switch things over.
• modularScales is now just scale. I decided to consolidate various responsive typography concerns into a coming breakpoints option. Instead of passing an array of options to modularScales do something like:

{
  scale: 2
}

• Added two new themes. One based on the US Web Design Standards and the other on the popular CSS framework Bootstrap.

Breaking changes

• Removed fontface support as not core to goals of project + many other better solutions for this. https://github.com/KyleAMathews/typography.js/commit/ffab1e96d70fb20e049ab53afa49e7beb4eb8354
• Deprecated fontSizeToMS function and replaced it with adjustFontSizeToMSValue. https://github.com/KyleAMathews/typography.js/commit/a69a41399af31a03d010484fbb2a76a72221dd92
• Deprecated fontSizeToPx function. Use adjustFontSizeTo instead. https://github.com/KyleAMathews/typography.js/commit/a69a41399af31a03d010484fbb2a76a72221dd92

• Remove whitespace added by ES2015 template literals (it preserves white-space at front of strings) https://github.com/KyleAMathews/typography.js/commit/721bc0a79553dfce0c7361f382fbbeca59b972fb
• Fixed subthemes. Can we give two cheers for adding tests? https://github.com/KyleAMathews/typography.js/commit/39a0b80740f77bde3e3bcf86bc71389084bb34b1
• Make blockquote defaults more sensible https://github.com/KyleAMathews/typography.js/commit/0f560cb20d9420dcef37e6b94f5a8db37d6d4adf

So this is why they don't let amateurs create OSS projects ;-)

I've setup the typographical scale here wrong the whole time. This blog post was very helpful in setting me straight: http://spencermortensen.com/articles/typographic-scale/

Basically what I've learned and corrected this project to use is that the h1 should be the baseFontSize multiplied by the modular scale. And that the classic "scale" is the Octave or 2. Whereas previously I'd just eyeballed the multipliers for the various headers, they're now in line with the theory in the above article. See this and this commits for the details.

How to update

If you just used the default modular scale, then there's little to do. I've updated the default modular scale now to octave which with the new code, results in similar typography to the previous diminished fourth.

If you did set your own modular scale(s), you'll need to try larger ones until you restore the previous behavior.

Also I changed the default font-family for headers (https://github.com/KyleAMathews/typography.js/commit/e9d0bb45a677f226a4cdf2a65d964dd7645a2d15). If you want to restore that font-family stack, add this to your config headerFontFamily: '"Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif'

Other notable changes.

• Converted coffeescript to babelscript https://github.com/KyleAMathews/typography.js/commit/9dcf235fd6b8d7408e4fc9dde93d1d0d8b851e46
• Fixed bug with fontSizeToMS not using set scale. https://github.com/KyleAMathews/typography.js/commit/3caf85b742c943dfa91321b7d6f9b3eb14f5d8b7
• Update normalize.css to 4.1.1. https://github.com/KyleAMathews/typography.js/commit/b122fc90b1a7cec48f9ef0c6ace3337d4285f536
• Removed most whitespace/new lines from outputted styles https://github.com/KyleAMathews/typography.js/commit/d3359c6366b04441f9d9a18c8d16bbd01eb30327

Basically defer all work until actually needed. Don't create the styles string or React.js components unless asked for.

• #22

New Modular Scale config api

Previously the modular-scales config api was... confusing. You could pass in either just the scale or if you wanted to create a responsive option, you passed in an array where the first item was the max-width for this scale and the second was the scale. E.g.

modularScales: [
  'diminished fourth',
  ['768px', 'minor third']
]

This wasn't particularly intuitive (I had to look it up everytime).

So I made the API more explicit. It now looks like

modularScales: [
  {
    scale: 'diminished fourth'
  },
  {
    maxWidth: '768px',
    scale: 'minor third'
  }
]

Sub-theme support

A common problem when creating a site is you'll want most of the site to have a similar look-and-feel but one or two sections to be different. With the new sub-theme support, it is now easy to do this with Typography.js.

For example, to add a "blog" subtheme you'd add onto your config:

{
  baseFontSize: '16px',
  baseLineHeight: 24px',
  // Remainder of global config
  subThemes: {
    blog: {
      baseFontSize: '18px',
      baseLineHeight: '27px',
      baseFontFamily: 'Open Sans'
    }
  }
}

Typography.js wraps all sub-theme css inside a .typography-theme-{sub-theme-name} class e.g. in this case, .typography-theme-blog. Add that class to your sub-theme and you're set!