DE
EN
You know the feeling. You just want to quickly check out a product, but the font is tiny. You squint, zoom in, and lose interest. That's exactly when you lose conversions. Good typography engages users. It guides, clarifies, reassures, and makes purchasing decisions easy. In this guide, I'll show you how the right font size can help you see more completed shopping carts and reduce abandoned carts.
I write directly, friendly, and with technical clarity. You'll get concrete steps you can implement today. You don't need a design degree. You need your shop goals, real content, and a willingness to test. Let's get started.
Readability as a conversion lever
Readability determines how quickly your users translate information into action. Users scan first. If the text is too small, the initial impression is already lost. Attention then wanes. The mind starts calculating: Is it worth the effort? This slows things down. With a clean, consistent text size, you remove this hurdle. You reduce the cognitive load. You accelerate decision-making.
The figure of 12 percent is a realistic guideline based on projects and tests. You can achieve this increase by starting with an undersized baseline and moving to a sensible size, while simultaneously adjusting line length, spacing, and contrast. The exact value depends on the target audience, product range, and device. The process is crucial: you measure, adjust, and scale the winning version.
Font size in a shop can be a deciding factor in purchasing decisions – e-commerce News – Tips & Tricks – 🅰️ Why font size determines over 12% of your conversion rate 👁️🗨️
The psychology behind it
Size affects feelings and trust. Large, clear text signals calm and control. Users feel more secure. They find what they need faster. They have to interpret less. This creates speed. Small text triggers the opposite effect: uncertainty, more scrolling, more errors, more questions. The result is abandonment or hesitation. Time eats away at motivation. Motivation eats away at Budget, if you pay for every click.
Readability strengthens brand image. A shop that allows me to read easily appears competent. A shop that strains my eyes appears careless. Your typography isn't just decoration; it's a promise of performance. It conveys how much you care about your customers.
You can find more basic information and specific checklists here: Usability blog practical knowledge.
Plan mobile first
Most purchases start on mobile devices. Therefore, plan from small to large. First, determine the base size for body text on a smartphone. A good starting point is 16 pixels. Check 17 to 18 pixels if your target audience includes older users or if you have a lot of technical text. Headlines should grow in increments. Product names can be generously sized, but shouldn't wrap like a line of poetry. Prices and key benefits must be visible at a glance. Nothing should appear too cluttered.
Pay attention to line length. On a smartphone, a comfortable range is around 35 to 60 characters per line. Lines that are too long are tiring. Lines that are too short create a jagged, uneven appearance. Both slow things down. Adjust the spacing between paragraphs so that blocks are clearly defined. The eye loves rhythm.
Hierarchy that leads
Define a clear scale. H1 is the main message. H2 structures the topics. H3 provides details. Body text explains. Meta information provides context. Maintain a consistent increase at each level. A multiplier of 1.125 to 1.25 per level works well. This keeps the user experience consistent as they move between category, product page, and checkout. This builds trust because the brain has less to learn.
Think in patterns. Product name, price, a brief list of benefits, main CTA. Then, provide more details with tabs or sections. The user will then know where to read next. This saves search time. Search time eats away at the desire to buy.
Contrast and weight
Size alone isn't enough. Contrast and font weight determine whether the size is effective. Keep text and background clearly distinguishable. Thin fonts look elegant but lose their impact on light backgrounds. Choose weights with a solid stroke thickness. Check buttons, labels, and error messages. These texts carry responsibility. They must be immediately understandable. This also applies to prices and totals in the checkout. A lack of clarity there costs sales.
Test your pages in daylight, in the evening on the couch, and at low brightness. Test on a real device. Simulators are helpful, but they don't replace real-world experience. Ask your team and two or three customers for feedback. What they find challenging is almost always a real problem.
Explore the topic of accessibility and readability in more detail: BIK Guide and practical typography tips.
Forms that don't make you tired
Forms that appear small and fragile will break purchases. Increase the font size in labels and input fields. Ensure consistent line height. Only display helpful placeholders if they don't compete with content. Error messages must be large enough to be easily spotted. Use clear language. Explain what's missing and how to fix it. Don't hide anything.
Test the spacing between the label, field, and help text. The eye should be able to recognize the relationship. Check input for error frequency. If the error rate decreases with larger font sizes, you have a direct conversion lever at your fingertips.
Product page: where size is sold
Product names need presence. Keep them easily readable, but not oversized. Price and availability information follow directly after. Delivery benefits and return policies shouldn't be overlooked. Pack the most important points into a short, well-sized list. Use concise sentences. Avoid jargon. Images support, but text persuades. If the text struggles, doubt wins. Capture the eye, and you'll get the click.
Reviews These are a trust element. Place stars and counters next to the title. The link to the overview should be immediately readable. Set filters and sorting so that users understand the connections. Small font in filters is frustrating. That wastes time. Time costs sales.
Category and search: Scanning without frustration
The right choice of typography in Online-Shop is extremely important – E-commerce news – Tips & tricks – 🅰️ Why font size determines over 12% of your conversion rate 👁️🗨️
Catalogs need speed. Cards with product image, title, price, and CTA work if the font is appropriate. Titles should end on two lines, not three. Prices must be clear in the list. The CTA shouldn't shrink. Pagination, facets, and breadcrumbs need a solid size. This is how users navigate. If a user gets lost, they're gone.
Use a clear hierarchy in your search results. Show results with strong titles. Highlight search terms in bold. Maintain consistent spacing. Build trust by offering consistency. Consistency saves energy. Saved energy translates into purchase intent.
Checkout: where small items become expensive
In the checkout process, there's zero tolerance for friction. Display totals, shipping costs, and delivery times clearly and prominently. Legal texts shouldn't be overly flashy, but they should remain legible. Button text like "Buy Now" or "Order with obligation to pay" needs to be compelling. Nobody wants to be guessing whether the click will work. Nobody needs a magnifying glass to see the total price.
A small improvement in checkout readability directly translates into increased sales. You reduce small errors that have big consequences. You reduce inquiries to the customer service team. SupportBoth increase profit margins and mood.
How to test and scale
Start with an A/B test. Define a hypothesis. For example: Increasing the base size from 14 to 16 pixels increases the add-to-cart rate. Define KPIs: Add-to-cart, checkout start, checkout completion, time to action, scroll depth, bounce rate. Define the test duration: at least one complete purchase cycle. Eliminate seasonal bias. Document the setup, measurement points, and results.
If option B wins, roll it out. Repeat the test with headlines. Examine buttons and form text. By scaling step by step, the impact grows. You maintain control. You learn which combination of size, weight, and spacing works best in your context.
Team workflow to ensure nothing slips through the cracks
Create a brief typography documentation. Note basic sizes, hierarchies, spacing, and examples. Include screenshots of the category page, product page, shopping cart, and checkout. For each page type, identify the critical elements: price, call to action, delivery information, and error message. Provide test data. This ensures transparent decision-making and helps new colleagues get up to speed more quickly. Changes are made deliberately, not randomly.
Work with Content From real life. Use real product names, real specifications, real return policies. Lorem Ipsum is deceptive. You want to see how your typography behaves at real lengths. Only then will you avoid surprises after go-live.
You can also find technical background information on web typography at SELFHTML Typography.
Internationally and legally sound
Size must harmonize with language. Longer words in German or Finnish need more space than in English. Plan line breaks. Shorten where it makes sense. Legal texts need clarity and readability. Small font can quickly be intimidating. You want to convey clarity. Clear texts reduce support costs and build trust.
If you serve multiple markets, document the differences. Keep examples ready for each language. Regularly check if translations are too long. Make corrections early. This will keep the layout consistent.
Measurable goals, clear decisions
Set goals for each page type. Product list: More clicks on product cards. Product page: More clicks on "Add to Cart". Checkout: More completed payments. Derive typography measures from these goals. Increase the font size, improve contrast, organize the hierarchy. Test the impact. Make data-driven decisions. Coordinate with others. CRM and support. If the number of inquiries decreases, you're on the right track.
Build a dashboard. Show conversions by device, scroll depth, time to first click, and form error rate. Link the data to release dates. Then you can see how typography changes affect performance. This motivates the team and justifies the next steps.
Quick checks for your shop
- Body text on mobile devices should be at least 16 pixels. Check 17 to 18 pixels.
- Line height 1.4 to 1.6 for body text. Shorter UI texts 1.2 to 1.4.
- Line length 35 to 60 characters on a smartphone.
- Buttons with 15 to 18 pixel font. Clear text. Sufficient spacing.
- Price, delivery information and benefits are immediately visible and easy to read.
- Error messages clearly displayed near the field.
- Check contrasts according to WCAG AA. Use thin sections sparingly.
- Testing on real devices and in real light.
- Document everything. Save changes with date and measurements.
Your mini-plan for the next 7 days
- Day 1. Create screencasts and screenshots of your most important pages. Highlight problem areas.
- Day 2. Set the base size for mobile devices to 16 to 18 pixels. Define the hierarchy.
- Day 3. Adjust buttons, labels, and error messages. Check the checkout process.
- Day 4. Optimize product list and search. Adjust titles and prices.
- Day 5. Set up the A/B test. Define the hypothesis and KPIs.
- Day 6. Start the test. Collect data. Gather team feedback.
- Day 7. Review results. Identify winners. Plan the next test.
Typical objections and clear answers
Objection: Large fonts take up space. Answer: Space without legibility is dead space. You don't sell pixels. You sell orientation. Objection: Our brand appears delicate. Answer: Delicate design requires clear contrast and a clean hierarchy. Objection: We don't have the resources for testing. Answer: A proper typography test is small, quick, and delivers tangible learnings. It pays off.
Objection: Our users are digitally savvy. Answer: Being digitally savvy doesn't mean enjoying puzzles. Nobody thanks you for short texts in the checkout. Good readability appeals to all target groups. It saves time and frustration.
Now it's your turn
Show me a page from your shop. Tell me which parts you find difficult to use. Ask for a quick typography rating for your layout. Share any numbers you've already tested. I'll give you clear feedback with a priority plan. This way, you can move directly to the next improvement.
You can also post a short before-and-after comparison. Include the base size, line height, and a screenshot of the checkout. Other merchants can learn from this. You'll save yourself a lot of time and effort.
True words! In our startup, we've relied on 18px from the very beginning. Best decision ever! Our conversion rate is significantly above the industry average, and I'm convinced that readability is a crucial factor. Your figures confirm our experience.
You're absolutely right with your analysis! As a data analyst, I see daily how small design changes impact metrics. Font size is a massively underestimated lever in this regard. We once conducted a complete typography analysis for a client in the financial sector. The result: Every additional pixel of font size up to 18px linearly increased conversions! Above 18px, the curve flattened out, but up to that point, there was a clear correlation. The crazy thing is: The same effect was observed across all age groups, not just older people! Even 18- to 25-year-olds had better engagement rates with larger font sizes. Probably because everyone's eyes are tired from spending so much time on screens these days. This article should be required reading for anyone involved with websites!
I completely agree! Accessibility isn't a nice-to-have, it's a must-have. And larger font sizes are the first step. For us, switching to 18px increased mobile conversion by 31%. Unbelievable, but true! The article explains perfectly why this is the case. I'd never considered the cognitive load caused by hard-to-read text. But it makes perfect sense: If you have to strain to read, you don't have the mental energy left for making a purchase decision. Mind = blown! 🤯
FINALLY! I've been preaching this in our company for years! As a product manager, I'm constantly battling designers who want everything super minimalist. Small, gray, thin – the main thing is that it looks 'clean'. But our target audience is 45+! They don't want an art exhibition, they want to be able to READ! Last quarter, we did an A/B test: old site with 13px vs. new version with 17px. Not only did the conversion rate increase (+19%), but so did customer satisfaction! People actually thanked us in the reviews for 'finally seeing something'. One customer even wrote, 'Finally, a company that thinks about people over 40!' That was a real eye-opener for our management. Since then, 16px has been our minimum standard. This article confirms everything we've learned. I'm sending it straight to the design team! 💪
Very insightful! I hadn't even considered the psychological aspects. The fact that small print is subconsciously perceived as 'unimportant' explains a lot. We'd always wondered why nobody read our important notices – they were in 11px! 🤦♂️ After reading your article, we switched everything to 16px and lo and behold: Support requests for topics that are actually explained on the page have decreased by 30%. People actually read when they can! Who would have thought? 😄 Next step: Increase the font size in our emails. Let's see if the click-through rate also increases.
As a copywriter, I'm constantly annoyed by fonts that are too small. You put so much effort into the texts, and then nobody can read them! 🙄 The article sums it up perfectly: Content Text is king, but only if it can be read! I once had a client who absolutely insisted on this super-thin, modern font at 12px. Admittedly, it looked chic, but the bounce rate was disastrous. After much back and forth, we found a compromise: a modern font, but at 17px and with a heavier font weight. The result? People suddenly stayed on the page and actually read what I had written! Time on site increased from an average of 45 seconds to over 2 minutes. For me as a copywriter, that's invaluable. What good are the best headlines and calls to action if no one can decipher them?
Perfect timing! We're currently redesigning our website and I was unsure about the font size. Now I know: better too big than too small! The examples showing increased conversions convinced me. We'll be using a minimum of 16px!
This article should be required reading for all web designers! I work in conversion optimization, and font size is truly one of the most underrated factors. We once tested this with a large German mail-order company: 12px vs. 14px vs. 16px vs. 18px. The results were clear: with each increase, the conversion rate rose! We stopped testing at 18px because the client thought it looked 'too big'. But the numbers don't lie: +22% overall conversion, +37% on mobile! The crazy thing is: it literally costs ZERO euros to implement this change. No new software, no consultants, no workshops. Just change one line of CSS. The ROI is practically infinite. If I could only recommend ONE thing to clients, it would be: make your damn font bigger! 😄
This article is incredibly helpful! The examples are so easy to understand. The comparison with the restaurant menu was especially insightful. It's absolutely true – if I can't read the menu, I'm not going to order anything. Same principle applies online! We just launched our new webshop, and I'll definitely be rethinking the font size. We're currently using 14px, but after reading your article, I'm leaning towards 16px or even 18px. Those few pixels really make a difference. I'm also curious: Are there differences between different industries? I imagine, for example, that fashion brands can get away with smaller font sizes than B2B sites?
Hey! As someone with a visual impairment myself, I can only agree with what's written here. I immediately leave websites if I have to zoom in to read anything. And I'm only 35! Just imagine what it's like for the older generation. They often have the money for your products, but if they can't read the description, they'll simply buy elsewhere. Simple as that. Last year, I switched my own shop to 18px, and the conversion rate among my 50+ target audience increased by 41%! No joke! That was the easiest optimization I've ever done.
Finally, an article that speaks plainly! I've been preaching this in our agency for years. But no, clients always want everything 'modern' and 'clean' – which usually means tiny light gray font on white. 🤦♀️ Accessibility isn't exactly sexy until you see the conversion numbers. We once had a client in the finance industry who absolutely refused to move away from his 10px font. "It looks more professional," he said. After three months of poor performance, we convinced him to run an A/B test. Guess what happened? The 16px version converted 34% better! THIRTY-FOUR PERCENT! The client couldn't believe it himself. Since then, he's become our biggest advocate for readable typography. 😄
I have to admit, I was skeptical. But after implementing your tips: +15% more newsletter sign-ups! Amazing! The tip about line spacing was especially valuable. We had everything crammed in before… 🙈
As a web developer, I have to say: this article hits the nail on the head! I constantly see clients wanting their text to be as small as possible to fit in more content. That's complete nonsense. A well-readable page with an 18px font size ALWAYS performs better than a crammed one with 12px. The problem is often that many designers are still working on their high-resolution Retina displays and have forgotten how it looks on a regular monitor. Older users, in particular—and in many industries, they are the most lucrative customers—struggle terribly with small fonts. I once had a case where a customer of a furniture store complained about their high bounce rate. One look at the page: 11px font size! After increasing it to 16px, the dwell time increased by almost 40%. The ROI of larger fonts is simply unbeatable. It costs nothing but a few lines of CSS and delivers measurable results.
Interesting article! We've actually had similar experiences in our online shop. After switching to a larger font, conversions increased by 8%. I wouldn't have thought it would make such a difference.
Wow, finally someone who takes font size seriously! As a UX designer, I constantly struggle with clients who want everything as small as possible. 'More Content "Above the fold" is a common refrain. But they completely forget that nobody converts if they have to dig out their reading glasses. I'll definitely incorporate the tip about 16px as a minimum into my next client presentation. The point about mobile readability is especially valuable – I recently increased the font size from 14px to 18px in an e-commerce project, and the bounce rate dropped by 23%! Amazing, right? You really underestimate how relaxed your eyes need to be while shopping. Thanks for the concrete figures; I can definitely use them to support my arguments!