Gud Type

A type scale generator heavily inspired by the Typographic Scale Calculator from Jean-Lou Désiré.

Basic Usage

1const typeScale = gudTypeScale(
2  [
3    'footnote',
4    'endnote',
5    'caption',
6    'p',
7    'blockquote',
8    'h6',
9    'h5',
10    'h4',
11    'h3',
12    'h2',
13    'h1',
14  ],
15  { startingIndex: -3, unit: 'px' },
16)
17
18console.log(typeScale)
19// {
20//   footnote: {
21//     fontSize: '12.25px',
22//     lineHeight: '16px',
23//   },
24//   endnote: {
25//     fontSize: '14px',
26//     lineHeight: '24px',
27//   },
28//   caption: {
29//     fontSize: '14px',
30//     lineHeight: '24px',
31//   },
32//   p: {
33//     fontSize: '16px',
34//     lineHeight: '24px',
35//   },
36//   blockquote: {
37//     fontSize: '18.5px',
38//     lineHeight: '32px',
39//   },
40//   h6: {
41//     fontSize: '18.5px',
42//     lineHeight: '32px',
43//   },
44//   h5: {
45//     fontSize: '21.25px',
46//     lineHeight: '32px',
47//   },
48//   h4: {
49//     fontSize: '24.5px',
50//     lineHeight: '32px',
51//   },
52//   h3: {
53//     fontSize: '32px',
54//     lineHeight: '48px',
55//   },
56//   h2: {
57//     fontSize: '48.75px',
58//     lineHeight: '64px',
59//   },
60//   h1: {
61//     fontSize: '97.25px',
62//     lineHeight: '128px',
63//   },
64// }

Using Tailwind CSS

1const { gudTypeScale } = require('gud-type')
2
3const typeScale = gudTypeScale(
4  [    'footnote',    'endnote',    'caption',    'p',    'blockquote',    'h6',    'h5',    'h4',    'h3',    'h2',    'h1',  ],
5  { startingIndex: -3, unit: 'px' }
6)
7
8module.exports = {
9  content: ['./src/**/*.{js,jsx,ts,tsx}'],
10  theme: {
11    extend: {
12      fontSize: {
13        footnote: typeScale.footnote.fontSize,
14        endnote: typeScale.endnote.fontSize,
15        caption: typeScale.caption.fontSize,
16        p: typeScale.p.fontSize,
17        blockquote: typeScale.blockquote.fontSize,
18        h6: typeScale.h6.fontSize,
19        h5: typeScale.h5.fontSize,
20        h4: typeScale.h4.fontSize,
21        h3: typeScale.h3.fontSize,
22        h2: typeScale.h2.fontSize,
23        h1: typeScale.h1.fontSize,
24      },
25      lineHeight: {
26        footnote: typeScale.footnote.lineHeight,
27        endnote: typeScale.endnote.lineHeight,
28        caption: typeScale.caption.lineHeight,
29        p: typeScale.p.lineHeight,
30        blockquote: typeScale.blockquote.lineHeight,
31        h6: typeScale.h6.lineHeight,
32        h5: typeScale.h5.lineHeight,
33        h4: typeScale.h4.lineHeight,
34        h3: typeScale.h3.lineHeight,
35        h2: typeScale.h2.lineHeight,
36        h1: typeScale.h1.lineHeight,
37      },
38    },
39  },
40  plugins: [],
41}

Using Styled Components

1import { gudTypeScale } from 'gud-type'
2import styled from 'styled-components'
3
4const styles = gudTypeScale(
5  [
6    'footnote',
7    'endnote',
8    'caption',
9    'p',
10    'blockquote',
11    'h6',
12    'h5',
13    'h4',
14    'h3',
15    'h2',
16    'h1',
17  ],
18  { startingIndex: -3, unit: 'px' },
19)
20
21export const Footnote = styled.p(styles.footnote)
22export const Endnote = styled.p(styles.endnote)
23export const Caption = styled.p(styles.caption)
24export const P = styled.p(styles.p)
25export const Blockquote = styled.p(styles.blockquote)
26export const H6 = styled.h6(styles.h6)
27export const H5 = styled.h5(styles.h5)
28export const H4 = styled.h4(styles.h4)
29export const H3 = styled.h3(styles.h3)
30export const H2 = styled.h2(styles.h2)
31export const H1 = styled.h1(styles.h1)

Options

1interface GenerateTypeScaleOptions {
2  /**
3   * The starting point for the scale.
4   * @default 16
5   */
6  base?: number
7
8  /**
9   * The increment multiplier.
10   * @default 2
11   */
12  multiplier?: number
13
14  /**
15   * The number steps it takes to go from one multiple to the next.
16   * @default 5
17   */
18  steps?: number
19
20  /**
21   * The function used to round font sizes.
22   * @default rounder(0.25, 'up')
23   */
24  round?: (size: number) => number
25
26  /**
27   * The multiplier to use when deciding the line height of a given font size.
28   * The resulting line height will be rounded up to the closest factor of the
29   * `gridHeight`.
30   * @default 1.3
31   */
32  lineHeightMultiplier?: number
33
34  /**
35   * The desired grid height which will be used to round the line heights.
36   * @default 8
37   */
38  gridHeight?: number
39
40  /**
41   * An optional unit to add to the returned values. This will change the values
42   * from numbers to strings and is useful when passed directly to a CSS in JS
43   * library like [styled-components](https://github.com/styled-components/styled-components).
44   * @default undefined
45   */
46  unit?: string
47
48  /**
49   * starting hierarchy index
50   *
51   * This is useful if you want some styles smaller than the base.
52   *
53   * For example, if the hierarchy is `[footnote, body, ...]`, and body should be
54   * equal to the base, than the `startingIndex` would be `-1`.
55   * @default 0
56   */
57  startingIndex?: number
58
59  /**
60   * A function to convert hierarchy indexes to scale indexes
61   *
62   * **Example**
63   *
64   * given the following hierarchy:
65   * `[body, bodyLarge, h6, h5, h4, h3, h2, h1]`
66   *
67   * and the following scale *(base: 16, multiplier: 2, steps: 4)*:
68   * `[12, 15, 18, 21, 24, 30, 36, 42, 48, 56, 64, 80, 96, 120]`
69   *
70   * A 1 to 1 fn of `(i) => i` would mean body *(hierarchy index 0)* would be 12
71   * *(scale index 0)*, and h1 *(hierarchy index 7)* would be 42
72   * *(scale index 7)*.
73   *
74   * Using the fibonacci sequence *(the default method)*, `(i) => fibonacci(i)`,
75   * body *(hierarchy index 0)* would be 12 *(scale index 0)*, and h1
76   * *(hierarchy index 7)* would be 120 *(scale index 13)*.
77   * @default fibonacci
78   */
79  getScaleIndex?: (hierarchyIndex: number) => number
80}