Formatting Web Fic
by Sarah Q

This is not a rant on general webpage design. There are many people out there gifted with artistic skills who have studied graphical design, and they are all far more qualified than I to discuss design principles and writing HTML. So I'm not going to say a word on the subject.

(Okay, perhaps one word: alignment. There is more to composition than centering every element on the page. But that's all I'm going to say about general design. I promise.)

This is a rant about reading fanfic on a computer monitor.

I read. A lot. Perhaps more than I do anything else, including sleep. Much of what I read is fanfic, posted to mailing lists and to archives, or displayed on personal pages on the web. I read all of it on my old-fashioned cathode ray tube computer monitor.

Much of it is illegible.

Not poorly written. Illegible. This extends even to some very, very well-written fic, some of which I find more enjoyable to read than professionally published works.

But when I pick up a professional book, regardless of the quality of the writing, at least I get black text on an white paper. Maybe on ivory paper, if I went to the library and borrowed the hardback. Or perhaps gray, if the printer has been using recycled pulp. (Which, while environmentally noble, just doesn't feel quite as nice under the fingers. Ever notice that?)

Never do I see pink text on fuchsia paper.

So why do some people put a story on the web, especially a perfectly enjoyable story, and then blast it all to heck with a BGCOLOR="#009900" attribute?

Just because you can do funky things with HTML doesn't mean you should.

I'm not even referring to global accessibility, though that's certainly an admirable goal for a webdesigner. Take all the people out there like you and me who are lousing up their eyes by staring at a monitor all day, and it's a sure bet accessibility issues aren't going anywhere. If you happen to have software that will read text out loud, try closing your eyes and subjecting your webpage to a read-through, just to see if someone with a sight disability would be able to navigate it. There are a depressing number of ways to use HTML to make a webpage incomprehensible to speech software.

But say you've got decent eyesight. Say you don't, but you've been awake for a couple hours, so you've got your contacts in. Say you've even got a decent lamp, one that casts an even, indirect light across your desk.

You can't read blocks of text on a bright background without going bonkers.

The paragraphs dance. The letters bob and weave. You lean forward in your chair as you try to follow the line breaks. There's a certain throbbing that starts to build behind your temples, and if you're trying to read slash, then it's particularly hard to thrill to a hotly written scene when fighting back a headache.

The only thing worse than black text on a bright background is non-black text on a bright background.

And white text on a black background? Dude, it's very cool looking. Artsy, even. Great on a splash page. Great on an index page. But apply it to any chunk of text over 5K, and give my condolences to the reader.

For a fic to be readable, the text must be black. The background should be white. Default gray works, too. Yeah, I know it's usually a newbie mistake to leave the background unintentionally gray, but when done deliberately with a page of solid text, it works. There are also a few websafe colors, all pale pastels, that are workable: lavender (#CCCCFF), pink (#FFCCFF), peach (#FFCCCC), green (#CCFFCC), blue (#CCFFFF), and yellow (#FFFFCC).

Textures and patterns rarely work as backgrounds on the average webpage. If they're going to work behind that nice, long fic, then they'd best be subtle.

Contrast is the key. And black on white is as high contrast as it gets.

Now, if I'm determined to read a fic, then even a supremely poor color choice will not stop me. Select all, copy, paste to the text editor, zap the line breaks, and I have lovely black text on a lovely white background. I am happy. I am blissful. I am, for once, not bitching.

But why make it hard on your readers? Why make us fight? You are a writer. You are using your language to court your reader, much as you'd use your charms to woo a lover. Don't wear ugly clothes when you're asking me out to dinner.

Bright color is beautiful. You can splash abundant, unlimited color on your webpages for free; never again will you have to mortgage your soul to the print shop for something beyond grayscale. This is one of the glories of the web. My lord, yes: paint rainbows on your webpages. Or impress those of us who can't draw, and paint some lovely fanart. But your text needs to be legible, and ideally it should be easy on the eyes.

You say black text on white is boring. You say books are restricted to dullsville by printing costs, while HTML is free and neato.

I say text can be both easy to read and visually interesting.

Say you've written a PWP about Jim zoning on the feel of Blair's frayed blue jeans. You've got a gif of denim fabric, and you want to use it as a background for the fic. It's a cute idea, and something that's simple to do on a webpage. But you can still accomplish it in a reader-friendly way.

Use it as a border. Maybe just down the left margin, maybe on all four sides. Either way, the background behind the text can be left white. When you're proofing the page, knock your monitor resolution down to 640x480, just to make sure that it'll work for most folks out there in cyberland.

And as an added bonus, borders can be used to define margins for the text. This means the reader's eyes won't ping off the left edge of the screen with every line break. Text looks more secure when it isn't stretched across the entire page.

Friendly color. Friendly margins. Consider, for a moment, friendly fonts.

Webpages are not like the pages in a book. A reader can change a web browser's default font; a reader can even set their browser to override page-specified fonts. Style sheets define the presentation more strictly. But a designer does not retain complete control over the appearance of the webpage. Perhaps, though, your reader is giving you the benefit of the doubt. Sock it to me, she says; go ahead and dictate my font.

On paper, the most legible fonts are serif fonts. But all those little dangly bits are too busy for the screen.  On the screen, the most legible fonts are sans-serif fonts.

So save the cursive and the fancy fonts for titles. Use them sparingly, and they'll work better to catch the eye. For the heart of the text, go with something simple, like Veranda or Arial.