Grid Baseline Aligned
Long-form text and adjacent typographic elements (captions, metadata, sidebars) MUST share a vertical baseline grid — the typographic baseline of one block aligns with another at a consistent rhythmic interval.…
$ aoe install @community/rule-grid-baseline-alignedProjection
Always in _index.xml · the agent never has to ask for this.
GridBaselineAligned [rule] v1.0.0
Long-form text and adjacent typographic elements (captions, metadata, sidebars) MUST share a vertical baseline grid — the typographic baseline of one block aligns with another at a consistent rhythmic interval. The interval is typically the body-text line-height (e.g. 24px for 16px×1.5 body).
Loaded when retrieval picks the atom as adjacent / supporting.
GridBaselineAligned [rule] v1.0.0
Long-form text and adjacent typographic elements (captions, metadata, sidebars) MUST share a vertical baseline grid — the typographic baseline of one block aligns with another at a consistent rhythmic interval. The interval is typically the body-text line-height (e.g. 24px for 16px×1.5 body).
Checks
- @community/check-grid-baseline-aligned
Applies To
@community/type-html-artifact
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Severity
low
Severity Combination
>15% of text rows off the baseline grid → WARN
adjacent columns desynchronized by >2px → WARN
text rows align to baseline grid within 1px → PASS
Failure Mode
Designed pages feel 'almost right' — readers can't articulate the dissonance, but it reduces perceived craft. Compare a New York Times article (baseline-aligned) to a typical SaaS landing page (not) to feel the difference.
Remediation
- Choose a baseline step (e.g. 8px or 24px), apply
line-height: <step>pxto body, and constrain headingmargin-top/margin-bottomto multiples of the step. - For mixed-size headings, use
font-size + leading-trim(CSStext-edge: cap alphabetic) to recover predictable baselines — chrome 132+ supports it. - If full baseline alignment is impractical, at least align the first line of adjacent columns.
Exceptions
- Case: Hero / display typography
- Allowed When: Display-size text breaks baseline by design; the rule applies to body-and-caption regions, not hero.
- Case: Single-column long-form
- Allowed When: With one column, baseline-grid alignment is internally consistent so long as body line-height is constant.
Loaded when retrieval picks the atom as a focal / direct hit.
GridBaselineAligned [rule] v1.0.0
Long-form text and adjacent typographic elements (captions, metadata, sidebars) MUST share a vertical baseline grid — the typographic baseline of one block aligns with another at a consistent rhythmic interval. The interval is typically the body-text line-height (e.g. 24px for 16px×1.5 body).
Checks
- @community/check-grid-baseline-aligned
Applies To
@community/type-html-artifact
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Severity
low
Severity Combination
>15% of text rows off the baseline grid → WARN
adjacent columns desynchronized by >2px → WARN
text rows align to baseline grid within 1px → PASS
Failure Mode
Designed pages feel 'almost right' — readers can't articulate the dissonance, but it reduces perceived craft. Compare a New York Times article (baseline-aligned) to a typical SaaS landing page (not) to feel the difference.
Remediation
- Choose a baseline step (e.g. 8px or 24px), apply
line-height: <step>pxto body, and constrain headingmargin-top/margin-bottomto multiples of the step. - For mixed-size headings, use
font-size + leading-trim(CSStext-edge: cap alphabetic) to recover predictable baselines — chrome 132+ supports it. - If full baseline alignment is impractical, at least align the first line of adjacent columns.
Exceptions
- Case: Hero / display typography
- Allowed When: Display-size text breaks baseline by design; the rule applies to body-and-caption regions, not hero.
- Case: Single-column long-form
- Allowed When: With one column, baseline-grid alignment is internally consistent so long as body line-height is constant.
Relations
related: [@community/rule-spacing-rhythm, @community/rule-line-length-optimal, @community/rule-body-readability, @community/fact-consistency-standards] see-also: [@community/check-grid-baseline-aligned] validates-with: [@community/fact-consistency-standards]
Applies To
@community/type-html-artifact
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Severity
low
Validates With
- @community/fact-consistency-standards
Severity Combination
>15% of text rows off the baseline grid → WARN
adjacent columns desynchronized by >2px → WARN
text rows align to baseline grid within 1px → PASS
Failure Mode
Designed pages feel 'almost right' — readers can't articulate the dissonance, but it reduces perceived craft. Compare a New York Times article (baseline-aligned) to a typical SaaS landing page (not) to feel the difference.
Remediation
- Choose a baseline step (e.g. 8px or 24px), apply
line-height: <step>pxto body, and constrain headingmargin-top/margin-bottomto multiples of the step. - For mixed-size headings, use
font-size + leading-trim(CSStext-edge: cap alphabetic) to recover predictable baselines — chrome 132+ supports it. - If full baseline alignment is impractical, at least align the first line of adjacent columns.
Exceptions
- Case: Hero / display typography
- Allowed When: Display-size text breaks baseline by design; the rule applies to body-and-caption regions, not hero.
- Case: Single-column long-form
- Allowed When: With one column, baseline-grid alignment is internally consistent so long as body line-height is constant.
See Also
- @community/check-grid-baseline-aligned
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/rule-grid-baseline-aligned/atom.yaml