Skip to content

Improve heading 3 and heading 4 styles for better visual hierarchy #1749

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 30, 2025

Conversation

mich-elle-luna
Copy link
Collaborator

  • Add proper sizing and font weights to h3-h6 headings
  • H3: text-xl (20px) + font-semibold for clear section breaks
  • H4: text-lg (18px) + font-medium for subsections
  • H5: text-base (16px) + font-medium for minor headings
  • H6: text-sm (14px) + font-medium for smallest headings
  • Consolidate duplicate h1 rules into single declaration
  • Maintain existing h1 and h2 styling that works well

Fixes issue where h3 and h4 headings didn't look like proper headings on the site.

- Add proper sizing and font weights to h3-h6 headings
- H3: text-xl (20px) + font-semibold for clear section breaks
- H4: text-lg (18px) + font-medium for subsections
- H5: text-base (16px) + font-medium for minor headings
- H6: text-sm (14px) + font-medium for smallest headings
- Consolidate duplicate h1 rules into single declaration
- Maintain existing h1 and h2 styling that works well

Fixes issue where h3 and h4 headings didn't look like proper headings on the site.
Copy link
Collaborator

@dwdougherty dwdougherty left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I looked at a few examples, and the change LGTM.

@cmilesb
Copy link
Contributor

cmilesb commented Jun 25, 2025

These heading style changes look good to me, but I would also like to change the margin-top of the headings so it's not as big. It's in the same file, right here:

.prose h1[id],
.prose h2[id],
.prose h3[id],
.prose h4[id],
.prose h5[id],
.prose h6[id] {
  @apply mt-16 scroll-mt-6;
}

Could we change that mt-16 to something smaller? Ideally something like mt-12 or mt-8?

Co-authored-by: Rachel Elledge <86307637+rrelledge@users.noreply.github.com>
@mich-elle-luna mich-elle-luna merged commit 0debd14 into main Jun 30, 2025
4 checks passed
@mich-elle-luna mich-elle-luna deleted the DOC-5364 branch June 30, 2025 18:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants