Vertical rhythm on fonts is no longer (or at least a little less) painful!
base-base is a sass mix-in which stores all your base-line adjustments for fonts so you don't have to re-create them.
Base-Base Documentation generated with sassdoc
p{
// You write this
@include base-base(24px, "Open Sans", 2);
// And get this
padding-top: 0.5625rem;
margin-bottom: 1.4375rem;
margin-top: 0;
padding-bottom: 0;
font-size: 1.5rem;
line-height: 32px;
font-family: "Open Sans", Helvetica, Arial, Sans-Serif;
}None! (aside from Sass)
$fallback-font-stack: Helvetica, Arial, Sans-Serif !default;
$default-font-family: "Open Sans" !default;
$base-line-height: 16px !default;
$base-font-size: 16px !default;
$base-use-rem: true !default;
$base-base-unit: rem !default;The default lines for a given font size is assigned as d where as specific adjustments for other line-heights can be added with an integer for the given base lines.
Example font-face settings (view _font-settings-16.scss for real fonts)
$lh: 16px;
$base-base-fonts-16: (
'adelle': (
12px:('d':p2b(4px,$lh)),
14px:('d':p2b(11px,$lh)),
16px:('d':p2b(11px,$lh), 1:p2b(3px,$lh)),
18px:('d':p2b(10px,$lh)),
20px:('d':p2b(9px,$lh)),
21px:('d':p2b(9px,$lh)),
22px:('d':p2b(9px,$lh)),
24px:('d':p2b(8px,$lh)),
26px:('d':p2b(7px,$lh)),
28px:('d':p2b(7px,$lh)),
30px:('d':p2b(14px,$lh)),
32px:('d':p2b(13px,$lh)),
34px:('d':p2b(13px,$lh)),
36px:('d':p2b(11px,$lh)),
38px:('d':p2b(11px,$lh)),
40px:('d':p2b(10px,$lh)),
42px:('d':p2b(9px,$lh))
)
)Example font size with different number of lines (line heights)
$base-base-fonts-16: (
'adelle': (
// ... more sizes
16px:('d':p2b(11px,$lh), 1:p2b(3px,$lh)),
// ... more sizes
)
)