Concepts referenced in this article, defined.
Run rigorous A/B tests and personalize every visit on Shopify or any storefront โ no engineers required.
Typography is one of the most underestimated levers in ecommerce design. While brands obsess over button colors and hero images, the font choices, sizes, and hierarchy that govern every word on the page are doing constant conversion work โ or undermining it. A product description that's hard to skim, a price that's too small to spot, or a CTA that doesn't stand out from surrounding text can each cost a meaningful number of conversions per day. This guide covers the typography decisions that matter most for ecommerce readability and conversions.
Typography isn't just aesthetic โ it determines whether buyers can efficiently extract the information they need to make a purchase decision:
Research consistently shows that sites with strong typographic clarity hold buyers' attention longer and convert at higher rates.
Your font choice communicates your brand's personality before a word is read. For ecommerce:
Sans-serif fonts (Poppins, Inter, DM Sans, Nunito): Clean, modern, highly readable on screens. Work excellently for product descriptions, navigation, and UI elements. The default choice for most D2C brands.
Serif fonts (Playfair Display, Freight Text, Libre Baskerville): Communicate heritage, luxury, and trustworthiness. Use for brand headers, editorial content, and premium product positioning. Ayurvedic brands, artisan food brands, and luxury beauty brands often use serifs effectively.
Pairing: Most high-converting ecommerce sites use 2 fonts โ a display font for headings (can be serif) and a body font for readable text (almost always sans-serif). More than 2 fonts creates visual noise.
What to test: If you're unsure whether your current font is helping or hurting, test your primary body font against a clean sans-serif like Inter or DM Sans. The winner will tell you whether your current choice is serving readability or fighting it.
Use a clear typographic scale โ a consistent progression of sizes that establishes visual hierarchy:
| Element | Desktop Size | Mobile Size |
|---|---|---|
| Product title / H1 | 26โ32px | 22โ26px |
| Section headers / H2 | 20โ24px | 18โ22px |
| Sub-headers / H3 | 16โ18px | 16โ18px |
| Body text | 16โ18px | 16โ18px |
| Secondary text (specs, metadata) | 14px | 14โ15px |
| Price (primary) | 22โ28px, bold | 20โ26px, bold |
| CTA button text | 16โ18px, medium-bold | 16โ18px |
The most common typography error in ecommerce: body text set at 14px. On mobile, this is effectively illegible without pinch-zoom โ and buyers who need to zoom are already on their way out.
Line height (leading): For body text, a line height of 1.5โ1.7ร the font size maximizes readability. For headers, 1.2โ1.3ร is standard. Too-tight leading (1.1ร) makes paragraphs feel dense and difficult to track; too-loose (2ร) feels disconnected.
Paragraph width (line length): Optimal reading line length is 55โ75 characters (roughly 450โ550px for 16px text). Lines that are too wide cause readers to lose their place. Lines that are too narrow create an awkward reading rhythm. On mobile, full-width single-column text (with appropriate margins) works well.
White space between elements: Paragraphs need breathing room. A margin of 1โ1.5ร the line height between paragraphs significantly improves scannability. Product descriptions broken into short paragraphs of 2โ3 sentences each outperform dense blocks of text.
Font weight hierarchy: Use weight to reinforce visual hierarchy. Product titles should be bold (600โ700 weight). Body text should be regular (400). Secondary information (SKU, metadata) can be light (300) or at a reduced opacity.
Color contrast: WCAG AA standard requires a 4.5:1 contrast ratio for body text against its background. Low-contrast text (#999 gray on white) is hard to read and signals design neglect. Test your text contrast at WebAIM Contrast Checker before launch.
CTA button typography: The CTA button text needs to be readable and distinct from surrounding text. Bold weight, appropriate size (16โ18px), and a color that contrasts strongly with the button background (not just the page background) are the three requirements.
An optimized product page has a deliberate typographic sequence that guides the buyer's attention:
This hierarchy is built through type size, weight, and color โ not just through layout.
With 70%+ of D2C traffic on mobile, mobile typography is non-negotiable:
Typography A/B tests can yield surprisingly large effects:
Test 1: Font family โ current font vs. a clean sans-serif (Inter, Poppins) Test 2: Body text size โ 14px vs. 16px vs. 18px Test 3: Product title weight โ regular vs. semibold vs. bold Test 4: Paragraph structure โ long paragraphs vs. short paragraphs + bullets Test 5: Price display size โ standard vs. large (1.5ร the surrounding text)
Track bounce rate, time on page, and add-to-cart rate as your primary metrics. Typography changes often show their impact in engagement metrics before they show in CVR.
Related reading: UX & Design for Conversions Pillar | White Space in Design: Impact on Conversions | CRO Pillar | Bounce Rate