Herman Config: Sizes
Related
Accoutrement [external]
$text-ratios
$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
$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
$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
$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
$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
$layout-sizes: (
'page': 50rem,
'item-break': 40em,
'page-break': 50em,
'nav-break': 65em,
);
Layout-specific sizes, for establishing larger widths and breakpoints.