Twenty Fifteen: H5 and H6 headings have the same font size

[poena]

This was originally reported by a user via the report button in the theme directory:

there is one 'elements' issue, namely, Header 6.
When using Header 6, it appears to be as the same size with Header 5 (both same size?)

-Confirmed that both H5 and H6 headings have a default font size of 17px.
Headings should be styled to indicate their importance, where a lower heading level has a smaller size.

Because the default paragraph font size is also 17px, a solution would be to increase
the font size of the H5 heading.

[akabarikalpesh]

I added h5's font size is 18px. let me know if any changes.

[hellofromTonya]

The styling in the theme was introduced in 4.1 ​in this commit.

[afrid1719]

I have increased the font-size for H5 by 1px for all devices having screen size greater than or equal to 740px.

[aezazshekh]

I have increased the tag size by 1pixel for all screen sizes. Please let me know if you have any query about the same.

[sabernhardt]

Thanks for the patches!

When editing the font size, at least in this theme, the line-height and margin values should change as well.

The values for 20px and 18px are already in the stylesheet:

	font-size: 20px;
	font-size: 2rem;
	line-height: 1.4;
	margin-top: 2.8em;
	margin-bottom: 1.4em;

	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.3333;
	margin-top: 2.6667em;
	margin-bottom: 1.3333em;

And this is an option for 16px:

	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.25;
	margin-top: 3.25em;
	margin-bottom: 1.625em;

To be more easy to show you the result of my changes I added in a custom post 3 heading with h4, h5, and h6 HTML tag. The following changes are:

• for media query min-width: 77.5em: I had to change the font-size to h6 HTML too because the values of h4 and h6 don't give us a big range to we can find suitable value for h5 tag. The result is: ​https://ibb.co/fkf01QP ;
• for media query min-width: 68.75em: the change here is for h5 tag and the result now has to have this look ​https://ibb.co/w6hRxg0;
• for media query min-width: 59.6875em: the change here is only in h5 tag. The result is: ​https://ibb.co/HCBFLLM ;
• for media query min-width: 55em: I had to change the font-size to h6 HTML too like in the media query 68.75em because the values of h4 and h6 don't give us again a big range to we can find suitable value for h5 tag. The result is: ​https://ibb.co/dDXh2KC ;
• for media query min-width: 46.25em: the change for this query is in h5 HTML tag only and this is the result ​https://ibb.co/LNJ0YSv .

Trac ticket: https://core.trac.wordpress.org/ticket/52028

[viralsampat]

I have changed the tag font size to 20 pixels for desktop and also made respective changes for responsive devices. Please let me know if you have any query about the same.

# How
I increased 1px to all the H5 font sizes on theme Twenty Fifteen. I think it got a little bit different between the H5 and H6 font sizes.

# Testing Instructions
## Active the Twenty Fifteen theme

## Open the editor and use H4 (20px), H5 (18px), H6 (17px)

Trac ticket: https://core.trac.wordpress.org/ticket/52028

[sabernhardt]

Reopening ticket (​"worksforme" is used when a bug cannot be reproduced)

[costdev]

@poena and @sabernhardt, will either/both of you have time to review the current patches before RC1 to see what you think is the best approach, or should we move this to a different milestone such as 6.1 or Future Release?

[sabernhardt]

I think PR 2496 is the best approach, though I'm not certain yet. I'll create screenshots to compare against the current styling in each situation: in the editor, on the frontend (at 320, 768, 920, 1000, 1160 and 1280 pixels wide), with IE11, and in list blocks.

[alansyue]

@sabernhardt
I have adjusted the PR according to your suggestion, please help to check when you are free, thanks.

[costdev]

As 6.0 RC1 starts very soon, I'm moving this to the 6.1 milestone.

Below are screenshots with the patch. If you would like to compare, I also made a ​static collection of 'before' screenshots and an ​animated GIF that alternates between both every five seconds.

Each screenshot includes H4, H5 and H6 examples with a paragraph between the headings. The headings have a second line to show the line-height apart from the margins.

The fourth column displays these headings with the same styles at any screen size in the block editor because .editor-block-list__block was ​removed in WordPress 5.4. If that should be fixed in Twenty Fifteen, let's address it on a _separate ticket_ because it involves all heading levels.

And I said I would create Internet Explorer screenshots, though the IE stylesheet is for versions 6-8:

Thanks, this is really helpful. Is there anything else I can help with?

[sabernhardt]

PR 2496 works for me. @poena, what do you think?

[pratiweb]

Increase H5 font size to 18px for all content.

[russel07]

I have updated the font size and margin properties in several places.

[russel07]

I have found in some cases the font size and margin are used the same for h5 and h6 in style.css
For example

.comment-content h5, .comment-content h6 {

font-size: 15 px

}

Both h5 and h6 have used the same style. I have updated in all places and working as expected.

[sabernhardt]

As @joyously noted, the original design matched H5 and H6 styles, so changing it is more of an enhancement.

I would like feedback about the design of PR 2496 to determine if any adjustments ought to be made to that or if it's ready to commit.

[audrasjb]

As per today's bugscrub, let's mark ​PR2496 as ready for commit.

Thanks to @jeffpaul for review/advices.

[audrasjb]

In 54109:

Twenty Fifteen: Increase the font size used for h5 headings.

This changeset ensures h5 and h5 heading levels don't use the same font size.

Follow-up to [29892].

Props poena, akabarikalpesh, hellofromTonya, afrid1719, aezazshekh, sabernhardt, anitanenova, viralsampat, alansyue, pratiweb, russel07.
Fixes #52028.

[audrasjb]

Added missing @jeffpaul props manually via Make/Core.

Committed in https://core.trac.wordpress.org/changeset/54109

Committed in https://core.trac.wordpress.org/changeset/54109

Committed in https://core.trac.wordpress.org/changeset/54109