Atomic Bulldog - UI/pattern library

6.7 - Font Sizes

Source: variables/_font-sizes.scss, line 45

Open in new window

Font Sizes are in the map $font-sizes


  • root: 16px,
  • paragraph: 1rem,
  • 1: 2.8125rem,
  • 2: 2.5rem,
  • 3: 2rem,
  • 4: 1.5rem,
  • 5: 1.25rem,
  • 6: 1rem,
  • button: 1rem

Font sizes can be called in the sass project using the functions:

font-sizes($font-size, $true-val:false) which will output by default the CSS variable

Usage of font-size():

  • font-size(2) => var(--font-size-2) If $use-css-var = true
  • font-size(2) => 2.5rem If $use-css-var = false
  • font-size(2, true) => 2.5rem