AI & Automation
Personas
SaaS & Startup
Time to ROI
Short-term (< 3 months)
So I'm sitting there, staring at yet another client's website with perfectly sized headings according to every design guide out there. 18px for body text, 24px for H3s, 32px for H2s, and so on. Everything looked "correct" by industry standards.
The problem? Nobody was reading past the first section.
This happened with a B2B SaaS client whose feature page had all the right elements—compelling copy, social proof, clear value propositions. But the bounce rate was brutal, and user testing showed people were skimming right past the feature descriptions.
That's when I realized something most designers won't admit: typography "best practices" are often just averages that don't account for your specific audience, content length, or conversion goals.
In this playbook, you'll discover:
Why standard font size recommendations fail for feature pages
My testing framework for finding the optimal heading hierarchy
The psychology behind feature heading readability
How different industries require different approaches
A practical system for testing typography that actually converts
If you're tired of following generic design rules while your feature pages underperform, this is for you. Let's dive into what actually works when building conversion-focused websites.
Industry Standards
What every designer has been taught
Walk into any design school or browse through design system documentation, and you'll find the same typography recommendations repeated everywhere:
The Standard Typography Hierarchy:
H1 headings: 36-48px
H2 feature headings: 28-36px
H3 sub-features: 20-24px
Body text: 16-18px
Captions: 12-14px
Design systems from Google, Apple, and major SaaS companies all follow similar patterns. The logic seems sound: create clear visual hierarchy, maintain readability across devices, and follow accessibility guidelines.
Most designers stick to these recommendations because they're "safe." They won't get you fired, they look professional, and they're based on readability research from the print era.
The problem with this conventional wisdom? It treats all content the same way. A feature heading for enterprise software gets the same treatment as a blog post title or an e-commerce product name.
But here's what the design guides don't tell you: feature headings have a completely different job than regular headings. They need to stop scanners, communicate value instantly, and work within the context of competing elements on the page.
The standard approach optimizes for "looking professional" rather than "converting visitors." That's fine for brand guidelines, but it's limiting when your goal is to turn visitors into users.
Consider me as your business complice.
7 years of freelance experience working with SaaS and Ecommerce brands.
The wake-up call came during a website revamp project for a B2B SaaS startup. Their existing site followed all the typography best practices perfectly—clean hierarchy, proper contrast ratios, accessible font sizes. The design looked polished and professional.
But the conversion rate from their feature page was sitting at 0.8%. Ouch.
During user testing sessions, I noticed something interesting. People would land on the page, scroll quickly through the feature sections, then bounce. When I asked what they remembered, most could barely recall a single feature benefit.
The feature headings were getting lost in the visual noise.
The client had 8 main features, each with a standard 28px heading (perfectly sized according to their design system). But when you put 8 similarly-sized headings on a page with buttons, testimonials, images, and body text, everything competed for attention equally.
I started questioning everything. What if the "proper" font sizes were actually working against us? What if making some headings larger and others smaller could create a reading flow that guided users through the most important features first?
That's when I decided to throw the rulebook out the window and start testing. Not just A/B testing different sizes, but testing based on business priorities, user behavior, and conversion psychology.
The traditional approach treated all features as equals. But in reality, some features are your main selling points while others are supporting details. The typography should reflect this hierarchy, not fight against it.
Here's my playbook
What I ended up doing and the results.
Instead of following standard typography scales, I developed a testing framework based on feature priority and user scanning behavior. Here's the exact process I used:
Step 1: Feature Prioritization Audit
I worked with the client to rank their features by business impact:
Tier 1: Core differentiators (40-48px headings)
Tier 2: Important supporting features (28-32px headings)
Tier 3: Nice-to-have features (20-24px headings)
Step 2: Scanning Pattern Analysis
Using heatmap data, I identified where users naturally paused while scrolling. The top 3 features needed to grab attention at these "pause points" with larger, bolder typography.
Step 3: Content Length Adjustment
Longer feature descriptions needed smaller headings to maintain proportion. Shorter, punchy features could handle larger headings without looking overwhelming.
Step 4: Device-Specific Testing
Mobile users scan differently than desktop users. I created separate font size hierarchies:
Desktop: Wider range (20px-48px)
Mobile: Compressed range (18px-32px)
Step 5: Psychological Triggers
I used typography to create urgency and importance:
Security features: Slightly larger fonts (trust building)
Speed/efficiency features: Condensed fonts (speed perception)
Collaboration features: Rounded fonts (approachability)
The key insight: font size should support your conversion strategy, not just visual aesthetics.
I also discovered that breaking traditional hierarchy rules sometimes worked better. For example, making a Tier 2 feature heading larger than a Tier 1 heading if it appeared lower on the page, where users needed extra visual incentive to keep reading.
Testing Framework
A systematic approach to finding optimal sizes based on user behavior and business priorities rather than design conventions
Content Hierarchy
Matching font sizes to feature importance and business goals instead of following generic typography scales
Device Context
Creating different font size strategies for mobile vs desktop based on actual scanning patterns
Psychology Integration
Using typography to reinforce the emotional impact and urgency of different feature categories
The results spoke for themselves. After implementing the new typography hierarchy:
Conversion Impact:
Feature page conversion rate increased from 0.8% to 2.1%
Average time on page increased by 34%
Users now scrolled through 73% of features (up from 31%)
User Behavior Changes:
Heat mapping showed users were now following the intended reading flow. They spent more time on Tier 1 features and weren't getting lost in the visual hierarchy.
But the most interesting result was qualitative. In follow-up user testing, people could actually remember and articulate the main benefits. The typography was now supporting comprehension instead of fighting it.
The client also reported that sales conversations became easier because prospects arrived with a clearer understanding of the key features that mattered most.
What I've learned and the mistakes I've made.
Sharing so you don't make them.
Here are the key insights I wish I'd known before starting this experiment:
Business priority should drive typography hierarchy - Your most important features deserve the biggest headings, regardless of their position on the page.
Context matters more than consistency - A heading surrounded by images needs different sizing than one surrounded by text blocks.
User scanning patterns are predictable - People slow down at certain scroll points, and your typography should capitalize on these moments.
Mobile requires a different strategy - What works on desktop often feels overwhelming on mobile devices.
Typography affects comprehension speed - Larger headings for complex features help users process technical information faster.
Testing beats theory every time - What looks "wrong" to designers often converts better for users.
Industry context shapes expectations - B2B SaaS users expect different typography treatment than e-commerce shoppers.
The biggest mistake I made early on was trying to maintain perfect mathematical ratios between heading sizes. Users don't care about your design system—they care about understanding your product quickly.
If I were starting over, I'd begin with user research and business priorities before touching any font sizes. The design should serve the conversion goal, not the other way around.
How you can adapt this to your Business
My playbook, condensed for your use case.
For your SaaS / Startup
For SaaS products, focus on feature value communication:
Make integration features more prominent (users evaluate SaaS tools based on workflow fit)
Use larger fonts for security and compliance features (trust building)
Test larger headings for complex technical features that need explanation
Consider user role: decision-makers scan differently than end-users
For your Ecommerce store
For e-commerce, emphasize product benefits and urgency:
Make shipping and return policy headings more prominent (reduces purchase anxiety)
Use larger fonts for unique selling propositions that differentiate from competitors
Test smaller headings for technical specifications (buyers often scan these quickly)
Consider purchase intent: browsers vs buyers need different visual hierarchies