Search⌘ K

Baseline Grid Builder

Explore how to define a 1rem baseline grid with CSS custom properties and apply it to headings and paragraphs. This lesson teaches you to maintain consistent vertical rhythm and spacing by setting line-height and margin-bottom values to multiples of the rhythm unit, using only CSS and rem units. You'll gain skills to enhance fluid typography without altering HTML or using JavaScript.

Problem description

You have a simple HTML document containing multiple headings ( h1, h2) and paragraphs (p). Your task is to define a CSS custom property ...