Typography standards in web design and the online space have shifted. No, the changes began long ago, but now they've become much more noticeable. Designers are increasingly using large font sizes, explaining it as a way to improve readability and visual comfort across all types of devices. The trend toward oversized typography began with extra-large variations of headlines, titles, and other artistic styles.
At the same time, the size of the main content text initially started increasing on mobile devices to improve readability. In this case, large fonts are a blessing, since basic zooming (pinching the screen) often makes reading uncomfortable. As a result, the large-font trend started to disrupt nearly all aspects of web typography. If you haven’t thought about your site’s font size lately, it’s time to revisit the concept of 12/14 point/pixel content size and consider scaling up.
Oversized Headlines
The most obvious—and simplest—way to use large text is to implement oversized headlines to grab user attention. Oversized headers work best when they don’t contain long or complex words that make skimming difficult. The idea is that a headline should register instantly in the visitor’s mind, and that’s usually achieved when the words are short and few.
For example, wonderlandams , madeofmillions , monogranofelicetti , moscowtimes . As you can see, the site names and headline texts, though written in large fonts, are easily readable and don’t appear overwhelming.
Also, pay attention to the following:
Serif or sans-serif fonts work best, as they are commonly used for body text, making it easier to pair them with headlines. Using a decorative or stylistically unrelated font can break the visual coherence of the design.
To find the right “large” size, start with an extremely large font and gradually scale it down.
Another good approach is to start with 80pt text and scale up from there. Use relative font sizes, as they will scale correctly on all devices (with a CSS “font-size” rule using percentage values based on a standard 100% base size).
Oversized Content Text
If your main content text is set to 16pt or smaller, it’s time to consider scaling it up—but not excessively. This trend originated in the mobile space, where users often need to enlarge text to make it readable. This can be frustrating. If someone wants to read a news article, they shouldn’t also have to resize the content. When redesigning, this often means creating a new typography level that prioritizes ease of reading and comprehension.
Moreover, the goal of good typography is to ensure the text is comfortable to read on mobile devices at a natural distance (typically half an arm's length—like reading a book).
A larger font can be more convenient at this distance and better suited to the screen size. Users shouldn’t have to squint or bring the device closer just to understand what’s written.
So, what should you do?
Start with a 16pt content font and see how it looks on both desktop and mobile screens (using emulators or your own device). This size is generally acceptable for most users.
Fonts should be legible, and users shouldn’t have to wonder whether that letter is a “b,” “v,” or a decorative lowercase “d.”
You might want to style article pages differently from the rest of the site. To reduce eye strain, font sizes of 18–20pt are reasonable. For example, Jeffrey Zeldman’s website uses a 24pt font—and it looks just right.
Overall Hierarchy
In general, the concept of large typography is not just about increasing font size in isolated blocks. It’s about rethinking the entire typography hierarchy. If you scale up the body text, you must proportionally adjust headers, footnotes, menus, etc. Otherwise, you'll end up with a “disproportionate scale” where different text elements are hard to distinguish, and content blocks become visually confusing.
Interestingly, increasing font sizes in headers or subheaders usually gets less attention from designers. That’s because when these elements grow, the visual difference from body text becomes more obvious. But when the main text grows and starts clashing with headings, you risk optical illusions that ruin your layout’s structure.
For example, spaceapegame , cisrussia , cblife all take different approaches to base font sizes. In some cases, text is readable on desktops; in others—not so much. And mobile versions are even more complex.
That’s why you should remember:
Text sizes must be adjusted proportionally across the design and on all pages.
Color and size contrast affect design perception and hierarchy . Is black appropriate for subheadings in a blue-white layout? What if you used a matching blue or a related shade instead? Try experimenting.
Trust your eyes. If the text feels too large or too small, keep tweaking it until it feels right and comfortable to read.
Adjusting Line Spacing
As font size increases, it’s only logical that line spacing (leading) increases too. Otherwise, letters and words blend into a chaotic mess. This is especially crucial when text is placed inside a block or over a large image. These layouts require extra line spacing for readability. In fact, many web designers intentionally let text overflow or partly overlap to create a stylized look.
Regarding spacing size—it’s often calculated as a percentage of the font size, rather than a fixed value. That way, spacing adapts to different browser window sizes and screen types.
Take a look at emiratesintegra (Each text block uses different font sizes and spacing, yet maintains visual harmony). Then check cosavostra (Interesting typography, but... not very usable. The text blends together, and hovering triggers autoplaying videos). brighte uses wider spacing and a simpler font, so it's easier to read. Also worth noting: agencedebord , plansandpixels , mystream (The service description text is quite small, while the headers are overly large).
To achieve visual harmony:
Start with line spacing set to 150% of the font size. If the text looks cramped, increase the spacing further.
When combining text with images, contrast is essential so both elements are distinguishable. This often means using extra spacing to create balance. For instance, with white text on a black background, wider spacing looks good. On gray, a medium spacing may suffice. owingsbrothers benefits from slightly more spacing—enough to prevent letters from clashing. Meanwhile, blackflagcreative offers excellent readability regardless of font size or color intensity.
Pay attention to tall and long letters, descenders, and tails. Align your line spacing accordingly to avoid overlap.
Conclusion
It’s hard not to notice the sharp shift in font sizes across design projects. But it’s not just about choosing between 14pt or 16pt—it’s about increasing type size proportionally across the entire design. We've previously emphasized how large fonts improve readability on high-resolution screens and mobile devices.
There’s a difference between slightly increasing the font while keeping everything dense, and fully embracing the large-type trend. One is harmonious and justified. The other overwhelms the screen and forces the user to lean back to comprehend the giant text.
What once emerged as a trend is now fully established. There were debates earlier in the year over appropriate font sizes on websites. By year’s end, the new standards had become clear—and will likely shape the coming year.