xmeter/css/src/__tool.fontsize.less

A default stylesheet with a set of tools that make designing with vertical rhythm easy.

/*################################*\
    xmeter  |  __tool.fontsize.less
\*################################*/


// Sets the font size of a module while preserving vertical rhythm.
// Modules use their own typographical systems with their own "vertical rhythm units."
// Font size is set in rems so that the module can be placed anywhere without changing appearance.
// Line height is simply set to that of the root element, so that the "vertical rhythm unit"
// scales with font size. (Effectively the same as `inherit`.)
// Typographical blocks within this module will be vertically spaced accordingly:
//   as the font-size of this module increases, so does vertical spacing.
//
// ^params
// @ratio - (default: 1) the ratio of the new font size to the root font size, i.e., the number of rems
// ^author
// : Chris Harvey
// ^updated
// : 2016-10-01
.font-size-mod(@ratio: 1) {
  font-size: (@ratio * 1rem);
  // line-height: inherit; // NOTE clarification
  & > * {
    // COMBAK{FALLBACK} for `lh` units. remove after `lh` is supported.
    --lh: calc(@ratio * var(--line-height) * 1rem); // @ratio * parent lh
  }
}

// CHANGED:
// This mixin no longer uses the `var(--line-height)` expression, and instead
// uses the fallback value of 1.5. This mixin should only be used where
// CSS custom properties are not supported. For the most recent method,
// see documentation on the `.h-FontSize` helper.
//
// Sets the font size of an element within a module (or if not, in the root)
// while preserving vertical rhythm.
// Font size is set in ems so that it will scale accordingly with its
// parent module’s (or the root’s) font size.
// Line height is adjusted so that it remains a constant "vertical rhythm unit"
// of the parent module (or root).
// `font-size` * `line-height` = one vertical rhythm unit
//
// ^params
// @fontscale - (default: 1) the ratio of the new font size to
//          the parent font size, i.e., the number of ems
// @tracks - (default: 1) the number of vrus each line of text will take up.
//          should be a whole number to satisfy vertical rhythm.
// ^author
// : Chris Harvey
// ^updated
// : 2018-03-21
.font-size-el(@fontscale: 1; @tracks: 1) {
  @lineheight: 1.5;
  font-size: (@fontscale * 1em);
  line-height: (@lineheight / @fontscale * @tracks);
}