Skip to content
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

Documentation content vertical spacing #699

Open
nsolerieu opened this issue Nov 21, 2023 · 2 comments
Open

Documentation content vertical spacing #699

nsolerieu opened this issue Nov 21, 2023 · 2 comments
Assignees

Comments

@nsolerieu
Copy link
Contributor

The current documentation markdown page use very tight vertical spacing which leads to a very dense "wall of text" effect. I'd suggest to update our spacing classes to promote an easier reading experience.


Before: most of the spacing is handled by margin-bottom rules on paragraphs and headings and is set at 16px

Image


Suggestion: We could consider creating a stronger visual hierarchy by having larger spacing above the heading with a gradual scale. H2 would have a greater margin top of 64px than and H3 at 48px. Margin bottom should also follow this logic and to allow the text to pair withe the heading. The bulk of our documentation seems to use h2 and h3 extensively so addressing these 2 could alleviate a lot of the visual density.

Paragraphs could be bumped up to margin-bottom:24px

Image


Before/after

Image

@github-actions github-actions bot added the react label Nov 21, 2023
@nsolerieu nsolerieu self-assigned this Nov 21, 2023
@tallys
Copy link

tallys commented Nov 28, 2023

Heads up @mperrotti - let's invite @nsolerieu to a Primer Patterns so we can get on the same page about the design for Primer.style.

This was referenced Nov 29, 2023
@nsolerieu
Copy link
Contributor Author

PRs are open:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants
@lesliecdubs @tallys @nsolerieu and others