H4leading

H4leading is a term used in typography and web design to refer to the line-height setting applied specifically to HTML h4 headings. It encompasses the vertical spacing within multi-line h4 elements and is used to reinforce typographic hierarchy and readability. In practice, h4leading is implemented through CSS, commonly by setting a line-height value for the h4 selector or via a design token such as --h4-leading. It is not a standard CSS property, but a convention used by teams to communicate consistent vertical rhythm.

In design systems, h4leading may be defined relative to the font-size of the heading, for example line-height values around 1.2 to 1.5 times the font size, or in pixels for precise control. Responsive systems may scale h4leading with breakpoints to preserve legibility on small screens while maintaining hierarchy on large displays.

Rationale: Proper h4leading prevents headings from appearing cramped when the h4 wraps to more than one line, reduces visual noise, and maintains a predictable vertical rhythm between sections. Adequate leading also helps ensure that the space above the heading aligns with surrounding text blocks, aiding readability.

Implementation tips: choose a line-height that keeps sufficient white space above and below h4, test with different fonts, and consider accessibility by validating readability at various sizes and resolutions. See also leading, line-height, heading, design tokens, CSS.