TYPOGRAPHY AUDIT FINDINGS
floorithardwoodfloors.com (http://localhost:8096)
Completed: 2026-05-28

==============================================================================
TYPOGRAPHY METRICS SUMMARY (Desktop 1280x900)
==============================================================================

HOME PAGE:
  h1: 57.6px / lh:63.3667px / w:800 / Inter
  h2: 52px / lh:57.2px / w:800 / Inter
  h3: 32px / lh:36.8px / w:800 / Inter
  body: 20px / lh:33px / w:400 / Inter
  eyebrow: 12px / lh:19.8px / w:700 / Inter
  lead: 18px / lh:30.6px / w:400 / Inter
  btn: 12px / lh:12px / w:700 / Inter
  navLink: 14px / lh:23.1px / w:600 / Inter
  footerText: 14px / lh:23.8px / w:400 / Inter

ABOUT PAGE:
  h1: 64px / lh:73.6px / w:800 / Inter
  h2: 44.8px / lh:51.5167px / w:800 / Inter
  body: 18px / lh:30.6px / w:400 / Inter
  (other elements match home)

SERVICES PAGE:
  h1: 64px / lh:73.6px / w:800 / Inter
  h2: 44.8px / lh:51.5167px / w:800 / Inter
  h3: 32px / lh:36.8px / w:800 / Inter
  body: 18px / lh:30.6px / w:400 / Inter
  (other elements match about)

SERVICE DETAIL (Floor Refinishing):
  h1: 64px / lh:73.6px / w:800 / Inter
  h2: 44.8px / lh:51.5167px / w:800 / Inter
  h3: 24px / lh:27.6px / w:800 / Inter (INCONSISTENT - smaller than others)
  body: 18px / lh:30.6px / w:400 / Inter

LOCATION PAGE (Buffalo):
  h1: 64px / lh:73.6px / w:800 / Inter
  h2: 52px / lh:57.2px / w:800 / Inter
  h3: 20px / lh:23px / w:800 / Inter (INCONSISTENT - much smaller)
  body: 18px / lh:30.6px / w:400 / Inter

CONTACT PAGE:
  h1: 64px / lh:73.6px / w:800 / Inter
  h2: 44.8px / lh:51.5167px / w:800 / Inter
  body: 18px / lh:30.6px / w:400 / Inter
  (matches services)

REVIEWS PAGE:
  h1: 64px / lh:73.6px / w:800 / Inter
  h2: 52px / lh:57.2px / w:800 / Inter
  body: 18px / lh:30.6px / w:400 / Inter

BLOG PAGE:
  h1: 64px / lh:73.6px / w:800 / Inter
  h2: 44.8px / lh:51.5167px / w:800 / Inter
  body: 18px / lh:30.6px / w:400 / Inter
  (matches services)

BLOG POST PAGE:
  h1: 64px / lh:73.6px / w:800 / Inter
  h2: 44.8px / lh:51.5167px / w:800 / Inter
  body: 18px / lh:30.6px / w:400 / Inter
  (matches blog)

MOBILE (375x812):
  h1: 30px / lh:33px / w:800 (home), 30px / lh:34.5px (blog/contact)
  h2: 24px / lh:26.4-27.6px / w:800
  h3: 24px / lh:27.6px / w:800
  body: 16px / lh:26.4-27.2px / w:400

==============================================================================
VISUAL AUDIT FINDINGS BY COMPONENT
==============================================================================

1. HEADING SCALE PROPORTIONALITY (Desktop 1280px)
   TYPO ISSUE: Inconsistent H1 sizing across pages
   - Home H1: 57.6px
   - About/Services/Contact/Reviews/Blog/BlogPost H1: 64px
   - 11% variance suggests different CSS rules or hero vs page title styles

   TYPO ISSUE: H3 sizing is HIGHLY INCONSISTENT
   - Home H3: 32px
   - Services H3: 32px
   - Service detail H3: 24px (-25% from others)
   - Location H3: 20px (-37.5% from others, nearly body text size)
   - Visually, location page H3s appear undersized compared to adjacent paragraphs

2. BODY TEXT READABILITY
   TYPO OK: Body text is universally 18-20px with 30.6px line-height
   - Home: 20px/33px (slightly higher)
   - All other pages: 18px/30.6px
   - Line-height ratio 1.5-1.65x is industry standard for readability
   - Text blocks are comfortable to read

3. BUTTON CONSISTENCY
   TYPO OK: All buttons are consistently 12px / lh:12px / weight:700
   - "REQUEST AN ESTIMATE", "GET ESTIMATE", "SEND MESSAGE" all match
   - Button text is legible and consistent across all pages

4. TOPBAR TEXT LEGIBILITY
   TYPO OK: Topbar/navigation is legible
   - Nav links: 14px / w:600 on dark background with sufficient contrast
   - Logo text is crisp
   - Phone number readable

5. EYEBROW LABELS VISUAL DISTINCTION
   TYPO OK: Eyebrow labels are visually distinct
   - Eyebrow: 12px / w:700 (bold uppercase labels like "WHY WE ARE SO")
   - Clearly distinct from body text and smaller than any heading
   - Good contrast on all backgrounds

6. BLOG CARD TITLES (Blog Listing)
   TYPO OK: Blog card titles appear well-proportioned
   - Blog cards use H2 (44.8px) or H3 (24px) depending on context
   - Card widths (approximately 300-400px at 1280px viewport) accommodate titles without wrapping excessively
   - Titles are readable and not cramped

7. BLOG POST BODY READABILITY
   TYPO OK: Blog post body text is readable
   - Body: 18px / lh:30.6px
   - Content width appears to be typical line-length (50-70 chars)
   - Line spacing and font size follow best practices

8. CONTACT FORM LABELS AND INPUTS
   TYPO OK: Form labels and inputs are properly sized
   - Labels appear in standard weight (400-700)
   - Input fields have sufficient padding and text size (appears to be 16px)
   - CTA button (12px) is consistent with site standard
   - Form is scannable and organized

9. FOOTER TEXT LEGIBILITY
   TYPO OK: Footer text is legible on dark background
   - Footer text: 14px / lh:23.8px / w:400
   - Sufficient contrast against dark footer
   - Links and contact info are readable
   - Column structure is clear

10. MOBILE RESPONSIVENESS (375px viewport)
    TYPO OK: Mobile heading scale is proportional
    - H1: 30px (mobile) vs 64px (desktop) = 47% shrinkage (appropriate)
    - H2: 24px (mobile) vs 44.8px (desktop) = 46% shrinkage (consistent)
    - H3: 24px (mobile) vs 32px (desktop) = 25% shrinkage
    - Body: 16px (mobile) vs 18px (desktop) = 11% shrinkage

    TYPO ISSUE: Mobile H1 to H2 ratio is narrow (30px to 24px = 6px gap)
    - On desktop: 64px to 44.8px = 19.2px gap
    - Mobile ratio is 1.25x vs desktop 1.43x
    - Creates less visual hierarchy on mobile, but still acceptable

    TYPO OK: Mobile content stacks cleanly
    - Hero sections stack properly
    - Blog cards display in single column without wrapping issues
    - Contact form fields stack vertically with proper spacing

==============================================================================
CRITICAL ISSUES SUMMARY
==============================================================================

ISSUE 1 (HIGH): H3 Scale Inconsistency Across Pages
Location: service detail page (/services/floor-refinishing/) and location page (/locations/buffalo/)
- Service detail H3: 24px (should be 32px to match home/services pages)
- Location H3: 20px (should be 32px)
- These pages appear to have different stylesheets or class overrides
- Visual inspection confirms H3s look noticeably smaller/weaker than expected

ISSUE 2 (MEDIUM): Home H1 vs Other Pages H1
Location: All pages
- Home hero H1: 57.6px (likely hero-specific class)
- Page title H1s: 64px (page-header class)
- Creates 11% variance in perceived visual hierarchy
- May be intentional, but suggests different styling for hero vs title contexts

ISSUE 3 (MEDIUM): Mobile H1-H2 Vertical Rhythm
Location: All mobile viewports
- Gap reduces from 19.2px (desktop) to 6px (mobile)
- May benefit from slightly larger mobile H2 (26-28px) for better hierarchy perception

==============================================================================
PASS/FAIL DETERMINATION
==============================================================================

Desktop Typography: MOSTLY PASS with 2 ISSUES
- Body, buttons, nav, footer, eyebrow all PASS
- H1-H2 scale PASS (proportional, though variant between hero/title)
- H3 FAIL on service-detail and location pages (undersized)

Mobile Typography: PASS with 1 ISSUE
- Responsive scaling works correctly (proportional reduction)
- H1-H2 hierarchy slightly compressed but acceptable
- Content stacks cleanly without wrapping problems

OVERALL STATUS: PASS (with remediation recommended for H3 inconsistency)

==============================================================================
RECOMMENDATIONS
==============================================================================

1. Standardize H3 sizing:
   - Set all H3 to 32px (or primary breakpoint value)
   - Remove page-specific H3 overrides in service detail and location pages
   - Verify in CSS: no .service-detail h3 or .location-page h3 font-size rules

2. Optional: Clarify H1 usage:
   - Document whether hero H1 (57.6px) and page-title H1 (64px) are intentional
   - Consider using <div class="h1-hero"> or similar if distinction is needed
   - Ensure WCAG semantic consistency (both are <h1> tags)

3. Mobile: Monitor H1-H2 gap
   - Consider increasing mobile H2 to 26-28px if testing shows insufficient hierarchy
   - Current 30px-24px gap is acceptable but on lower bound

4. No changes needed for:
   - Body text (18-20px is optimal)
   - Button sizing (12px is standard for CTAs)
   - Nav and footer (14px is appropriate)
   - Line-height ratios (all follow 1.5x+ standard)
