Excessive spacing in Wagtail header formatting

Question

Excessive spacing in Wagtail header formatting

Closed this issue 5 months ago · 13 comments

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:

Between Headers - the spacing between different headers (H1, H2, H3 etc) is larger than expected, disrupting the flow and readability of the content
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

Answer 1 · 2024-01-04T13:17:29.000Z

@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!

Answer 2 · 2024-01-16T12:12:32.000Z

@popovayoana we will start to work on it soon

Answer 3 · 2024-01-16T19:38:55.000Z

@popovayoana it is changed now pls check

Answer 4 · 2024-01-30T18:11:51.000Z

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

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?
padding: let's match the padding with the heading sizes - it'll look neater that way...

size

padding

Answer 5 · 2024-02-01T08:46:38.000Z

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

Answer 6 · 2024-02-01T09:04:03.000Z

@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/

Answer 7 · 2024-02-05T23:51:16.000Z

@popovayoana Fixed. Please re-check.

Answer 8 · 2024-02-09T21:05:18.000Z

@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

Answer 9 · 2024-02-11T16:14:42.000Z

@popovayoana Changed. Please check and give your feedback.

Answer 10 · 2024-06-26T23:53:55.000Z

@alexmorev @Alex-Pavlyuk everything looks good overall, but I've noticed an issue with the font size of hyperlinks in the titles. when inserting a link into the titles, the links appear with a smaller font size compared to the rest of the text.

here is an image for reference:

you can see the problem in the preview link: https://ckan.org/admin/pages/380/edit/preview/?mode=

Additionally, there is one more minor thing: the font size of H6 in the admin panel is too small:

Answer 11 · 2024-06-27T07:14:59.000Z

@alexmorev and one more thing... can we adjust the kerning (letter spacing) for all H1 to H6 headings to improve readability? the current kerning in the H1 to H6 headings is too tight, making the text appear cramped and less readable. I am not sure how to give you proper instructions because I don't know the exact current letter spacing, but it looks too tight and needs to be loosened up... wdyt?

Answer 12 · 2024-07-30T08:02:02.000Z

fixed @popovayoana pls check

Answer 13 · 2024-08-04T16:21:08.000Z

@Alex-Pavlyuk closing as FIXED. works perfect! 🤗