Skip to content

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

@rmccue

Description

@rmccue

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.

See humanmade/red-book#7 (comment)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions