The Zen of Web Typography

by | Feb 20, 2017 | Design

Home » Blog » The Zen of Web Typography

It’s time. Time to start putting all of that great content you’ve created online. Makes sense, right? It’s good. It’s well-written. And it could help keep your website fresh. It could even help with SEO. There’s just one mental hurdle you can’t get over—it doesn’t look as good online as it does in your printed materials.

You fiddle. You fudge. You make soft breaks in text to avoid orphans. You justify large blocks for better reading. And then you look at your post on your phone. It looks horrible. How? Why?! It looks great on your laptop!

You start wrapping text in header tags to draw emphasis. Then you start trying to use inline CSS to fix it. It’s like putting out the fire with gasoline. Your SEO starts taking a dip. Your entire site layout is now breaking on mobile and desktop. What are you going to do?

Embrace the Zen of the Web.

Let Go of Comparing

The Web is not Print. The Web is not Print. The Web is not Print. Keep repeating that to yourself.

With any printed piece, you have physical dimensions that you can work with. And you work within those dimensions to achieve the best design for your content. With a website, you have to account for all of the screens that have ever been made in all of the existence of human history past, present, and future. It’s an impossible task.

So don’t. Don’t compare it to print. Embrace the web for what it is. Don’t try to constrain your text to fit a certain size. Let it flow to the size of the screen. Use CSS screen media queries to adjust your text depending on the size of the device it’s being viewed on.

Let Go of Judgments

No one likes widows, orphans, or rivers in your text. It’s amateurish in print and leads to poor reading. But trying to accommodate those rules on the web can problematic. Fixing them can lead to inadvertent widows and orphans on different screen sizes. And you can justify your text. But unless you want to put in hours and hours of labor to adjust each line for every device, you’re losing money. Keep it simple. We’ve all been reading online for over 20 years now. Trust your audience, and give yourself a break.


River example by Jeff Dahl – own work, GFDL


Orphan typesetting example

Let Go of Anger

Forcing inline styles onto your text to replicate print can be fun in small instances. Like a blockquote style, for example. But if you try to force each headline, each callout, each quote to be “perfect,” you’re setting yourself up for an angry day. You’ll be angrily adding all of those styles on the day you are doing them. You’ll be furious several months later when you go in and try to edit your content. And you will have a nuclear meltdown when you either redesign your site or move to a different CMS. You’ll have to rip your hard work out. Not only that, you run the risk of breaking the entire site design structure with inline styles. What’s more important? This headline or your website? Go the extra distance for special occasions, but don’t let it be war all the time.

Let Go of Worrying

What about using different HTML tags instead of inline CSS? Adjusting the size of a headline by using a different header tag can work. But what if that headline contains keyword terms that your customers are looking for? If you make that headline an <H5>, sure, it’s smaller. But now it weighs less than an <H1> in terms of SEO. The same is true with manipulating your text in <div> tags instead of <p> tags. Well-structured markup has positive SEO effects. So don’t worry about making it look perfect. Wrap your content in the appropriate markup. Make it as easy as possible for it to get indexed.

Let Go of Fear

You can’t control the web. Design trends change, and SEO tactics change almost daily. But the one thing that doesn’t change is that good content is rewarded. Either by clicks or high rankings in search engines. Preferably both. So don’t be scared about doing the wrong thing. Instead, do the right thing. Write good content. Make sure it looks good on as many devices as possible. Don’t try to make it look like print. Make it look like it belongs on the web. You will be rewarded for it.

This was originally published on the B² Interactive blog. Illustration by Katie Kassel.

You May Also Like…

You Will Be Missed, Dean

You Will Be Missed, Dean

I'm saddened to learn about the passing of Dean Allen this week. He was one of the great writers and designers of the independent web. And he created one of the best content management systems of the early 00's – Textpattern. Nearly every site I built between 2005...

read more
SVG Filters

SVG Filters

Last month I wrote on the B² Interactive blog about using SVG filters to help enhance all the photos on a large website I was working on. Using SVG, I was able to brighten all the photos without having to download them all and batch process them through Adobe...

read more
A Designer’s Most Underrated Tool: The Highlighter

A Designer’s Most Underrated Tool: The Highlighter

Designers use a lot of different tools in their day-to-day life. But the one that I don’t see many using is the simple and unassuming highlighter. Yes, you read that right. Not the latest prototyping software du jour, or the Macbook Pro. The highlighter. It’s the tool...

read more
Design Is A Service, Unless It Isn’t

Design Is A Service, Unless It Isn’t

Designers, often fresh out of their studies, can be a complete pain in the ass. I say this with love in my heart. We study design because of our artistic sensibilities—and, well, we like eating. That starving artist look is only attractive for so long. So we head out...

read more