The northern block

The new era of typefaces and what it means for an e-shop

Design Week’s article on The Northern Block captures a significant shift in the typeface space: fonts are no longer seen as a simple aesthetic element, but as a strategic tool that connects brand identity, technology, accessibility and commercial performance. For an e-commerce owner, this shift has practical value. Typography is not just the “pretty font” in the hero banner. It’s how the user reads the price, compares features, trusts the checkout, recognizes the brand and decides whether to complete a purchase.

The Northern Block, as presented by Design Week, sees the next era of typefaces as more systematic, more flexible and closer to the real needs of brands. This directly concerns e-commerce, because e-shops operate in many environments simultaneously: mobile, desktop, marketplaces, email, social ads, push notifications and applications. If fonts do not support this dispersion, the brand looks inconsistent. On the contrary, a well-designed typographic system creates recognition and reduces friction at every touchpoint.

For practical reasons, the e-commerce owner needs to think of the font the same way they think of the payment system or the catalog architecture: as infrastructure. A font that loads slowly, does not have proper Greek support, exhibits poor readability at small sizes, or requires unclear font licensing can create costs. On the contrary, the right fonts enhance UX design, help conversion rate optimization, and make the brand clearer on every screen.

Why fonts affect sales, trust, and user experience

In e-commerce, reading is action. The user doesn’t just read product descriptions; they scan, compare, evaluate, and decide. Legibility, the ease with which a visitor can distinguish letters, numbers, and words, affects how quickly they can move through the store. In categories like fashion, cosmetics, electronics, pharmaceuticals, or B2B equipment, typographic clarity helps the user locate critical information: availability, discounts, sizes, specifications, shipping terms, and returns.

The relationship between typography and brand identity is equally important. A premium brand does not communicate with the same typographic tone as a value-for-money marketplace. A DTC brand with a young audience may need a more expressive typographic voice, while an e-shop with medical products needs clarity, reliability and neutrality. This is where the value of custom fonts or carefully selected variable fonts comes into play: they add character, without sacrificing functionality.

Responsive typography is also critical. Many e-shops are visually designed on desktop mockups, but real conversion often happens in mobile environments. If the font size on product cards is small, if the line-height is depressed, or if buttons have unclear labels, the user becomes fatigued. Fatigue doesn’t always show up as an immediate complaint; it shows up as page abandonment, a reduced add-to-cart rate, or lower checkout completion.

The data behind speed, accessibility and typographic performance

Performance web fonts are one of the places where design meets technical implementation. Web fonts can enhance a brand, but if they load sluggishly, they increase content display time, create layout shifts, or delay the first meaningful interaction. Google has published data showing how sharply the likelihood of abandonment increases as a mobile page’s load time increases. As the chart below shows, the difference between 1 and 3 seconds is not a small detail; it’s a commercial risk.

Speed is not a theoretical metric. Deloitte’s research on mobile speed showed that a 0.1-second improvement can be linked to an 8.4% increase in retail conversions and 9.2% in average order value. For an e-shop with significant paid traffic, this means that the typography strategy should be discussed alongside caching, image optimization, Core Web Vitals and frontend development. It’s not enough to choose a striking font; you need to check how it loads, what weights are used and whether all the variants are really needed.

The second major area is accessibility. Typography directly impacts accessibility, especially in terms of contrast, text size, spacing, and clarity in forms. WebAIM Million data shows that low contrast remains the most common accessibility issue on home pages. For e-shops, this affects product titles, prices, discount badges, filters, breadcrumbs, and microcopy at checkout. A gray text that looks elegant in a design can be difficult to read on mobile, in outdoor light, or by users with low vision.

Step-by-Step: how to build a typographic system for an e-shop

Step 1: Start with your commercial positioning, not your font menu. Before choosing fonts, write down in simple words what the user should feel when they see your e-shop: confidence, speed, luxury, expertise, economy, freshness or specialization. This will determine whether you need a geometric sans, a humanistic sans, a serif for an editorial feel or a more technical family for a B2B environment. Typography should serve your positioning, not decorate it.

Step 2: Define roles. A good typographic system doesn’t need many families. Usually, one main family for UI and body copy, a supplementary one for headings or campaigns, and clear weights for pricing, calls-to-action, and supporting text are enough. For e-commerce design, consistency is more important than variety. If each banner uses a different style, the user doesn’t build familiarity with the brand.

Step 3: Check languages, symbols and numbers. In the Greek market, many fonts look beautiful in Latin but weak in Greek. Check accents, uppercase, lowercase, euro symbols, percentages, fractions, SKUs, dates and special characters. In an e-shop, numbers are commercial content. If the price “129.90€” is not immediately readable, the font is not doing its job.

Step 4: Design a size scale. Set sizes for H1, H2, product title, body, price, old price, CTA, labels, helper text, and error messages. Don’t rely on “it looks good.” Test on real devices, especially mobile 360px and 390px wide. Responsive typography should adjust size, line-height, and spacing without breaking the layout.

Step 5: Limit font weights. Every additional weight increases complexity and, often, load. Unless there is a compelling reason, avoid five different weights. For many e-shops, regular, medium, and bold are sufficient. If you use variable fonts, you can have more flexibility in a more controlled way, as long as the technical implementation is correct.

Step 6: Check font licensing. This is an often overlooked point. One license may apply to desktop use, another to web, another to app, and another to display in paid campaigns or server-side rendering. If you plan to extend your brand to a mobile app or international storefront, clarify font licensing early on. The cost of compliance is usually lower than the cost of changing fonts after rebranding.

Step 7: Measure. After implementation, track Core Web Vitals, bounce rate, add-to-cart rate, checkout completion, scroll depth, and interaction with filters. If you change typography in important places, ideally A/B test. Typography should not only be evaluated by the creative team, but also by real behavioral data.

Practical application checklist

Before the new typography goes live, check ten points: if Greek is displayed correctly, if prices are clear on mobile, if contrast passes basic WCAG criteria, if CTAs stand out, if error messages are readable, if the web typography loads without visible delays, if font files are compressed, if only the necessary weights are used, if the design system describes usage rules and if the license covers all channels. This checklist may seem simple, but it often prevents precise corrections after launch.

How to collaborate with a foundry or designer for commercial results

The perspective that The Northern Block brings up is useful because it moves the conversation from choosing “a pretty font” to creating a system that solves problems. If you have a growing e-commerce store, working with a type foundry, brand designer, or dedicated UX team can help you decide whether you need an existing family, custom fonts, or a modified typographic system. Not all businesses need a dedicated font. What they do need is clear rules and an implementation that doesn’t compromise the experience.

In a mature e-commerce environment, fonts need to support the business strategy. If your brand invests in content, buying guides, and SEO, then readability of large texts is critical. If you rely on performance marketing, then landing pages need to load quickly and communicate the offer without noise. If you have international expansion, then language coverage and consistency across multiple scripts become necessary. If you sell premium products, typographic detail can enhance perceived value.

The bottom line for e-commerce owners is simple: typography is part of the commercial infrastructure. The right fonts don’t work alone, but within an organized system that combines design, performance, accessibility, and brand voice. The next era of typefaces, as described through The Northern Block’s lens, isn’t just about designers. It’s about every business that wants its digital store to be more recognizable, faster, more reliable, and easier to use.

• Design Week: The Northern Block's vision for the next era of typefaces
• Think with Google: Mobile page speed benchmarks and bounce probability
• Deloitte Digital: Milliseconds Make Millions
• WebAIM Million: Accessibility analysis of the top 1,000,000 home pages
• web.dev: Optimize web fonts
• W3C WCAG: Contrast Minimum