_fonts.scss 1.4 KB

123456789101112131415161718192021222324252627
  1. /*
  2. * IBM Plex Sans (Google Font)
  3. */
  4. // Font and typographic variables
  5. $font__body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  6. $font__heading: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  7. $font__code: Menlo, monaco, Consolas, Lucida Console, monospace;
  8. $font__pre: "Courier 10 Pitch", Courier, monospace;
  9. $font__size_base: 22px;
  10. $font__size-ratio: 1.125;
  11. $font__size-xxs: 1em / (1.5 * $font__size-ratio); // 22 / 1.6875 = 0.592em = 13.037037px
  12. $font__size-xs: 1em / (1.25 * $font__size-ratio); // 22 / 1.40625 = 0.7111em = 15.6444px
  13. $font__size-sm: 1em / (1 * $font__size-ratio); // 22 / 1.125 = 0.8888em = 19.5555px
  14. $font__size-md: 1em * (1 * $font__size-ratio); // 22 * 1.125 = 1.125em = 24.75px
  15. $font__size-lg: 1em * (1.5 * $font__size-ratio); // 22 * 1.6875 = 1.6875em = 37.125px
  16. $font__size-xl: 1em * (2 * $font__size-ratio); // 22 * 2.25 = 2.25em = 49.5px
  17. $font__size-xxl: 1em * (2.5 * $font__size-ratio); // 22 * 2.8125 = 2.8125em = 61.875px
  18. $font__size-xxxl: 1em * (3 * $font__size-ratio); // 22 * 3.375 = 3.375em = 74.25px
  19. $font__line-height-body: 1.8;
  20. $font__line-height-pre: 1.6;
  21. $font__line-height-heading: 1.2;
  22. $font__line-height-double: 2 * $font__line-height-heading;