[For discussion, do not merge] Aim to make margins and spacing more consistent #180
Conversation
- Headings with context, either 48px or 36px - Heading sizes x-large, to small - Lede text, or intro paragraph - Body copy - Bulleted lists - Numbered lists - Lists of links - Panels (wide panels to draw attention to paragraphs) - Tables Also show varying lengths of content - a few short paragraphs - a few long paragraphs - lists containing long items - lists containing short items Use content from govspeak fixture to compare content - to ensure pages of text have a consistent look and feel between the govspeak component and GOV.UK elements.
For body text and lists, panels and tables: 15px for smaller screens, 20px for larger screens - to match the spacing under body text. For large headings - make the margins consistent with the govspeak titles - for both 48px and 36px titles, set a top margin of 15px for smaller viewports and 45px for larger viewports. For smaller headings, use 30px as a bottom margin and for the headings which are the same size as body copy, but bold - use the same spacing for paragraphs and lists.
gemmaleigh
changed the title
gemmaleigh
changed the title
|
IMHO these are really large margins for headings. When a 36px heading is used on one question per page or body copy ends up really far down. They look good for longform copy, but I'm not so sure for services. |
|
When looking at the margins for govuk_components I also found that one size doesn't fit all. It'd be nice to do some separate investigation into what works for different types of content, and then define that. cc @markhurrell |
|
Hi @edwardhorsford I'll add an example service page so we can compare. Here the heading spacing has been reduced, which will ensure body copy sits further up the page. |
|
This PR needs a a set of "One question per page" examples to be built to compare the heading sizing and spacing on form pages, vs. longer text pages. I'm closing this for now, as I'm away until the 15th of April. I'll reopen once I'm back. |
I think this can be split into 2 PRs.
15px (
$gutter-half) for smaller viewports, 20px ($gutter-two-thirds) for larger viewports.heading-sizeclasses in GOV.UK elements more sensible.For large headings - make the margins consistent with the govspeak
titles - for both 48px and 36px titles, use margins of 15px for
smaller viewports and 45px (
$gutter * 1.5) for larger viewports.For smaller headings, use 15px for
smaller viewports and 30px (
$gutter) for larger viewports.Before:
After:
With a background colour to make the margins easier to see.
Before:
After: