Skip to content

Improve readability and visual hierarchy of documentation/tutorial headings #1327

@harshiltewari2004

Description

@harshiltewari2004

Increasing Access

This change improves access by making documentation easier to read and scan, especially for beginners.

Clear visual separation between sections helps users quickly understand structure, reducing cognitive load and making learning more approachable.

Most appropriate sub-area of p5.js?

Other (specify if possible)

Feature request details

Image

Problem

Documentation and tutorial pages currently have low visual hierarchy. Headings (h2/h3) are not visually distinct from surrounding content, making it harder to scan sections—especially for new learners.

Proposed Solution

Introduce subtle visual differentiation for headings within content sections by:

  • adding a light background color
  • adding a bottom border (instead of text underline)

Scope

  • Changes will be scoped only to documentation/tutorial content sections
  • No global heading styles will be modified

Implementation Approach

  1. Identify the wrapper class used for content sections (e.g., .content, .markdown)
  2. Apply scoped CSS targeting h2 and h3 within that wrapper
  3. Use minimal, neutral styling consistent with existing design

Benefits

  • Improves readability and scanability
  • Enhances visual hierarchy
  • Maintains clean and minimal design

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions