Type Director

Type Director generates a responsive, modular, nuanced typographic system from only a few key variables. Metrics are exported as json and cross-platform Theo tokens.

1. Modular. Typographic measurements are based on proportional lists of values.
2. Responsive. Typography adjusts to the unique constraints of each breakpoint.
3. Nuanced. Various properties allow detail-oriented typographers to align additional fonts or uppercase styles to a modular scale.

• Terminal: npm install type-director --save

Easily apply various typeface-specific adjustments:

const typefaces = [
  {
    name: 'georgia',
    fontFamily: 'Georgia',
    fontFamilyFallbacks: ['Times', 'Times New Roman'], 
    fontFamilyGeneric: 'serif',
    fontSizeAdjustment: 1.00,
    lineHeightAdjustment: 1.00,
    uppercaseAdjustment: 0.82
  },
  {
    name: 'verdana',
    fontFamily: 'Verdana',
    fontFamilyFallbacks: [],
    fontFamilyGeneric: 'sans-serif',
    fontSizeAdjustment: 0.89,
    lineHeightAdjustment: 0.94,
    uppercaseAdjustment: 0.85
  },
  {
    name: 'menlo',
    fontFamily: 'Menlo',
    fontFamilyFallbacks: ['Consolas'],
    fontFamilyGeneric: 'monospace',
    fontSizeAdjustment: 1.00,
    lineHeightAdjustment: 1.00,
    uppercaseAdjustment: 0.85
  }
]

Oftentimes two typfaces set to the same font-size do not appear to be. This is because the heights of their lowercase letters are not equal. Use the fontSizeAdjustment property to normalize additional typefaces to the default typeface, ensuring they align to the modular scale.

For example, Verdana appears 11% larger than Georgia. To normalize it with Georgia, we can set a fontSizeAdjustment: 0.89. This will cause Verdana to be 11% smaller than Georgia when set to the same "size".

Similarly, you can also apply an adjustment to line-height on a typeface-by-typeface basis by specifying a lineHeightAdjustment.

Easily create a modular scales that adapt to each environment:

const scales = [ 
  {
    name: 'phone',
    fontSize: {
      base: 16,
      max: 28,
      unit: 'px'
    },
    lineHeight: {
      base: 1.45,
      max: 1.35,
      unit: ''
    }
  },
  {
    name: 'tablet',
    fontSize: {
      base: 18,
      max: 42,
      unit: 'px'
    },
    lineHeight: {
      base: 1.4,
      max: 1.25,
      unit: ''
    }
  }
]

For each scale, provide a font size and line height for both your base size and max size. The other sizes will be interpolated from these constraints.

const typography = TypeDirector({
  typefaces: typefaces,
  scales: scales,
  sizes: {
    smaller: 1,
    larger: 3
  },
})

That's it! The returned object will include Theo tokens for font size, line height, and font family.

If you need a bit of typographic guidance, Responsive Typography: The Basics by Information Architects is an excellent read.

Rounding to any precision is supported.

const scales = [ 
  {
    name: 'phone',
    fontSize: {
      base: 16,
      max: 28,
      unit: 'px',
      precision: 0.1
    },
    lineHeight: {
      base: 1.45,
      max: 1.35,
      unit: '',
      precision: 0.01
    }
  },
  ...
]

Oftentimes you may need to set very narrow lines of text, causing your line-height to look too loose. For a tighter line-height, use the "line-height": "tight" option.

.caption-tight { 
  @include td-responsive-type-size("verdana", -1, $opts: ("line-height": "tight"));
}