humanmade / humanmade/hm-pattern-library

Use relative units for font-size, line-height, margin, etc

Open
#154 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
26
Forks
8
PR merge metrics
No merged PRs in 30d

Description

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 `em`s 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.

See https://github.com/humanmade/red-book/pull/7#discussion_r182642731

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.