undergroundwires/privacy.sexy

View on GitHub
src/presentation/assets/styles/_typography.scss

Summary

Maintainability
Test Coverage
// Keep the amount of fonts minimal. No more than 3 (except logo and monospace)
// for visual consistency and readability.
$font-family-main       : 'Roboto Slab', serif;
$font-family-logo       : 'Slabo 27px', serif;
$font-family-monospace  : 'Source Code Pro', monospace;
$font-family-cursive    : 'Yesteryear', cursive;

/*
  This naming convention for font sizes adheres to CSS standards, distinguishing between absolute and relative sizes.

  We prefix each variable with its type (absolute or relative) for clear identification and context.
*/
// Absolute sizes use the <absolute-size> CSS data type, representing specific, fixed sizes unaffected by the parent element's size.
// See: https://archive.today/2024.02.02-005228/https://developer.mozilla.org/en-US/docs/Web/CSS/absolute-size.
$font-size-absolute-x-small   : 13px;
$font-size-absolute-small     : 15px;
$font-size-absolute-normal    : 17px;
$font-size-absolute-large     : 21px;
$font-size-absolute-x-large   : 27px;
$font-size-absolute-xx-large  : 40px;
// Relative sizes employ the <relative-size> CSS data type, allowing font size adjustments based on the parent element's size.
// See: https://archive.today/2024.02.02-010054/https://developer.mozilla.org/en-US/docs/Web/CSS/relative-size.
$font-size-relative-smallest  : 80%;
$font-size-relative-smaller   : 85%;