solar panels

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 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 ( or ) is used for labels (e.g., “Capacity: 5KVA”), ensure it stands out by setting color: #111111; for those specific tags.