Typography Best Practices for Online Stores
Why Typography Matters in Ecommerce
Text is the medium through which visitors learn product names, read prices, evaluate descriptions, navigate categories, understand policies, and complete checkout forms. If the text is hard to read because of poor font choices, insufficient sizing, or inadequate spacing, visitors struggle with every interaction. They misread prices, skip descriptions, overlook important details, and feel an overall sense of friction that they may attribute to the products or the brand rather than the typography. Stores that upgrade from poor typography to professional typography often see conversion rate improvements of 5 to 15 percent without changing anything else about the store, because the same products and same prices suddenly feel more credible and easier to evaluate.
Typography also communicates brand personality at a subconscious level. A serif font like Playfair Display or Lora conveys tradition, elegance, and authority, making it a common choice for luxury, fashion, and editorial brands. A geometric sans-serif like Montserrat or Poppins conveys modernity, cleanliness, and approachability, suiting technology, lifestyle, and general retail brands. A rounded sans-serif like Nunito or Quicksand conveys friendliness and playfulness, appropriate for children's products, pet supplies, and casual lifestyle brands. Visitors register these personality cues within seconds, and mismatched typography (a playful font on a premium jewelry store, or a stiff serif font on a casual outdoor gear brand) creates subconscious dissonance that undermines brand positioning.
Choosing Fonts for Your Store
An ecommerce store needs two fonts: one for headings and one for body text. Using more than two fonts creates visual complexity that makes the store feel disjointed. Using only one font is possible and produces a very clean aesthetic, but it limits the visual distinction between headings and body content. The two-font approach provides enough variety for clear hierarchy while maintaining visual cohesion.
For body text, prioritize readability above all else. The body font appears in product descriptions, policy pages, checkout forms, and every other block of running text on your store. A clean sans-serif font with even stroke widths, generous x-height (the height of lowercase letters relative to uppercase), and open letterforms is the safest choice. Google Fonts like Inter, Source Sans Pro, Open Sans, Lato, and Roboto have been designed specifically for screen readability and perform well at body text sizes across all devices. Avoid decorative fonts, script fonts, or highly stylized fonts for body text because their visual complexity reduces reading speed and comprehension, especially at smaller sizes and on mobile screens.
For heading text, you have more freedom to express brand personality because headings are displayed at larger sizes where complex letterforms remain readable. Serif fonts work well for headings on stores seeking an elegant or editorial feel: Playfair Display, Lora, Merriweather, or Cormorant Garamond pair well with sans-serif body fonts. Bold sans-serif fonts work for modern and energetic brands: Montserrat, Poppins, Raleway, or Work Sans in bold or semibold weights command attention in headings. The heading font should contrast with the body font enough to create clear visual separation, whether through serif versus sans-serif contrast, weight contrast, or style contrast.
When pairing fonts, the simplest reliable approach is to combine a serif heading font with a sans-serif body font, or a bold sans-serif heading with a regular-weight sans-serif body. These combinations create natural contrast that establishes heading hierarchy without creating visual conflict. Avoid pairing two fonts that are too similar (two sans-serifs with similar proportions) because they create ambiguity rather than hierarchy, and avoid pairing two highly distinctive fonts because they compete for attention. Google Fonts provides curated font pairing suggestions for each font, which is a useful starting point if you are unsure how to combine fonts effectively.
Font Sizing and Hierarchy
A clear typographic scale creates the visual hierarchy that helps visitors scan and navigate your content. Establish a consistent set of font sizes that you use across every page. A reliable scale for ecommerce: page title (H1) at 28 to 36 pixels, section headings (H2) at 22 to 28 pixels, subsection headings (H3) at 18 to 22 pixels, body text at 16 pixels, and secondary text (captions, metadata, fine print) at 13 to 14 pixels. Each level should be visibly distinct from the levels above and below it, with a ratio of approximately 1.25 to 1.5 between adjacent sizes.
On product pages, price typography deserves special attention because it directly influences purchase perception. Display the price in a slightly larger size than body text (18 to 22 pixels), in a bold or semibold weight, and in a color that stands out from surrounding text. For sale pricing, show the original price in a lighter color with a strikethrough and the sale price in a bold, colored treatment (red or your accent color). The visual distinction between original and sale price should be immediately clear without requiring the visitor to read numbers carefully. Some stores display the discount percentage or dollar savings as a badge next to the price, which further communicates value.
Navigation typography should be consistent, scannable, and distinct from body content. Main navigation labels typically use 14 to 16 pixel text in medium or semibold weight. Category page headings should be larger (24 to 32 pixels) to establish context. Breadcrumb text should be small (12 to 14 pixels) to stay functional without competing with page content. Button text should be 14 to 16 pixels in semibold or bold weight, sized to be readable but not so large that it makes buttons look clunky.
Line Height, Letter Spacing, and Readability
Line height (the vertical space between lines of text) has a dramatic effect on readability. Text with tight line height (1.0 to 1.2) feels dense and discourages reading. Text with generous line height (1.6 to 1.8) feels open and inviting. For body text in ecommerce, set line height to 1.5 to 1.7, which provides enough spacing for comfortable reading without creating excessive vertical gaps. Headings need less line height (1.2 to 1.4) because they are typically one or two lines of larger text where tight spacing looks more intentional. Product descriptions, policy content, and any multi-paragraph text blocks should use the higher end of the range (1.6 to 1.8) to maintain readability during extended reading.
Letter spacing (tracking) rarely needs adjustment for body text when using well-designed web fonts, which are already optimized for screen rendering at standard sizes. However, letter spacing adjustments can improve readability in specific situations. Uppercase text benefits from 1 to 2 pixels of added letter spacing because uppercase letters have more uniform shapes that become easier to distinguish with extra space between them. Very large heading text (36 pixels and above) sometimes benefits from slightly negative letter spacing (-0.5 to -1 pixel) because the optical gaps between large letters can look exaggerated at headline sizes. Small text (12 to 13 pixels) benefits from slightly positive letter spacing (0.5 to 1 pixel) to prevent characters from blurring together at small sizes.
Paragraph width, measured in characters per line, significantly affects reading comfort. The optimal range for reading is 50 to 75 characters per line (roughly 500 to 700 pixels wide at 16-pixel body text). Narrower columns create too many line breaks and disrupt reading flow. Wider columns force the eye to travel too far from the end of one line to the beginning of the next, causing readers to lose their place. On desktop product pages, this means the text column for product descriptions should not span the full page width. A maximum content width of 680 to 780 pixels for text blocks keeps line lengths within the comfortable range. On mobile, the narrow screen width naturally constrains line length, which is one reason well-designed text often reads better on phones than on poorly constrained desktop layouts.
Web Font Loading and Performance
Custom web fonts add visual polish but create a performance cost. Each font file is typically 20 to 50 KB (for a single weight of a variable font) or 15 to 30 KB per weight for static fonts. A store using two fonts in regular, bold, and italic weights (six font files) might add 100 to 200 KB to the page load. This is manageable with proper optimization but can become significant on mobile connections where every kilobyte affects load time.
Load only the font weights and styles you actually use. If your store uses Inter in regular (400) and semibold (600), do not load light (300), bold (700), or italic variants that appear nowhere in your CSS. Each unused variant wastes bandwidth without providing visual benefit. Google Fonts and most font services let you select specific weights and character sets to minimize file size. Subset fonts to include only the character sets your store needs, for English-language stores, the Latin subset covers all necessary characters at a fraction of the full Unicode font file size.
Use font-display: swap in your font-face declarations so that text renders immediately using a fallback system font, then swaps to the custom font once it finishes loading. This prevents the "flash of invisible text" (FOIT) where the page appears blank while fonts load, replacing it with a brief "flash of unstyled text" (FOUT) that is less disruptive to the user experience. Preload your most important font file (typically the body text regular weight) using a link rel="preload" tag in the document head, which tells the browser to start downloading the font before it encounters the CSS rule that requires it. These optimizations reduce the visible impact of custom fonts on page rendering speed. The site speed optimization guide covers additional font loading strategies alongside broader performance techniques.
Typography Mistakes That Hurt Ecommerce Stores
Using more than two font families creates visual noise that makes the store feel amateurish. Three or four different fonts on a page indicate indecision, not variety, and they make the visual hierarchy confusing because the visitor cannot determine which text treatment corresponds to which content role. Stick to two fonts and differentiate hierarchy through size, weight, and color rather than by adding more typefaces.
Setting body text below 16 pixels on mobile triggers auto-zoom behavior in iOS Safari and creates readability problems on all mobile devices. Always use 16 pixels as the minimum body text size, and consider using 17 or 18 pixels for stores with older demographics or content-heavy product descriptions. Text that is comfortable to read on a 27-inch desktop monitor is often painfully small on a 6-inch phone screen, so always evaluate your typography on actual mobile devices, not just in desktop browser resize mode.
Centering large blocks of text is a common design mistake on product pages and landing pages. Centered text works for short headings (one to two lines) and single-line elements like navigation labels. But centered paragraphs are significantly harder to read than left-aligned paragraphs because the eye must search for the beginning of each new line at a different horizontal position. Left-align all body text, product descriptions, policy content, and any multi-line text blocks.