Excessive spacing in Wagtail header formatting

[popovayoana]

Description

There is an issue with the formatting of headers (H1, H2, H3 etc) in Wagtail. There appears to be inconsistent and excessive spacing in two key areas:

1. Between Headers - the spacing between different headers (H1, H2, H3 etc) is larger than expected, disrupting the flow and readability of the content
2. Between Text and Headers - there is excessive space between the end of a text block and the subsequent header, leading to a disjointed visual presentation

Expected Behavior

The spacing between headers and between text and headers should be uniform and adhere to standard web content formatting practices. This ensures a cohesive, visually appealing layout that enhances readability.

How it looks like now

[popovayoana]

@alexmorev @Alex-Pavlyuk hey guys! first, happy new year! ; )) may your debug sessions be short, your coffee/tea strong, and your connections with others meaningful! second, can you look into that? : )) thanks!

[Alex-Pavlyuk]

@popovayoana we will start to work on it soon

[Alex-Pavlyuk]

@popovayoana it is changed now pls check

[popovayoana]

@Alex-Pavlyuk great job so far! just a couple of quick things to tweak:

1. headings size: H3, H4, and H5 look almost the same size right now... H3's a bit different in color and padding, but could we make them more distinct in size?
2. padding: let's match the padding with the heading sizes - it'll look neater that way...

size

padding

[alexmorev]

@popovayoana It's done. Please check. Waiting for your feedback.

[popovayoana]

@alexmorev nothing has changed for me so far... 😕 should I wait a bit? I'm testing with this article: https://ckan.org/admin/pages/376/view_draft/

[alexmorev]

@popovayoana Fixed. Please re-check.

[popovayoana]

@alexmorev the header font size is perfect! we just need to tweak the line height for h2, h4 and h5. not super sure but I'm leaning towards maintaining a consistent 4px difference between font size and line height. why 4px? - it's already looking good on h1 and h3, unless I'm mistaken

here’s a tentative suggestion (but please, apply your expertise to adjust as you see fit - h4 and h5 should be slightly decreased and h2 very tiny-tiny increased):

• for h2, now at Size 40px and Line Height 42px → Let's try Line Height to 44px
• for h4, now at Size 28px and Line Height 42px → Let's try Line Height 32px
• for h5, now at Size 24px and Line Height 36px → Let's try Line Height 28px

[alexmorev]

@popovayoana Changed. Please check and give your feedback.