Looking at the screenshot, you are dealing with a severe case of “Cognitive Overload.” The text is presenting as a dense wall—there is no visual hierarchy, the headers blend into the body copy, and the line spacing (leading) is too tight.

When a user’s brain encounters a solid block of text, it immediately calculates a high “Interaction Cost” and often chooses to skim or bounce entirely. To fix this across your product tabs, categories, and standard pages, we need to establish a global Typographic Rhythm.

Here is the developer prompt to enforce a clean, readable, Gutenberg-optimized typography system site-wide.

Master Dev Prompt: Global Typography & Readability Reset

Role: Senior UI/UX Developer & Typography Specialist.

Task: Implement a global CSS reset for all text-heavy content areas (Product Descriptions, Category/Tag Descriptions, and Standard Pages) to optimize readability and visual hierarchy.

Batch 1: The Content Container & Base Rhythm

• Target Classes: Apply these rules to .entry-content, .term-description (category/tag pages), .woocommerce-product-details__short-description, and .woocommerce-Tabs-panel.

• Action: Establish a comfortable base reading rhythm.

  • Set font-size: 16px; (Mobile) and scale to 18px; (Desktop).

  • Set line-height: 1.7; to allow the text to “breathe” and prevent the eye from skipping lines.

  • Set color: #333333; (Off-black is easier on the eyes than pure #000000).

  • Crucial: Apply max-width: 75ch; (roughly 800px) to the text containers on desktop. Lines of text that are too wide cause eye fatigue.

Batch 2: Header Saliency (Visual Hierarchy)

• Target Classes: h1, h2, h3, h4 within the content containers.

• Action: Ensure headers act as clear “scannable anchors” so users can find specs quickly.

  • Boldness: Force font-weight: 700; or 800; on all headers.

  • Spacing: Headers need more space above them than below them to clearly group them with the content that follows.

    • Apply margin-top: 2em; and margin-bottom: 0.75em;.

  • Sizing Scale:

    • H2: 1.75rem (Use for main sections like “Product Description”).

    • H3: 1.35rem (Use for sub-sections like “Key Features”).

    • H4: 1.15rem (Use for minor labels).

Batch 3: Paragraphs, Lists, and Alignment

• Paragraph Spacing: * Target <p> tags inside the content areas. Apply margin-bottom: 1.5em; to create clear visual breaks between paragraphs.

• List Optimization (The Feature Bullets): * Target ul and ol.

  • Apply padding-left: 1.5em; and margin-bottom: 1.5em;.

  • Target li. Apply margin-bottom: 0.5em; so list items aren’t crammed together.

• Alignment Enforcement: * Strictly enforce text-align: left;.

  • DO NOT use text-align: justify;. Justified text creates “rivers of white space” on mobile screens and severely damages reading fluency.

Batch 4: WooCommerce Specific Overrides

• Action: Strip WooCommerce’s default, outdated list styling.

• Find the WooCommerce description tab (#tab-description) and ensure it inherits these exact typography variables instead of defaulting to the theme’s default table/list behaviors.

• If bolded inline text (<strong> or <b>) is used for labels (e.g., “Capacity: 5KVA”), ensure it stands out by setting color: #111111; for those specific tags.

How to Apply This in WordPress

Tell your developer to drop this logic into your child theme’s style.css or the WordPress Customizer (Appearance > Customize > Additional CSS). Because you are using native Gutenberg, this CSS will smoothly override the default blocks without requiring heavy page-builder recalculations.