Herman 3.0.0

Herman Config: Sizes

Related

Accoutrement Scale [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)

-3 0.36
 
-2 0.51
 
-1 0.71
 
base
 
1 1.4
 
2 1.96
 
3 2.74
 

$root-sizes

scss
$root-sizes: (
  'root': 18px,
  'responsive': calc(1em + 0.125vw),
  'large': calc(%s + %s) (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

root 18px Pack my box with five dozen liquor jugs.
responsive calc(1em + 0.125vw) Pack my box with five dozen liquor jugs.
large calc(1rem + 0.5vw) Pack my box with five dozen liquor jugs.
small 0.9rem Pack my box with five dozen liquor jugs.

$text-sizes

scss
$text-sizes: (
  'reset': 1rem,
  'h1': calc(%s + %s) (1rem, 2vw),
  'h2': calc(%s + %s) (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

reset 1rem Pack my box with five dozen liquor jugs.
h1 calc(1rem + 2vw) Pack my box with five dozen liquor jugs.
h2 calc(1rem + 1vw) Pack my box with five dozen liquor jugs.
h3, quote calc(1rem + 0.5vw) Pack my box with five dozen liquor jugs.
code, footer, search 0.9rem Pack my box with five dozen liquor jugs.

$spacing-sizes

scss
$spacing-sizes: (
  'rhythm': 1rem ('line-height': 1),
  'gutter': 'rhythm',
  'gutter-plus': 'gutter' ('plus': 'shim'),
  'double-gutter': 'gutter' ('times': 2),
  'flex-gutter': calc(%s + %s) ('shim', 2.5vw),
  'spacer': calc(%s + %s) ('gutter' ('times': 3), 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

rhythm, gutter 1.4rem
 
gutter-plus 2.1rem
 
double-gutter 2.8rem
 
flex-gutter calc(0.7rem + 2.5vw)
 
spacer calc(4.2rem + 2.5vw)
 
gutter-minus 1.05rem
 
shim 0.7rem
 
half-shim 0.35rem
 
quarter-shim 0.175rem
 

$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

nav-underline 4px
 
nav-icon 28px
 
arrow-border 8px
 
arrow-depth 0.7rem
 
arrow-side 1.4rem
 
font-preview 24em
 
specimen-aa 4.2rem
 
color-preview 16em
 
color-swatch 5.6rem
 
footer-logo 2.8rem
 

$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

page 50rem
 
item-break 40em
 
page-break 50em
 
nav-break 65em