An adjustment we had to make in H2 to use the pattern library was to switch the margins and line-heights to font-size-relative units (unitless values for line-height, and ems for margins/padding). This allows us to mark an entire section (say, a sidebar) as font-size: 0.8rem and have the sizes cascade properly while maintaining their relative proportions.
rem should really be used at the page-layout level, rather than on every element. Where possible, font-sizes should be relative to their parent, while other properties should be relative to the element.
An adjustment we had to make in H2 to use the pattern library was to switch the margins and line-heights to font-size-relative units (unitless values for line-height, and
ems for margins/padding). This allows us to mark an entire section (say, a sidebar) asfont-size: 0.8remand have the sizes cascade properly while maintaining their relative proportions.remshould really be used at the page-layout level, rather than on every element. Where possible, font-sizes should be relative to their parent, while other properties should be relative to the element.See https://github.com/humanmade/red-book/pull/7#discussion_r182642731