Typography

Sizes, styles and other goodies.

If you have R&P opened up in your code editor, let’s take a look at type.js in the tokens folder.

Much like every other token file in our design folder, the data is organized as a plain ol’ javascript object. At the end of the day, this is what Stitches API expects to see.

If you don’t have access to this file at the moment, here is a skeletal version of what you would see:

const type = {

// We have a typeStyles object that declares line height and font size of each unique
// instance we find in the given figma file:
const typeStyles = {
  '9xl': {
    lineHeight: 1,
    fontSize: '8rem',
  },
  '8xl': {
    lineHeight: 100 / 96,
    fontSize: '6rem',
  },
  '7xl': {
    lineHeight: 76 / 72,
    fontSize: '4.5rem',
  },
  '6xl': {
    lineHeight: 64 / 60,
    fontSize: '4rem',
  },
  '5xl': {
    lineHeight: 52 / 48,
    fontSize: '3rem',
  },
  ...
}

// The standard font features are listed next.
  fonts: {...},
  lineHeights: {...},
  fontWeights: {...},
  letterSpacings: {...},

// Next, we list font sizes for our base type, headings, buttons, captions, etc.
// Media queries are also stated here.
// Note that we reference the typeStyles object here (our single source of truth).
  fontSizes: {
     ...typeStyles,
    baseType: {
      ...typeStyles.base,
      '@>s': typeStyles.lg,
    },
    baseTypeAlt: {
      ...typeStyles.sm,
      '@>s': typeStyles.base,
    },
    subHeading: {
      ...typeStyles.lg,
      '@>s': typeStyles.xl,
      '@>l': typeStyles['2xl'],
    },
    subHeadingAlt: {
      ...typeStyles.base,
      '@>s': typeStyles.lg,
    },
    h1: {
      ...typeStyles['5xl'],
      '@>s': typeStyles['6xl'],
      '@>l': typeStyles['7xl'],
    },
    h2: {
      ...typeStyles['4xl'],
      '@>s': typeStyles['5xl'],
      '@>l': typeStyles['6xl'],
    },
    ...
  },

// Finally, we have a separate object that deals with the font styles.
// Note the use of the '$'. This is how we access our tokens in Stitches.
  fontStyles: {
    baseType: {
      fontFamily: '$base',
      fontWeight: '$light',
    },
    h1: {...},
    h2: {...},
    ...
  }

The big takeaway is that we really like keeping styles and sizes separate from each other. This gives us ultimate flexibility when it comes to styling our components.

Let's take a moment to cover three very useful custom utilities that we’ve created: type, typeSizes and typeStyles.

Let’s say that while building a content component, we referenced the Figma file and saw that there was a design change. The main content paragraph now includes an H3 and the font size and line height of the body text is styled like an H5.

Here is how we would adjust our styling:

const $ContentHeading = styled('h3', {

// The 'type' utility merges the fontStyles and fontSizes
// objects so we get everthing with one declaration.
  type: 'h3',
})

const $MainContent = styled('p', {

// We can cherry pick the fontSizes of the
// h5 and maintain the fontStyles of the base type.
  typeSizes: 'h5'
  typeStyles: 'baseType',
})

🦶🔫  Footgun: because these are custom utility functions, they expect plain strings as arguments, NOT the token version ($h5). We use tokens for standard CSS properties.

You will be referencing this file a lot during development, and since typography is one of the single most important elements of any given design, it is crucial that you take the time to process the design file you're give and make sure all the typeStyles have been properly assigned. Your development experience will benefit greatly as a result.