Storyline Blog

Writing, news and stories about the craft of writing for an audience

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

Why you should care about design if you're a writer.gif

Storyline Longform is a series of in-depth articles that explore narrative approaches to web writing and design. This week, we look at the layout and design elements that all web writers should pay attention to when collaborating with web designers or developers.  


Why you should care about design if you're a writer

My first website writing job quickly turned into a website designing job. At the time, it was a big and weird step for a writer 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 learning how to design websites, so I was almost more comfortable writing with design in mind. In fact, the idea of handing over a carefully crafted text to a web developer, who would most likely not even have any design background, wasn’t attractive at all. Why go to all the trouble of writing something great when it gets turned into the visual equivalent of late-night community access TV? 

I also had some DIY training in graphic design. With no budget to hire a graphic designer at Storyline, I’d been moonlighting as one. In the space of two years, I’d become a font freak, and learned a thing or two about hierarchy and colors. By graphic design standards, it wasn’t much, but it was a lot more, I would find out, than most web developers know.

Don’t believe me? Pick any phrase at random. Type it into your browser and click on the the website at the top of Google’s list.

See what I mean?

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 the colors, sizes and letter spacing of the headers.

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 into design or don’t want to learn how to do it, you should still pay attention to the design choices made for your texts. After all, it’s your work, and an opportunity to grow your portfolio. You don’t want anything you write to end up looking like late-night community access TV.  

So, here a few things you should be paying attention to when you hand that text over to the developer.

Think about your fonts.

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. Because the way your text looks will influence how people interact with the site you’re writing, and ultimately how they see the brand whose story you’re telling.

The good news is you can still be sensitive to fonts without being a typographer. You just have to listen to your eyes. 

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. Platforms like Squarespace, which offer hundreds of font options via Adobe Typekit and Google Fonts, sometimes just make these decisions harder.

Can you choose the best font for a Gold's Gym reboot? It may be easy to throw out the monospace font and the display font (no. 1 and no. 4) on pure gut instincts. But which works better here, the condensed font (no. 2) or the slab (no. 3)? Or should we trash all four? Let us know below in the comments. 

Clockwise from left to right: PT Mono, Din Condensed Bold, Super Clarendon, Snell Roundhand.

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. FF Din, which has a bit more personality, is also a good body text for a lot of projects. If you’re using Google Fonts, Roboto or Open Sans are safe bets, although for both, the 300 weight can be a little too light for body text and the 400 just a little too heavy.

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.

“Fonts are as much a part of your narrative as the text you write.”

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 for maximum user ease.

Ok, this is a 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.

If we were in a wildlife documentary, gigantic lines would be the equivalent of a strong unpleasant odor emanating from your monitor. In real life, line widths of this size will get you bounced faster than Justin Bieber at a Harley Davidson reunion. This has been scientifically proven. (Line width, not Bieber).

What should you be aiming for?

Here's Typewolf, by Jeremiah Shoaf, one of the best free resources out there for web typography. Shoaf's lines clock in at a very slender 75 characters, and that's including spaces. Give Typewolf a spin and see how, together with a beautiful font choice and nice contrast between letters and background (see more below), a user-friendly line width helps showcase the text while making it less tiring to read.

Typewolf uses 75-character lines

Ok, you don't have to strip your lines down to 75 characters. 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. 

“If we were in a wildlife documentary, gigantic lines would be the equivalent of a strong unpleasant odor emanating from your monitor. In real life, line widths of this size will get you bounced faster than Justin Bieber at a Harley Davidson reunion. This has been scientifically proven. (Line width, not Bieber).”

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. If you want to make a mandala, where letterforms are ornamental, you can leave your site in the 12-16px range. If you actually want users to read your content and savor it, up it to around 19px or even 20px.

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

Marvel App

Obviously, this doesn’t hold in every case. Some fonts render smaller, some larger. At 17px, for instance, Roboto Mono looks as big as 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.

“If you want to make a mandala, where letterforms are ornamental, you can leave your site in the 12-16px range. If you want to allow users to read your content and savor your fonts, up it to around 19px or even 20px, or the equivalent in em or rem.” 

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, Twitter’s long-form writing platform, 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. 

Here's Medium. Any ideas what color Storyline is using for its body text? Read to the end to find out.

Medium's body text is 16% short of black

WHITE WAS NEVER THE NEW WHITE

Here’s another tip for web writers. Not every site needs a pure white background. 

When I was designing my community writing center, Write CY, I made what I thought was a huge mistake. I bought, and opened, a tub of magnolia white paint by accident. I was devastated. I’d had visions of MOMA for my brand new factory studio and here I had a gallon 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 your eyeballs in the morning, or make you 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 light on dark

You: But I like white letters on red! It's sexy.

Me: 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 header font sizes and letter spacing work across device screen sizes.

responsive platforms don't always get it right

Most of us can see why a huge hero-sized header 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 headers to look the way we want them to look isn't always so straightforward. Sometimes even platforms like Squarespace, which scale 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 will allow you to 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 header text is CSS breakpoints, or the screen widths at which your headers 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 header that looks too small on a tablet or too big on a mobile phone, you can at least communicate the point to the designer.

 Pay attention to CSS breakpoints  Source: Creative Bloq

Pay attention to CSS breakpoints
Source: Creative Bloq

letter spacing and word spacing give you more control

Font size isn't the only factor to consider when designing your text. Letter spacing, or tracking, which is the space between letters, and word spacing, which is the space between words, can give you more control over headers too. Though it's standard practice to increase letter spacing as you decrease font size, you may have to reconsider that when you're writing for the web. Every font is built differently. Fonts with naturally large positive word or letter spacing might not be so noticeable on large screen widths, but when the same text appears on a mobile device, it may end up looking like the typographic equivalent of a gap-toothed mouth. Always trust your eyes. If something looks bad, the designer should know.  

Reduced letter spacing on smaller screens sometimes looks cleaner
Design: Storyline Creatives | Source: The Onion

Finally—and this applies more to blog titles (dynamic content) than the headers 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. 

Coda

Ok, so we’ve touched on body text, headers and line width, which is enough to give your text a fairly well-designed home. Next week we’ll take a look at color palette, and the more tricky ideas behind integrating and laying out text with visuals.

If you're curious, this site use hsla (0, 0%, 0%, 0.78) for its body text, 12% lighter than Medium. The background isn't pure white either, because unlike MOMA, we want you to stick around.

Note to the reader: Part 5 of this article was updated on July 16 2018.

Max Sheridan's writing has appeared in a number of online and print publications in the US, UK and elsewhere. He's worked as a teacher, journalist, editor and copywriter. He's the founder and director of Write CY, a Nicosia-based platform for creative writing and community storytelling, where he teaches Story Craft, a 10-week short story writing course. His novel Dillo was released by Shotgun Honey in December 2017. Talk to him at: max@storylinecreatives.com.