fix(typography): restore the heading hierarchy in articles - #316
Merged
Conversation
The article title and the headings inside the body were sized independently and had drifted into each other. The title was text-2xl/3xl/4xl while every content heading was a fixed size, so on desktop the title was 36px against a 30px h2, and below 640px the h2 was the larger of the two: the section heading outranked the page heading on every phone. The title now runs text-3xl/4xl/5xl and the content headings step down with it at the same breakpoints, holding a 1.5 to 1.6 ratio from 320px up. Desktop reads 48/30/24/20 against 18px body. h5 and h6 sat at and below the body size, which made them read as captions rather than headings. Both now sit on the body size and separate by weight.
There was a problem hiding this comment.
Pull request overview
Adjusts typography so article/page titles consistently outrank in-body headings across breakpoints, eliminating cases where section headings visually dominate the page title on small screens.
Changes:
- Increase shared page
<h1>title sizing inpage.astro(text-3xl/4xl/5xl). - Make MDX heading components responsive (H1–H4) and adjust H5/H6 sizing/weight to maintain separation from body text.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/layouts/page.astro |
Bumps the shared page title scale to restore visual hierarchy vs. body headings. |
src/components/elements.tsx |
Updates MDX heading component typography to be responsive and preserve heading hierarchy on small screens. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
32
to
34
| export const H1: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({ className, ...props }) => ( | ||
| <h1 {...props} className={className || "text-4xl font-bold mt-8 mb-4 scroll-mt-12"}/> | ||
| <h1 {...props} className={className || "text-2xl sm:text-3xl md:text-4xl font-bold mt-8 mb-4 scroll-mt-12"}/> | ||
| ); |
Comment on lines
40
to
42
| export const H3: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = (props) => ( | ||
| <h3 {...props} className="text-2xl font-semibold mt-5 mb-2 scroll-mt-12"/> | ||
| <h3 {...props} className="text-lg sm:text-xl md:text-2xl font-semibold mt-5 mb-2 scroll-mt-12"/> | ||
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The article title and the headings inside the body were sized in two different places that had never been reconciled: the title in
page.astro, the content headings inelements.tsx.Before
On desktop the title was only 1.2x the h2 under it. Below 640px it was worse: the h2 was bigger than the article title, so the section heading outranked the page heading on every phone.
After
Title/h2 holds between 1.5 and 1.6 from 320px up. No horizontal overflow at any width tested (320, 375, 640, 768, 1024, 1440).
The content headings had to become responsive for this to hold; fixed sizes were the reason the scale inverted on small screens.
Also: h5 and h6 were 18px and 16px against 18px body, so a heading was the same size as or smaller than the text it introduced. Both now sit at body size and separate by weight.
Only the shared page title and the MDX heading components change, so this applies to every content page (news, events, services, funding), not just news.
pnpm buildpasses, 0 errors.