typography.js

'use strict';

module.exports = {
  fontFamilies: {
    sans: [
      'Inter',
      '-apple-system',
      'BlinkMacSystemFont',
      'Segoe UI',
      'Roboto',
      'Oxygen',
      'Ubuntu',
      'Cantarell',
      'Helvetica Neue',
      'Apple Color Emoji',
      'Segoe UI Emoji',
      'Segoe UI Symbol',
      'Meiryo UI',
      'Arial',
      'sans-serif',
    ],
    mono: [
      'Menlo',
      'Monaco',
      'Consolas',
      'Liberation Mono',
      'Courier New',
      'monospace',
    ],
  },
  fontScales: {
    hero: {
      fontSize: 48,
      fontWeight: 800,
      letterSpacing: 0,
      lineHeight: 64,
    },
    h1: {
      fontSize: 32,
      fontWeight: 700,
      letterSpacing: 0,
      lineHeight: 40,
    },
    h2: {
      fontSize: 24,
      fontWeight: 700,
      letterSpacing: 0,
      lineHeight: 32,
    },
    h3: {
      fontSize: 20,
      fontWeight: 700,
      letterSpacing: 0,
      lineHeight: 28,
    },
    h4: {
      fontSize: 16,
      fontWeight: 700,
      letterSpacing: 0,
      lineHeight: 24,
    },
    h5: {
      fontSize: 14,
      fontWeight: 700,
      letterSpacing: 0,
      lineHeight: 20,
    },
    p1: {
      fontSize: 16,
      fontWeight: 400,
      letterSpacing: 0,
      lineHeight: 24,
    },
    p1m: {
      fontSize: 16,
      fontWeight: 500,
      letterSpacing: 0,
      lineHeight: 24,
    },
    p1b: {
      fontSize: 16,
      fontWeight: 700,
      letterSpacing: 0,
      lineHeight: 24,
    },
    p2: {
      fontSize: 14,
      fontWeight: 400,
      letterSpacing: 0,
      lineHeight: 20,
    },
    p2m: {
      fontSize: 14,
      fontWeight: 500,
      letterSpacing: 0,
      lineHeight: 20,
    },
    p2b: {
      fontSize: 14,
      fontWeight: 700,
      letterSpacing: 0,
      lineHeight: 20,
    },
    c1: {
      fontSize: 12,
      fontWeight: 400,
      letterSpacing: 0,
      lineHeight: 16,
    },
    c2: {
      fontSize: 12,
      fontWeight: 700,
      letterSpacing: 0,
      lineHeight: 16,
    },
    micro: {
      fontSize: 10,
      fontWeight: 700,
      letterSpacing: 0,
      lineHeight: 12,
    },
  },
};