@fifteen/design-system-vue/dist/styles/settings/font.styl

Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System

// helpers
$font-family-heading ?= 'ES-Build', sans-serif
$font-family-text ?= 'Poppins', sans-serif
// generic
$fluid-font ?= {
  breakpoint-min: $breakpoints.xs,
  breakpoint-max: $breakpoints.lg
}
$fonts ?= {
  bigger-1: {
    font-size: {
      min: 88px,
      max: 192px
    },
    line-height: {
      min: 96px,
      max: 200px
    },
    font-weight: 800,
    font-family: $font-family-heading,
    letter-spacing: rem(-1.5px)
  },
  bigger-2: {
    font-size: {
      min: 80px,
      max: 168px
    },
    line-height: {
      min: 88px,
      max: 176px
    },
    font-weight: 800,
    font-family: $font-family-heading,
    letter-spacing: rem(-1.5px)
  },
  bigger-3: {
    font-size: {
      min: 72px,
      max: 144px
    },
    line-height: {
      min: 80px,
      max: 152px
    },
    font-weight: 800,
    font-family: $font-family-heading,
    letter-spacing: rem(-1.5px)
  },
  bigger-4: {
    font-size: {
      min: 64px,
      max: 120px
    },
    line-height: {
      min: 72px,
      max: 128px
    },
    font-weight: 800,
    font-family: $font-family-heading,
    letter-spacing: rem(-1.5px)
  },
  heading-1: {
    font-size: {
      min: 56px,
      max: 96px
    },
    line-height: {
      min: 64px,
      max: 104px
    },
    font-weight: 800,
    font-family: $font-family-heading,
    letter-spacing: rem(-1.5px)
  },
  heading-2: {
    font-size: {
      min: 48px,
      max: 64px
    },
    line-height: {
      min: 56px,
      max: 72px
    },
    font-weight: 800,
    font-family: $font-family-heading,
    letter-spacing: rem(-0.5px)
  },
  heading-3: {
    font-size: {
      min: 40px,
      max: 48px
    },
    line-height: {
      min: 48px,
      max: 56px
    },
    font-weight: 800,
    font-family: $font-family-heading
  },
  heading-4: {
    font-size: {
      min: 32px,
      max: 32px
    },
    line-height: {
      min: 40px,
      max: 40px
    },
    letter-spacing: rem(0.25px),
    font-weight: 800,
    font-family: $font-family-heading
  },
  heading-5: {
    font-size: {
      min: 24px,
      max: 24px
    },
    line-height: {
      min: 32px,
      max: 32px
    },
    font-weight: 800,
    font-family: $font-family-heading
  },
  heading-6: {
    font-size: {
      min: 20px,
      max: 20px
    },
    line-height: {
      min: 24px,
      max: 24px
    },
    font-weight: 800,
    font-family: $font-family-heading,
    letter-spacing: rem(0.15px)
  },
  subtitle-1: {
    font-size: {
      min: 16px,
      max: 16px
    },
    line-height: {
      min: 24px,
      max: 24px
    },
    font-weight: 700,
    font-family: $font-family-text,
    letter-spacing: rem(0.15px)
  },
  subtitle-2: {
    font-size: {
      min: 14px,
      max: 14px
    },
    line-height: {
      min: 16px,
      max: 24px
    },
    font-weight: 700,
    font-family: $font-family-text,
    letter-spacing: rem(0.1px)
  },
  body-1: {
    font-size: {
      min: 16px,
      max: 24px
    },
    line-height: {
      min: 24px,
      max: 32px
    },
    font-weight: 500,
    font-family: $font-family-text,
    letter-spacing: rem(0.25px)
  },
  body-2: {
    font-size: {
      min: 16px,
      max: 16px
    },
    line-height: {
      min: 24px,
      max: 24px
    },
    font-weight: 500,
    font-family: $font-family-text,
    letter-spacing: rem(0.5px)
  },
  button: {
    font-size: {
      min: 14px,
      max: 14px
    },
    line-height: {
      min: 16px,
      max: 16px
    },
    font-weight: 800,
    font-family: $font-family-heading,
    letter-spacing: rem(0.5px)
  },
  caption: {
    font-size: {
      min: 12px,
      max: 12px
    },
    line-height: {
      min: 16px,
      max: 16px
    },
    font-weight: 500,
    font-family: $font-family-text,
    letter-spacing: rem(0.4px)
  },
  overline: {
    font-size: {
      min: 16px,
      max: 16px
    },
    line-height: {
      min: 24px,
      max: 24px
    },
    font-weight: 700,
    font-family: $font-family-text,
    letter-spacing: rem(1px)
  }
}