Designing your web text

An in-depth look at how web text interacts with web design and why writers should care about both

My first website writing gig quickly turned into a website designing gig. At the time, it was a big and weird step to be taking. Looking back, it’s the logical direction for any web writer who’s been hired to tell a company’s story to head in.

Ok, there’s a little background to this story.

At that point, I’d already spent a few years exploring web design. I’d learned a thing or two about type and even graphic design, so I was comfortable writing with design in mind. In fact, the thought of handing over a carefully crafted text to a web developer, who might not even have any design background, always put knots in my gut.

I mean, why go to the trouble of writing for an audience at all if your text is going to get turned into the visual equivalent of late-night community access TV?

Now flash forward to that first web writing job that turned into a discussion about website creation. In the end, it all worked out great. I got to “design my text” the way I’d envisioned it, down to palette, type, and layout.

Why was that such a big and eventful step?

Creative control. (Ok, if you learn a few things about how to best display your text, you can make more money, too.)

But even if you aren’t really into design or don’t have the time to learn the basics, you should still pay attention to the design choices made for your texts. After all, it’s your work. You don’t want anything you write to end up looking like late-night community access TV.

With that in mind, here a few design elements you should be paying attention to when you hand your next text over to a developer.

Think about your type

Font choice is a content choice

Fonts are as much a part of your narrative as the text you write. They convey deep messages at an optical level, which means that what may seem like extra style decisions — whether to use a condensed font or a monospace font, a sans serif or slab serif — are actually major content decisions.

That’s because the way your text looks will influence how people interact with the site you’re writing, whether it’s your own or a client’s.

The good news is you can still be sensitive to fonts without being a typographer.

You just have start paying more attention.

The Goldilocks dilemma

Granted, this can be a little like Goldilocks and the Three Bears. You may recognize what’s wrong, but not be able to choose what’s right.

Website building platforms like Squarespace, which offer hundreds of font options via Adobe Typekit and Google Fonts, sometimes just make these decisions harder.

Start with one typeface

One way to get a feeling for how type behaves on the web is to start with a workhorse typeface that comes in a bunch of different weights and styles and see how far you can stretch it.

If you have access to Typekit, Proxima Nova is a clean, versatile sans-serif typeface that works well in body text and in headers. If you’re using Google Fonts, which are all open source and free, Work Sans is one of my favorites. But this is the very tip of an iceberg of wonderful font options available today from a growing number of awesomely creative type foundries. (OhNo Type, Very Cool Studio, Grilli Type, Dinamo…don’t get me started!)

If you do find a nice font, but are having doubts, check it out in the wild on Fonts In Use. This is an excellent way to see how your font has been used in the past and it will give you very useful insights into how you might use it on the sites you’re writing.

Whatever font you choose, creating an effective, visually dynamic story using a single font is a good crash course in practical typography. By the time you work your way up to font pairings (most websites do use two, or more rarely three, fonts), you’ll be more confident and have a better idea of how weights and sizes interact with their environments.

Design your line widths to be read

Ok, this is a huge, huge pet peeve of mine. Screen sizes can vary from tiny 320-pixel mobile phones to huge 2,560-pixel iMacs. Take something in between, a 13-inch MacBook Air, which gives you about 1440 pixels. You don’t want your text to cover that whole width. That would be like publishing a book that you read horizontally across two pages.

As a writer who reads a lot of web content, I can’t stress this enough. Comically long line widths are instant headaches.

What should you be aiming for?

Jeremiah Shoaf at Typewolf, one of the best free resources out there for web typography, has lines that clock in at a very slender 75 characters, and that’s including spaces! Have a gander. While you’re there, notice how that user-friendly line width, coupled with a beautiful font choice and nice contrast between letters and background (more on this below), helps showcase text while making it less tiring to read.

If 75 characters including spaces is pushing it for you, a good reading width is about 85 characters per line, again including spaces. A little over or under won’t kill anyone. If you combine that with legible colors, you’ve gone a long way to making your client’s website a good watering hole for thirsty readers.

Choose a legible size for your body text

I’m not a designer by training, so I don’t know how 16 pixels became the default font size for a lot of website body text today. If you want to make a mandala, where letterforms are purely ornamental, you can leave your site in the 12–16px range. If you actually want users to read your content and dig into it, up it to 18-20px, depending on your body font.

If you want a detailed explanation that shows the logic behind using a larger body font size, this is one of the best articles on font size I’ve found.

Obviously, 18–20px doesn’t hold in every case. Some fonts render smaller, some larger. At 17px, for instance, Roboto Mono looks as big as FF Din at 19px. But as a rule, you’ll want your letters to be read and appreciated, because typefaces take years to create and love to show themselves off. The way to keep your letters (and your readers) happy is to make them big enough to do that.

Choose a legible color for your body text

Grey is not the new black

You may be surprised to learn that the letters on many websites whose designers really think about legibility aren’t pure black. For instance, Medium uses hsla (0, 0%, 0%, 0.84) for its body text and headers, which is 16% short of black. Vox, the news site, uses the even lighter hsla (150, 1%, 30%, 1).

They don’t do this because grey is the new black. They do this because pure black on white is an eyesore. It’s simply higher contrast than our eyeballs can tolerate.

White was never the new white

Here’s another tip for web writers. Not every site needs a pure white background. I learned this the hard way, but not on a website.

When I was painting our new office, I made what I thought was a huge mistake. I bought a tub of magnolia white paint by accident. I was pretty bummed. I’d had visions of MOMA for our brand new studio and here I had a few gallons of some color that looked like it belonged on Easter eggs. I didn’t have enough money to eat the costs.

It turns out I was wrong. With a light charcoal trim, that magnolia background worked beautifully. It provided gorgeous afternoon light and it didn’t blast the white back at our eyeballs in the morning, or make us feel sleepy or anxious to leave, both of which MOMA does pretty well.

I apply the same principles when I’m designing a website. Never black and never white. The sweet spot lies somewhere in between.

Beware of light on dark

If you like white letters on red and find it sexy, go for it. Just don’t expect many readers to stick around.

If you are going to go for light letters on a colored background, and aren’t a Kindle in nighttime reading mode, consider using this color scheme on shorter texts that won’t overtax our eyeballs.

Make sure your heading font sizes and letter spacing work across device screen sizes

Responsive website builders don’t always get it right

Most of us can see why a huge hero-sized heading that might look great on a 27-inch iMac will probably look a little weird on a smaller laptop, and will definitely not be very functional on mobile devices.

Still, actually getting responsive headings to look the way we want them to look isn’t always so straightforward. Sometimes even carefully designed website builders like Squarespace, which scales font sizes according to viewport widths, don’t always get it right.

If you’ve got some design experience, this means you might need to hand tweak those misbehaving headers via CSS.

Even if you don’t design, you should at least see how the headers you’ve written behave in the wild after you’ve handed your text over. To do that, go to Screenfly from QuirkTools. Screenfly lets you test your text across most popular devices and screen widths. If you notice anything odd, talk to the developer.

Pay attention to CSS breakpoints

Another thing to keep an eye out for when designing heading text is CSS breakpoints, or the screen widths at which your headings increase or decrease their font sizes.

While you don’t have to actually know how to code the breakpoints yourself, you should definitely be aware of them. That way, when you do catch a heading that looks too small on a tablet or too big on a mobile phone, you can at least communicate the point to the designer.

Leave letter spacing alone

Type designers spend years getting their fonts to read just right. Trust their letter spacing (the spaces in between letters), especially for your body fonts. Leave your paragraph text alone.

It’s possible that at larger and smaller sizes, you might be able to get away with a little finagling. Generally speaking, small text in caps may need a little breathing room and giant type may need a little tightening. If anything’s looking weird, talk to the designer.

Left align

Finally — and this applies more to blog titles than the headings of your static pages — you might consider left aligning. Although centering is the default aesthetic choice for blog titles, centered titles often end up looking messier. If you’re on the fence about this, or just can’t imagine a title that isn’t centered, look no further than the New York Times for inspiration.

Bottom line?

Your text is only as good as it looks. As superficial as that may sound, it’s true. Website visitors need to like what they’re looking at, even subconsciously, to stick around.

The most important element of a comfy web experience is text that’s effortlessly readable wherever it appears. The more knowledgeable you are about how to achieve that, the more valuable your input to web design projects as a writer. Spend enough time thinking about design and you’re well on your way to designing the websites you write.