Typografier
—a modular typography building tool
Breakpoint
Font-size
Line-height
Type scale
Hang punc.?
∞
%
1.067 — Minor Second
1.125 — Major Second
1.200 — Minor Third
1.250 — Major Third
1.333 — Perfect Fourth
1.414 — Augmented Fourth
1.500 — Perfect Fifth
1.600 — Minor Sixth
1.618 — Golden Ratio
1.667 — Major Sixth
1.778 — Minor Seventh
1.875 — Major Seventh
2.000 — Octave
2.500 — Major Tenth
em
%
1.067 — Minor Second
1.125 — Major Second
1.200 — Minor Third
1.250 — Major Third
1.333 — Perfect Fourth
1.414 — Augmented Fourth
1.500 — Perfect Fifth
1.600 — Minor Sixth
1.618 — Golden Ratio
1.667 — Major Sixth
1.778 — Minor Seventh
1.875 — Major Seventh
2.000 — Octave
2.500 — Major Tenth
Remove
em
%
1.067 — Minor Second
1.125 — Major Second
1.200 — Minor Third
1.250 — Major Third
1.333 — Perfect Fourth
1.414 — Augmented Fourth
1.500 — Perfect Fifth
1.600 — Minor Sixth
1.618 — Golden Ratio
1.667 — Major Sixth
1.778 — Minor Seventh
1.875 — Major Seventh
2.000 — Octave
2.500 — Major Tenth
Remove
em
%
1.067 — Minor Second
1.125 — Major Second
1.200 — Minor Third
1.250 — Major Third
1.333 — Perfect Fourth
1.414 — Augmented Fourth
1.500 — Perfect Fifth
1.600 — Minor Sixth
1.618 — Golden Ratio
1.667 — Major Sixth
1.778 — Minor Seventh
1.875 — Major Seventh
2.000 — Octave
2.500 — Major Tenth
Remove
Legacy support
IE <= 8
Add breakpoint
Preview
/* Typografier || Code released under the UNLICENSE https://typografier.web-dev.tools/#0,100,1.3,1.067,0;38,110,1.4,1.125,1;60,120,1.5,1.125,1;90,130,1.5,1.125,1 */ html { font-size: 100%; line-height: 1.3; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } sub, sup { font-size: .75em; line-height: 1px; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } pre, code, kbd, samp { font-size: 1em; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bold; } dfn, caption { font-style: italic; } hr { border: 0; border-top: 2px solid #000; height: 0; } table { border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed; } caption { text-align: left; } th, td { border-bottom: 1px solid #000; text-align: left; vertical-align: top; } thead th { vertical-align: bottom; border-bottom-width: 2px; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .normal { font-weight: normal; font-style: normal; } .not-bold { font-weight: normal; } .not-italic { font-style: normal; } .bold { font-weight: bold; } .italic { font-style: italic; } .text-upper { text-transform: uppercase; } .text-lower { text-transform: lowercase; } .wrapper { margin-left: auto; margin-right: auto; max-width: 52em; width: 100%; } .wrapper-no-center { max-width: 52em; width: 100%; } .max-length { margin-left: auto; margin-right: auto; max-width: 36em; width: 100%; } .max-length-no-center { max-width: 36em; width: 100%; } h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, details, hr, fieldset, pre, table, caption, menu { margin: 0 0 1.3rem; } .tenamega { font-size: 2.0408rem; line-height: 2.925rem; } .tenakilo { font-size: 1.9127rem; line-height: 2.6rem; } .tena { font-size: 1.7926rem; line-height: 2.6rem; } .nina { font-size: 1.68rem; line-height: 2.275rem; } .yotta { font-size: 1.5745rem; line-height: 2.275rem; } .zetta { font-size: 1.4757rem; line-height: 1.95rem; } h1, .exa { font-size: 1.383rem; line-height: 1.95rem; } h2, .peta { font-size: 1.2962rem; line-height: 1.95rem; } h3, .tera { font-size: 1.2148rem; line-height: 1.625rem; } h4, .giga { font-size: 1.1385rem; line-height: 1.625rem; } h5, .mega { font-size: 1.067rem; line-height: 1.625rem; } h6, .kilo, input, textarea { font-size: 1rem; line-height: 1.3rem; } small, .milli { font-size: .9372rem; line-height: 1.3rem; } .micro { font-size: .8784rem; line-height: 1.3rem; } .nano { font-size: .8232rem; line-height: 1.3rem; } .pico { font-size: .7715rem; line-height: 1.3rem; } ul { padding-left: 1em; } ol { padding-left: 1.6em; } input, option, select { height: calc(1.3rem + .1625rem + .1625rem); } [type="color"] { width: calc(1.3rem + .1625rem + .1625rem); } [type="checkbox"], [type="radio"] { display: inline-block; height: auto; } .push { margin-bottom: 1.3rem; } .push-none, .push-0 { margin-bottom: 0; } .push-double, .push-2 { margin-bottom: 2.6rem; } .push-three-quarters, .push-3-4 { margin-bottom: .975rem; } .push-half, .push-1-2 { margin-bottom: .65rem; } .push-quarter, .push-1-4 { margin-bottom: .325rem; } .push-eighth, .push-1-8 { margin-bottom: .1625rem; } .push-right-eighth, .push-r-1-8 { margin-right: .1625rem; } .push-right-quarter, .push-r-1-4 { margin-right: .325rem; } .push-right-half, .push-r-1-2 { margin-right: .65rem; } .push-right-three-quarters, .push-r-3-4 { margin-right: .975rem; } .push-right, .push-r { margin-right: 1.3rem; } .pad-top, .pad-t { padding-top: 1.3rem; } .pad-bottom, .pad-b { padding-bottom: 1.3rem; } .pad-top-double, .pad-t-2 { padding-top: 2.6rem; } .pad-bottom-double, .pad-b-2 { padding-bottom: 2.6rem; } .pad-top-three-quarters, .pad-t-3-4 { padding-top: .975rem; } .pad-bottom-three-quarters, .pad-b-3-4 { padding-bottom: .975rem; } .pad-top-half, .pad-t-1-2 { padding-top: .65rem; } .pad-bottom-half, .pad-b-1-2 { padding-bottom: .65rem; } .pad-top-quarter, .pad-t-1-4 { padding-top: .325rem; } .pad-bottom-quarter, .pad-b-1-4 { padding-bottom: .325rem; } .pad-top-eighth, .pad-t-1-8 { padding-top: .1625rem; } .pad-bottom-eighth, .pad-b-1-8 { padding-bottom: .1625rem; } .island { padding: 1.3rem; } .island-double, .island-2 { padding: 2.6rem; } .island-three-quarters, .island-3-4 { padding: .975rem; } .island-half, .island-1-2 { padding: .65rem; } .island-quarter, .island-1-4, td, table th { padding: .325rem; } .island-eighth, .island-1-8, input:not([type="checkbox"]), input:not([type="radio"]), textarea { padding: .1625rem; } .gutter { padding-left: 1.3rem; padding-right: 1.3rem; } .gutter-double, .gutter-2 { padding-left: 2.6rem; padding-right: 2.6rem; } .gutter-three-quarters, .gutter-3-4 { padding-left: .975rem; padding-right: .975rem; } .gutter-half, .gutter-1-2 { padding-left: .65rem; padding-right: .65rem; } .gutter-quarter, .gutter-1-4, caption { padding-left: .325rem; padding-right: .325rem; } .gutter-eighth, .gutter-1-8 { padding-left: .1625rem; padding-right: .1625rem; } .i-1 { height: 1.3rem; width: 1.3rem; } .i-3-4 { height: .975rem; width: .975rem; } .i-1-2 { height: .65rem; width: .65rem; } .i-1-4 { height: .325rem; width: .325rem; } .i-1-8 { height: .1625rem; width: .1625rem; } .i-1-1-2, .i-3-2 { height: 1.95rem; width: 1.95rem; } .i-1-1-4, .i-5-4 { height: 1.625rem; width: 1.625rem; } .i-1-3-4, .i-7-4 { height: 2.275rem; width: 2.275rem; } .i-2 { height: 2.6rem; width: 2.6rem; } select { padding: 0 .1625rem; } fieldset { padding: .325rem 0; border: 0; border-top: 2px solid #000; } legend { padding-right: .325rem; } @media only screen and (min-width: 38em) { html { font-size: 110%; line-height: 1.4; } h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, details, hr, fieldset, pre, table, caption, menu { margin: 0 0 1.4rem; } .tenamega { font-size: 3.6532rem; line-height: 4.9rem; } .tenakilo { font-size: 3.2473rem; line-height: 4.55rem; } .tena { font-size: 2.8865rem; line-height: 3.85rem; } .nina { font-size: 2.5658rem; line-height: 3.5rem; } .yotta { font-size: 2.2807rem; line-height: 3.15rem; } .zetta { font-size: 2.0273rem; line-height: 2.8rem; } h1, .exa { font-size: 1.802rem; line-height: 2.45rem; } h2, .peta { font-size: 1.6018rem; line-height: 2.1rem; } h3, .tera { font-size: 1.4238rem; line-height: 2.1rem; } h4, .giga { font-size: 1.2656rem; line-height: 1.75rem; } h5, .mega { font-size: 1.125rem; line-height: 1.75rem; } h6, .kilo, input, textarea { font-size: 1rem; line-height: 1.4rem; } small, .milli { font-size: .8889rem; line-height: 1.4rem; } .micro { font-size: .7901rem; line-height: 1.4rem; } .nano { font-size: .7023rem; line-height: 1.05rem; } .pico { font-size: .6243rem; line-height: 1.05rem; } ul, ol { padding-left: 0; } ul ul, ol ul { padding-left: 1em; } ol ol, ul ol { padding-left: 1.6em; } .hang-punc { float: left; margin-left: -1.4em; text-align: right; width: 1.3em; } table { margin-left: -.35rem; margin-right: -.35rem; width: calc(100% + .35rem + .35rem); } input, option, select { height: calc(1.4rem + .175rem + .175rem); } [type="color"] { width: calc(1.4rem + .175rem + .175rem); } [type="checkbox"], [type="radio"] { display: inline-block; height: auto; } .push { margin-bottom: 1.4rem; } .push-none, .push-0 { margin-bottom: 0; } .push-double, .push-2 { margin-bottom: 2.8rem; } .push-three-quarters, .push-3-4 { margin-bottom: 1.05rem; } .push-half, .push-1-2 { margin-bottom: .7rem; } .push-quarter, .push-1-4 { margin-bottom: .35rem; } .push-eighth, .push-1-8 { margin-bottom: .175rem; } .push-right-eighth, .push-r-1-8 { margin-right: .175rem; } .push-right-quarter, .push-r-1-4 { margin-right: .35rem; } .push-right-half, .push-r-1-2 { margin-right: .7rem; } .push-right-three-quarters, .push-r-3-4 { margin-right: 1.05rem; } .push-right, .push-r { margin-right: 1.4rem; } .pad-top, .pad-t { padding-top: 1.4rem; } .pad-bottom, .pad-b { padding-bottom: 1.4rem; } .pad-top-double, .pad-t-2 { padding-top: 2.8rem; } .pad-bottom-double, .pad-b-2 { padding-bottom: 2.8rem; } .pad-top-three-quarters, .pad-t-3-4 { padding-top: 1.05rem; } .pad-bottom-three-quarters, .pad-b-3-4 { padding-bottom: 1.05rem; } .pad-top-half, .pad-t-1-2 { padding-top: .7rem; } .pad-bottom-half, .pad-b-1-2 { padding-bottom: .7rem; } .pad-top-quarter, .pad-t-1-4 { padding-top: .35rem; } .pad-bottom-quarter, .pad-b-1-4 { padding-bottom: .35rem; } .pad-top-eighth, .pad-t-1-8 { padding-top: .175rem; } .pad-bottom-eighth, .pad-b-1-8 { padding-bottom: .175rem; } .island { padding: 1.4rem; } .island-double, .island-2 { padding: 2.8rem; } .island-three-quarters, .island-3-4 { padding: 1.05rem; } .island-half, .island-1-2 { padding: .7rem; } .island-quarter, .island-1-4, td, table th { padding: .35rem; } .island-eighth, .island-1-8, input:not([type="checkbox"]), input:not([type="radio"]), textarea { padding: .175rem; } .gutter { padding-left: 1.4rem; padding-right: 1.4rem; } .gutter-double, .gutter-2 { padding-left: 2.8rem; padding-right: 2.8rem; } .gutter-three-quarters, .gutter-3-4 { padding-left: 1.05rem; padding-right: 1.05rem; } .gutter-half, .gutter-1-2 { padding-left: .7rem; padding-right: .7rem; } .gutter-quarter, .gutter-1-4, caption { padding-left: .35rem; padding-right: .35rem; } .gutter-eighth, .gutter-1-8 { padding-left: .175rem; padding-right: .175rem; } .i-1 { height: 1.4rem; width: 1.4rem; } .i-3-4 { height: 1.05rem; width: 1.05rem; } .i-1-2 { height: .7rem; width: .7rem; } .i-1-4 { height: .35rem; width: .35rem; } .i-1-8 { height: .175rem; width: .175rem; } .i-1-1-2, .i-3-2 { height: 2.1rem; width: 2.1rem; } .i-1-1-4, .i-5-4 { height: 1.75rem; width: 1.75rem; } .i-1-3-4, .i-7-4 { height: 2.45rem; width: 2.45rem; } .i-2 { height: 2.8rem; width: 2.8rem; } select { padding: 0 .175rem; } fieldset { padding: .35rem 0; border: 0; border-top: 2px solid #000; } legend { padding-right: .35rem; } } @media only screen and (min-width: 60em) { html { font-size: 120%; line-height: 1.5; } h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, details, hr, fieldset, pre, table, caption, menu { margin: 0 0 1.5rem; } .tenamega { font-size: 3.6532rem; line-height: 4.875rem; } .tenakilo { font-size: 3.2473rem; line-height: 4.5rem; } .tena { font-size: 2.8865rem; line-height: 4.125rem; } .nina { font-size: 2.5658rem; line-height: 3.375rem; } .yotta { font-size: 2.2807rem; line-height: 3rem; } .zetta { font-size: 2.0273rem; line-height: 3rem; } h1, .exa { font-size: 1.802rem; line-height: 2.625rem; } h2, .peta { font-size: 1.6018rem; line-height: 2.25rem; } h3, .tera { font-size: 1.4238rem; line-height: 1.875rem; } h4, .giga { font-size: 1.2656rem; line-height: 1.875rem; } h5, .mega { font-size: 1.125rem; line-height: 1.5rem; } h6, .kilo, input, textarea { font-size: 1rem; line-height: 1.5rem; } small, .milli { font-size: .8889rem; line-height: 1.5rem; } .micro { font-size: .7901rem; line-height: 1.5rem; } .nano { font-size: .7023rem; line-height: 1.125rem; } .pico { font-size: .6243rem; line-height: 1.125rem; } ul, ol { padding-left: 0; } ul ul, ol ul { padding-left: 1em; } ol ol, ul ol { padding-left: 1.6em; } .hang-punc { float: left; margin-left: -1.4em; text-align: right; width: 1.3em; } table { margin-left: -.375rem; margin-right: -.375rem; width: calc(100% + .375rem + .375rem); } input, option, select { height: calc(1.5rem + .1875rem + .1875rem); } [type="color"] { width: calc(1.5rem + .1875rem + .1875rem); } [type="checkbox"], [type="radio"] { display: inline-block; height: auto; } .push { margin-bottom: 1.5rem; } .push-none, .push-0 { margin-bottom: 0; } .push-double, .push-2 { margin-bottom: 3rem; } .push-three-quarters, .push-3-4 { margin-bottom: 1.125rem; } .push-half, .push-1-2 { margin-bottom: .75rem; } .push-quarter, .push-1-4 { margin-bottom: .375rem; } .push-eighth, .push-1-8 { margin-bottom: .1875rem; } .push-right-eighth, .push-r-1-8 { margin-right: .1875rem; } .push-right-quarter, .push-r-1-4 { margin-right: .375rem; } .push-right-half, .push-r-1-2 { margin-right: .75rem; } .push-right-three-quarters, .push-r-3-4 { margin-right: 1.125rem; } .push-right, .push-r { margin-right: 1.5rem; } .pad-top, .pad-t { padding-top: 1.5rem; } .pad-bottom, .pad-b { padding-bottom: 1.5rem; } .pad-top-double, .pad-t-2 { padding-top: 3rem; } .pad-bottom-double, .pad-b-2 { padding-bottom: 3rem; } .pad-top-three-quarters, .pad-t-3-4 { padding-top: 1.125rem; } .pad-bottom-three-quarters, .pad-b-3-4 { padding-bottom: 1.125rem; } .pad-top-half, .pad-t-1-2 { padding-top: .75rem; } .pad-bottom-half, .pad-b-1-2 { padding-bottom: .75rem; } .pad-top-quarter, .pad-t-1-4 { padding-top: .375rem; } .pad-bottom-quarter, .pad-b-1-4 { padding-bottom: .375rem; } .pad-top-eighth, .pad-t-1-8 { padding-top: .1875rem; } .pad-bottom-eighth, .pad-b-1-8 { padding-bottom: .1875rem; } .island { padding: 1.5rem; } .island-double, .island-2 { padding: 3rem; } .island-three-quarters, .island-3-4 { padding: 1.125rem; } .island-half, .island-1-2 { padding: .75rem; } .island-quarter, .island-1-4, td, table th { padding: .375rem; } .island-eighth, .island-1-8, input:not([type="checkbox"]), input:not([type="radio"]), textarea { padding: .1875rem; } .gutter { padding-left: 1.5rem; padding-right: 1.5rem; } .gutter-double, .gutter-2 { padding-left: 3rem; padding-right: 3rem; } .gutter-three-quarters, .gutter-3-4 { padding-left: 1.125rem; padding-right: 1.125rem; } .gutter-half, .gutter-1-2 { padding-left: .75rem; padding-right: .75rem; } .gutter-quarter, .gutter-1-4, caption { padding-left: .375rem; padding-right: .375rem; } .gutter-eighth, .gutter-1-8 { padding-left: .1875rem; padding-right: .1875rem; } .i-1 { height: 1.5rem; width: 1.5rem; } .i-3-4 { height: 1.125rem; width: 1.125rem; } .i-1-2 { height: .75rem; width: .75rem; } .i-1-4 { height: .375rem; width: .375rem; } .i-1-8 { height: .1875rem; width: .1875rem; } .i-1-1-2, .i-3-2 { height: 2.25rem; width: 2.25rem; } .i-1-1-4, .i-5-4 { height: 1.875rem; width: 1.875rem; } .i-1-3-4, .i-7-4 { height: 2.625rem; width: 2.625rem; } .i-2 { height: 3rem; width: 3rem; } select { padding: 0 .1875rem; } fieldset { padding: .375rem 0; border: 0; border-top: 2px solid #000; } legend { padding-right: .375rem; } } @media only screen and (min-width: 90em) { html { font-size: 130%; line-height: 1.5; } h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, details, hr, fieldset, pre, table, caption, menu { margin: 0 0 1.5rem; } .tenamega { font-size: 3.6532rem; line-height: 4.875rem; } .tenakilo { font-size: 3.2473rem; line-height: 4.5rem; } .tena { font-size: 2.8865rem; line-height: 4.125rem; } .nina { font-size: 2.5658rem; line-height: 3.375rem; } .yotta { font-size: 2.2807rem; line-height: 3rem; } .zetta { font-size: 2.0273rem; line-height: 3rem; } h1, .exa { font-size: 1.802rem; line-height: 2.625rem; } h2, .peta { font-size: 1.6018rem; line-height: 2.25rem; } h3, .tera { font-size: 1.4238rem; line-height: 1.875rem; } h4, .giga { font-size: 1.2656rem; line-height: 1.875rem; } h5, .mega { font-size: 1.125rem; line-height: 1.5rem; } h6, .kilo, input, textarea { font-size: 1rem; line-height: 1.5rem; } small, .milli { font-size: .8889rem; line-height: 1.5rem; } .micro { font-size: .7901rem; line-height: 1.5rem; } .nano { font-size: .7023rem; line-height: 1.125rem; } .pico { font-size: .6243rem; line-height: 1.125rem; } ul, ol { padding-left: 0; } ul ul, ol ul { padding-left: 1em; } ol ol, ul ol { padding-left: 1.6em; } .hang-punc { float: left; margin-left: -1.4em; text-align: right; width: 1.3em; } table { margin-left: -.375rem; margin-right: -.375rem; width: calc(100% + .375rem + .375rem); } input, option, select { height: calc(1.5rem + .1875rem + .1875rem); } [type="color"] { width: calc(1.5rem + .1875rem + .1875rem); } [type="checkbox"], [type="radio"] { display: inline-block; height: auto; } .push { margin-bottom: 1.5rem; } .push-none, .push-0 { margin-bottom: 0; } .push-double, .push-2 { margin-bottom: 3rem; } .push-three-quarters, .push-3-4 { margin-bottom: 1.125rem; } .push-half, .push-1-2 { margin-bottom: .75rem; } .push-quarter, .push-1-4 { margin-bottom: .375rem; } .push-eighth, .push-1-8 { margin-bottom: .1875rem; } .push-right-eighth, .push-r-1-8 { margin-right: .1875rem; } .push-right-quarter, .push-r-1-4 { margin-right: .375rem; } .push-right-half, .push-r-1-2 { margin-right: .75rem; } .push-right-three-quarters, .push-r-3-4 { margin-right: 1.125rem; } .push-right, .push-r { margin-right: 1.5rem; } .pad-top, .pad-t { padding-top: 1.5rem; } .pad-bottom, .pad-b { padding-bottom: 1.5rem; } .pad-top-double, .pad-t-2 { padding-top: 3rem; } .pad-bottom-double, .pad-b-2 { padding-bottom: 3rem; } .pad-top-three-quarters, .pad-t-3-4 { padding-top: 1.125rem; } .pad-bottom-three-quarters, .pad-b-3-4 { padding-bottom: 1.125rem; } .pad-top-half, .pad-t-1-2 { padding-top: .75rem; } .pad-bottom-half, .pad-b-1-2 { padding-bottom: .75rem; } .pad-top-quarter, .pad-t-1-4 { padding-top: .375rem; } .pad-bottom-quarter, .pad-b-1-4 { padding-bottom: .375rem; } .pad-top-eighth, .pad-t-1-8 { padding-top: .1875rem; } .pad-bottom-eighth, .pad-b-1-8 { padding-bottom: .1875rem; } .island { padding: 1.5rem; } .island-double, .island-2 { padding: 3rem; } .island-three-quarters, .island-3-4 { padding: 1.125rem; } .island-half, .island-1-2 { padding: .75rem; } .island-quarter, .island-1-4, td, table th { padding: .375rem; } .island-eighth, .island-1-8, input:not([type="checkbox"]), input:not([type="radio"]), textarea { padding: .1875rem; } .gutter { padding-left: 1.5rem; padding-right: 1.5rem; } .gutter-double, .gutter-2 { padding-left: 3rem; padding-right: 3rem; } .gutter-three-quarters, .gutter-3-4 { padding-left: 1.125rem; padding-right: 1.125rem; } .gutter-half, .gutter-1-2 { padding-left: .75rem; padding-right: .75rem; } .gutter-quarter, .gutter-1-4, caption { padding-left: .375rem; padding-right: .375rem; } .gutter-eighth, .gutter-1-8 { padding-left: .1875rem; padding-right: .1875rem; } .i-1 { height: 1.5rem; width: 1.5rem; } .i-3-4 { height: 1.125rem; width: 1.125rem; } .i-1-2 { height: .75rem; width: .75rem; } .i-1-4 { height: .375rem; width: .375rem; } .i-1-8 { height: .1875rem; width: .1875rem; } .i-1-1-2, .i-3-2 { height: 2.25rem; width: 2.25rem; } .i-1-1-4, .i-5-4 { height: 1.875rem; width: 1.875rem; } .i-1-3-4, .i-7-4 { height: 2.625rem; width: 2.625rem; } .i-2 { height: 3rem; width: 3rem; } select { padding: 0 .1875rem; } fieldset { padding: .375rem 0; border: 0; border-top: 2px solid #000; } legend { padding-right: .375rem; } }