Herman 6.0.2

Herman Config: Sizes

Related

Accoutrement [external]

$text-ratios

scss 
$text-ratios: (
  'line-height': 1.4,
);

We only use ratios to establish line-height on Herman, since the font sizes are all responsive calculations.

Ratio line-height (1.4)

$root-sizes

scss 
$root-sizes: (
  'root': 18px,
  'responsive': calc(1em + 0.125vw),
  'large': calc(1rem + 0.5vw),
  'small': 0.9rem,
);

We use a responsive viewport-based size for the root of our typography, with a px-based fallback for older browsers and unit conversions. We also provide small and large font-sizes to be used in special cases.

These sizes should only be accessed for establishing the root size on the html tag, or assigned more semantic names before applying to patterns and components.

Size Previews

$text-sizes

scss 
$text-sizes: (
  'reset': 1rem,
  'h1': calc(1rem + 2vw),
  'h2': calc(1rem + 1vw),
  'h3': '#large',
  'quote': '#large',
  'code': '#small',
  'footer': '#small',
  'search': '#small',
);

The reset size (1rem) allows you to reset to the root font size from inside any element. We also provide a set of pattern-specific sizes to use directly in component styles.

Size Previews

$spacing-sizes

scss 
$spacing-sizes: (
  'rhythm': 1rem
    (
      'scale': 'line-height' 1,
    ),
  'gutter': '#rhythm',
  'gutter-plus': '#gutter'
    (
      'plus': '#shim',
    ),
  'double-gutter': '#gutter'
    (
      'times': 2,
    ),
  'triple-gutter': '#gutter'
    (
      'times': 3,
    ),
  'flex-gutter': 'calc(#shim + 2.5vw)',
  'spacer': 'calc(#triple-gutter + 2.5vw)',
  'gutter-minus': '#gutter'
    (
      'minus': '#half-shim',
    ),
  'shim': '#gutter'
    (
      'times': 0.5,
    ),
  'half-shim': '#shim'
    (
      'times': 0.5,
    ),
  'quarter-shim': '#shim'
    (
      'times': 0.25,
    ),
);

A mostly-linear scale of spacing-sizes based on fractions and multiples of the base line-height. These can be used to add spacing between components, and provide site hierarchy.

Size Previews

$pattern-sizes

scss 
$pattern-sizes: (
  'nav-underline': 4px,
  'nav-icon': 28px,
  'arrow-border': 8px,
  'arrow-depth': '#shim',
  'arrow-side': '#gutter',
  'font-preview': 24em,
  'specimen-aa': '#rhythm'
    (
      'times': 3,
    ),
  'color-preview': 16em,
  'color-swatch': '#rhythm'
    (
      'times': 4,
    ),
  'footer-logo': '#rhythm'
    (
      'times': 2,
    ),
);

Semantically-named sizes for managing patterns and component layouts.

Size Previews

$layout-sizes

scss 
$layout-sizes: (
  'page': 50rem,
  'item-break': 40em,
  'page-break': 50em,
  'nav-break': 65em,
);

Layout-specific sizes, for establishing larger widths and breakpoints.

Size Previews