Saturday, March 27, 2010

AdminEssay: Sans-Sucky - Part 1: Text Readability and Optimization



Sans-Sucky - Part 1: Text Readability and Optimization




The text readability discussion is one that every person is readily willing to give their opinions on. Do you like white on black? Black on white? Serif? Sans-serif? Italic? Bold? Color? Textured backgrounds? Whitespace? Full-justify?

Well, if you're looking to please any sized audience, then throw your preferences out the window! What you prefer doesn't matter, because, presumably, what you'd really prefer is for someone to read your shit, yes? Right. So is there a standard?

There's a standard for anything, and text readability is no different. I actually attended a few seminars on typography and text-readability back in the day, just for fun. Yes, this makes me incredibly geeky. No, I don't mind it at all. Yes, the seminars were a blast. Yes, I made charts and came home and researched and never stopped. I won't call myself the Goddess of Fonts or anything, but I will admit that, if the title existed, I'd work exceptionally hard to obtain it.

Please Note: These are simply facts and opinions coming from the technical spectrum. I don't claim to know what's best for fiction-writing, nor am I trying to pee on anyone's artistic license. XD

I Shot the Serif



A lot of people make the common misconception that print and on-screen text rules are similar. But our eyes have natural aversions to reading text on-screen. Screens of any type (PCs, TVs, handheld devices) are an actual light source, whereas print (ink onto a surface) reflects and absorbs light. This is an epic distinction, and because our eyes and brains must function in different ways to decipher the text, different rules apply. So if you've ever thought, "Oh, well I like this book wherein the text is all in Times New Roman, so I want to do the same on my story online," then STOP!

Consider this:

For print, serif fonts (ie. Times New Roman) are best for blocks of text, because the serifs (the little tails on the letters) help our eyes easily distinguish the lines and guide us to the next word. However, operating systems have options and settings which smooth and slightly alter serifs (alias and kerning), and combined with the light source of the screen, this makes the text look overwhelming to our eyes. We distinguish all of this stuff happening and we are compelled to jump around and find our places.

Also consider this:

Tip: Readers can change font styles on FFn.


Look at majorly trafficked websites like Twitter and Google. Note their constant use of sans-serif fonts. They have billions of dollars and plenty of statistical analysis at their disposal. If there were more evidence that serif fonts on-screen weren't difficult to read, then they'd be using them, as their top priority is mass appeal.

Sure, there a certainly valid arguments that sans-serif fonts can create distracting optical illusions on screens, and a few studies even show that the type of font used doesn't much matter, but I don't personally or professionally subscribe to this theory, as there are far more studies proving that, not only does font type matter, but it is essential to eye comfort.

The exception for serifs would be headers and titles, and any other text which is generally larger in size and one line or less. In these cases, serifs are perfect, which is another anomaly compared to print, wherein sans-serif fonts would be used for such a thing.

TL;DR - Serifs are eyefuckers.

Serif vs Sans-Serif in the same font size.

Excerpt taken from Chapter 1 of
radiofreeamy
's
Visitation
.

Font-Families



Now that we've deduced which types of fonts are optimum for readability, lets break this down once more and explore different font families!

So long as you're going sans-serif for large blocks of text, you can exercise some level of preference and favoritism. It is important to remember that, though you personally might have 200 fonts installed on your PC, that many people won't. Therefore, you must stay within a certain spectrum of commonly installed fonts. What are these fonts?

Below is a list of commonly used fonts, and the operating systems they come bundled with. (from upsdell)

GenericFontWindows
2000/XP
Windows
Vista
Mac
OS X
Linux
Unix
serifCambriaVista FontCommon Font  
ConstantiaVista FontCommon Font  
GeorgiaCommon FontCommon FontCommon FontCore Web Font
Palatino LinotypeCommon FontCommon Font  
Times New RomanCommon FontCommon FontCommon FontCore Web Font
Times  Common FontCommon Font
sans-serifArialCommon FontCommon FontCommon FontCore Web Font
Arial BlackCommon FontCommon FontCommon FontCore Web Font
Arial NarrowCommon FontCommon FontCommon Font 
CalibriVista FontCommon Font  
CandaraVista FontCommon Font  
CorbelVista FontCommon Font  
Helvetica  Common FontCommon Font
ImpactCommon FontCommon FontCommon FontCore Web Font
Microsoft Sans SerifCommon FontCommon Font  
TahomaCommon FontCommon FontCommon Font 
Trebuchet MSCommon FontCommon FontCommon FontCore Web Font
VerdanaCommon FontCommon FontCommon FontCore Web Font
cursiveComic Sans MSCommon FontCommon FontCommon FontCore Web Font
monospaceAndale MonoCommon FontCommon FontCommon FontCore Web Font
ConsolasVista FontCommon Font  
Courier  Common FontCommon Font
Courier NewCommon FontCommon FontCommon FontCore Web Font
Lucida ConsoleCommon FontCommon Font  


My own personal faves for block text are Tahoma and Trebuchet MS, though many websites, like fanfiction.net and default Google Docs, use Verdana. This is all personal preference, of course. For titles and headers, you can get a little more creative, and I much enjoy the use of Cambria and Impact (which is a sans-serif, but not suitable for block text).

Keep in mind that those optical illusion issues mentioned above are caused by the Arial typeface. It is widely avoided because of this.

In the evnt that you're setting fonts geek-style, it's always an excellent idea to make font "stacks" when setting families in HTML or CSS. This means that, instead of choosing one, we give the browser a back-up option that is most like our original. We do this because font style is important to design and readability, and sometimes, whatever the browser defaults to when your first choice isn't installed on the browsing machine may be far from what you intended.

Font stacks will look like this:
<font face="Tahoma, Trebuchet MS, Verdana, Sans-Serif">My kitties are pretty.</font>

So the first font the browser is going to look for is Tahoma, and if it's not present, it'll look for Verdana, and if that's not present, it will default to your operating system's sans-serif.

Font-Size



The biggest factor in the previous two sections is going to be text-size. Smaller text is best in sans-serif, and larger text is best in serif. The optimum font size for large blocks of text is 12px (or 9pt), though you have +/-1px breathing room. Headers and titles require anything above 16px.

Line-Height




Tip: Readers can change line-height on FFn.
Line-height is probably one of the best, least used methods to optimize readability. I think people mostly overlook it simply because they don't consider line-height to be as important as faces and sizes, but it is. A nice, robust line-height expands white-space and assists our eyes in traversing lines of text. In layman's terms? It's just so comfy!

How to set line-height?

Fanfiction.net, like font faces, sizes, and colors, allows you to set your preferred line-height. Try playing with this some time! Test it out, get a feel for the differences, and see if you enjoy it more.
<font style="line-height: 200%">
<font style="line-height: 20px">
<font style="line-height: 1.5pt">

These are good, comfy amounts of line-height for 12px text.

0 Line Height vs 1.5pt.

Excerpt taken from Chapter 5 of
radiofreeamy
's
Visitation

Double-Spacing




As late as 1941, the practice of using double spaces to separate sentences was still alive in the U.S., as seen in this extract from Damon Runyon. Within the following few years, the practice became all but extinct in commercial publishing on American shores. Source.
You ever run into those hoity toity types who tell you that it's "proper to double space after a period?" Yeah, and then you kinda snort, and you think WTF? Really? And then, if you're me, you Google that shit quick-like, because, woah. Never learned that in English.

Well, some people do this, and the "proper" term is an "em-space." You know, kinda like how the "em-dash" is a long version of the plain-dash. Basically, it's this totally archaic deal in which some old mofos started this trend, be it for commerical printing profit conerns or whatever else, and it was apparently "all the rage" back in the 1770's. There was no real discernable purpose for it back then, but then with the eventual invention of the typewriter, em-spacing was actually proper, typographically speaking. This was due to the fact that typewriters use monospace (every letter and space is the same width) characters, and allowing the extra space made it so the carriage moved a fixed amount after every keystroke. Its benefit was strictly mechanical.

But we aren't working on a typewriter, and we aren't a bunch of penny-pinching old dudes, so there's no real purpose to em-spacing. I won't say there are any adverse effects to using it, however, aside from that of the reader stopping to wonder, "Wait, why are there two spaces after every sentence?" And anyone out there who thinks their use of em-spacing equates to their shit not stinking can just gtfo.

Justify My Love



Okay, so it would seem as though I commonly break the rules here, but I can explain why.

Justify is the perfect spacing of text that is flush to both side margins.

Why is it bad? Well, depending on the content of the text, it can cause major readability issues, such as something called "rivers of text." It also takes away important visual line cues---kind of like seeing a staggered line and knowing when you jump back to the other margin where your place is.

There are different levels of justification, however, and used in the proper way, many issues regarding justification can be avoided.

Full-force-justify will make the text margins a perfect square. This is the worst of all justify options, as the white-space it forces can be dramatic and jarring.

Simple justify will simply move text around to accommodate the justification, leaving the final line of text shorter or equal to the rest, however necessary. This lessens the problems with dramatic white-space and still allows you the perfect margins, in the event that you're doing an article like this, or wishing to show images with your text wrapped around it.

I like the look of the straight flowing lines justification offers, but consider what you're using it for. Large blocks of story text probably aren't an ideal place to play with it.

Non-Justified text vs Justified.

Excerpt taken from Chapter 12 of
radiofreeamy
's
Visitation

Swanky Italics, Bolds! Sarcastic Strikethroughs, and Ultra Uber Underlines.






Aldus Manutius, famous printer, inventor of italics, and EPOV mindreading pioneer.
Italics are most efficient for the purpose of showing us what's thought versus what's spoken, and for emphasizing words or short phrases.

But with great power comes great responsibility.

Italics, like all wonderful things, should be used in moderation. After so long reading italics, you eyes go all crossed and itchy. How much italicized text is okay?

Well, in the case of italics, sans-serif fonts are actually more difficult to read on-screen. IKR? All of these fucking conditions, so annoying. But keep in mind that the purpose of italics is to emphasize words or short phrases (cwidt?). It was never meant to emphasize enormous blocks of text.

As a personal rule, I always prefer to italicize when the sentence is two lines or less. I know, this can't always be followed, like in instances where Carlisle is thinking a particularly lengthy medical explanation to Edward, etc., but we should aim for brevity! I mean, we've all gotten to that point in a story (I've done this before myself, so no hate) where an entire scene will be in italics. We see this daunting page full of slanty text and involuntarily groan. We kind of wanna skip it, yeah?

Full journals, diaries, letters, flashbacks, and anything else more than a couple paragraph is definitely too long to be italicized comfortably. In these cases, I suggest (no hate mail, please) use of a horizontal line (<HR>) or one of your very own fancy scene markers to separate it from the main text. Our eyes will thank you.

Bad:
In WA,
chapter 47
, I jump from ENORMOUS blocks of italicized text to non-italicized text several times. Obviously, I could have used a horizontal line or my signature scene marker (---) to split these up, and it would have been more comfortable. Instead, we're adjusting our eyes like a gabillion times. ~slaps own hand~

Good!:
Addicted to Edward Cullen
, the author of
Music of My Soul
has two flashbacks in
chapter 4
, but as you can see, she made such a flawless transition from present to past that italics weren't necessary.

Once I could stand straight again, I wandered aimlessly around the perimeter until I spotted a group of computers arranged in a ring around a circular table. I sat at an available one and clicked the "Log in as Guest" button. While I waited for the computer to finish doing its thing, I gazed at the shelves across from me. "Classic Literature" read the sign above the shelves.

A small smile formed on my lips.

I'd been walking by the narrow aisle of Classic Literature books in library at Forks High School when I'd noticed a girl with long brown hair stretching to reach a book on the very top shelf. She was standing on her tiptoes on a small step stool, apparently not realizing her feet were off-center and causing the stool to begin to tip.

Also Good:
Unholy.Obsession
's
How to Save a Life
outtake,
Miss Mad World
shows various journal entries, along with the thoughts of Bella, who is reading it. Instead of using italics to make us distinguish journal entry from internal dialog, UO uses scene markers, and this, coupled with the inherent context of what's being read, is more than enough to help us distinguish.

There was nothing left in me that wanted to turn the page. I wanted to go back in time, I wanted to leave the diary lying there, I didn't want to be aware of such ugliness. But I already knew that ugliness like this existed in the world, through no one's fault, and I couldn't stop now. I flipped to Tanya's final entry. I braced myself for what I knew was coming. The end.
3/18/09

Dear Diary,

It is 2:30 PM. I did not go to school today. I still haven't slept. But I've been busy. I've been so very, very busy and you want to know the best part? My mind is quiet. My mind is finally, finally, finally blessedly quiet and I have some peace of mind.

TL;DR - Step away from the CTRL+I.

Bold
should be used in even greater moderation. Its purpose is to draw attention, and if you've ever seen a chapter/flyer/article/etc with many words or phrases bolded, you know what I mean when I call such things, "The bold that cried wolf." When so many items are being flagged as important, then are they really important anymore? Not really. And then, there will come a time in the text when something really is important, and no one will believe you.

Fail.

Bold causes a big readability issue, since items are competing for attention, but it also causes extra noise issues that we just don't want.

When you're about to press the big "CTRL+B," consider if the same effect could be achieved by italicizing the text instead. Then, apply the above rules for italics to consider if the same effect could be achieved by using horizontal lines or scene breaks.

TL;DR - Bold is last resort.

I rarely see
strikethroughs
used for anything other than sarcasm, visual scribbles (like in journal entries), beta editing, or, if we're being proper, to depict the crossing out of an item from a list. Fanfiction.net doesn't allow you to use strikethrough, however, so keep this in mind when writing, so as to avoid any embarrassing "was meant to be crossed out, but now it's not" situations.
  • Sarcasm:
    No, I didn't eat dinner, especially not Cocoa Puffs.
  • Visual Scribbles in Fiction:
    [Study Hall Note to Alice]
    I guess you can come over after school. Is that a curling iron in your backpack?
  • Beta Editing:
    "This is dumb," Edward said shrewdly.
  • Crossing Out from List:
    Bacon, eggs, bread, muffins, Cocoa Puffs, hot dogs, grapes.
Unless you're emphasizing a hyperlink, title, subtitle, or are trying to be intentionally funny, just don't use
underline
. Ever.

ALL CAPS: THE VIRTUAL YELLLLLL



STOP SCREAMING AT ME. I DON'T CARE THAT BELLA IS LITERALLY SCREAMING AT EDWARD IN CHAPTER FIVE OF YOUR FIC. THIS IS NOT COOL. AN EXCLAMATION MARK AND A DRAMATIC DIALOG MARKER DOES THE JOB SO CAPS-LOCK DOESN'T HAVE TO, KNOW WHAT I MEAN? I HAVE NO FANCY STATISTICAL EVIDENCE TO PROVE WHY ALL CAPS IS SO FULL OF SUCK.

IT JUST IS.

The Color and the Shape




Tip: Readers can change color schemes on FFn.
What is easiest to read? Dark on light, or light on dark? The truth? It doesn't matter. If you're using sans-serif fonts of a common font-size with all other comfortable elements, then this shouldn't matter. The font should be comfortable to read either way.

BUT...

Again, take a gander at majorly trafficked websites such as Google and Twitter. They use dark text with a light background, and I've never seen anyone complain over Google's totally annoying white background and black text.

If you're playing it safe, go black on white.

If you're looking to be a little adventurous, then consider the brightness of font colors versus backgrounds. Stark white on black is harder to read than stark white on dark grey, or light grey on stark black.

Here's a
neat little tool
that will allow you to experiment with variations. As you can see, it'll alert you whenever the readability alogrithm catches a combination that's difficult or impossible to read.

Some Good Contrast Variations; Light and Dark:




Excerpt taken from Chapter 8 of
radiofreeamy
's
Visitation
.

Fun with Titles!



Super Awesome Title

The title above was created using the CSS tags, font-variant and letter-spacing.

<b style="font-family: cambria; font-size: 16px; font-variant: small-caps; letter-spacing: 3px; color: #26FFF4;">Super Awesome Title</b>

Other than my use of serif for a title, I have no fancy statistical or scientific evidence to prove why this is cool.

It just is.

Block Text Width




Tip: Readers can change page widths on FFn.
So, fanfiction.net has this neat little option which allows you to control the width of the text you're reading. Some authors will tell you straight up in their A/Ns to set it to 3/4 or 1/2, as opposed to the full screen width that is FFn's default.

Why?

Well, our screens are really wide. I remember back in the old days when it made sense to optimize all designs to 800x600. Now, the notion is almost laughable. Who the fuck still sets their screen resolution to 800X600? (My mother doesn't count.)

Now, the laughably small screen resolution is 1024x768. We usually go larger than this, what with the advancement in graphic card technology over the years. This means that our screens are wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide.


Tip: Authors can change page widths in Google Docs.
It's just easy as fuck all to lose our places, see. We have distractions, noises, eye jumps, attention diversions, you name it. It takes us more time to read an entire line of text on full screen width. Plus, keep in mind that we're seeing all this text and barely any whitespace. Ouch. It's a little daunting.

Therefore, it's a pretty good idea to make block text a fixed-width. In FFn, we, as authors, have no control over this, but as readers, we do. I always read on 1/2 screen (and I use the dark scheme with high line-height, but you dgaf about this).

Fortunately, we can control our block widths in other places, such a Google Docs and any posting location that allows HTML.

Important:
Never use pixels to define width in HTML. There are too many screen-size possibilities within your audience. Instead, always use percentages..

In conclusion...



The nature of screen-based text is more important than many realize. Consider how many hours per day we spend reading text from a screen. This shit can get painful. Whether you're doing a blog, making an archive, posting a story to LiveJournal, or just creating a PDF or Word document, you definitely want to make your audience as comfortable as possible.

As I stated ^^^ up there, this is all coming from a technical web spectrum. Thus far, I've found no reliable resources that are specific to on-screen text readability with literature in mind. I think it's a credit to the advance in times that it's probably becoming common enough to consider it, though.

Sources:
Creative Pro
,
hgrebdes.com's Color Theory
,
Typeface Blog
,
WebDesignFromScratch.com
,
Skills for Access
,
The History of Linear, Sans Serif Typefaces


Next time, the real fun begins!




Big thanks to
catonspeed
for the font humor (I lost that link, goddammit!),
radiofreeamy
and the other Twitter gals who volunteered their fics to be excerpt'd, and @dotpark3r, just because she always get my lame ass font humor. And you. For reading this boring shit.

17 comments:

  1. Great article. I always knew there was a reason I prefered sans serif type on my computer screen, I just didn't know there was a real reason beyond personal preference.

    Was laughing at the info about the em space. I'm an old school typist, the AF taught me to type on a manual typewriter in 1978 so it's been a hard habit to break. Twitter has helped with it:)

    ReplyDelete
  2. Outstanding article! I learned quite a bit from it. If I ever decide to post my own stories this will come in so handy.

    ReplyDelete
  3. A truly outstanding article AG. If I was still in publishing, I'd hire you ;-)

    On another note, in print (book print) Times Roman (original Linotype font) was determined to be the most readable font for nonfiction (textbooks, etc.) But reading in a vertical format (on a computer monitor) changes all the rules. Oddly enough, it took years of practice for editors to learn how to edit on a monitor - the eye scans differently than if it's below you.

    Yes, I'm that old. I was producing books when the type was cast in hot metal...

    ReplyDelete
  4. Well, Ive realized over the years that my school district must be behind the times. Im only 24, but was taught the 2 space after periods rule, and was shocked to come across friends in college who went all WTF-are-you-doing at me. Finally just a couple months ago I got the typist explanation from my dad. He also went off on unit spacing vs proportional spacing - most fonts today are proportional, meaning that an 'i' and an 'n' take up different amounts of space, for example. For these fonts, 1 space would be 'right'. Unit spacing isn't nearly as common any more, but fonts like courier are unit - each letter takes up the same amount of space. For THESE fonts, the double space may still be appropriate, but it's really down to aesthetics and ease of readability. I still cant break the habit...

    Now for my quick tangent! Along the same lines, our QWERTY layout is a carry-over meant to slow down typing so the type writer keys wouldn't stick! But we've kept it, unlike the 2 space rule. Ive actually swapped to a Dvorak keyboard, which is debatably a more logical layout. But honestly, I swapped more out of boredom than a need for speed. And its turned out to be an AWESOME security feature for my computer, since the physical keys are still in QWERTY so nobody but me can type anything logical on this baby!! Try and write AngstGoddess, and youll get AbioyIree.oo, for example! Its possible I get a little evil pleasure out of it.

    Thanks, AG, for a great article! Its always a blast to have the underworld of our everyday lives shown to us!!

    ReplyDelete
  5. jsyk, i like screaming at you.

    ...especially while beta'ing

    ReplyDelete
  6. All this information is great and smart...but it's also everything that makes me not want to be a graphic designer. I opted for interiors.

    ReplyDelete
  7. Very informative, AG! I truly learned a lot & will definitely mess around on FanFic to help my eyes! Just so I can read later into the night!

    ReplyDelete
  8. Oh this is anything but boring! This is what I've been kinda doing without thinking really hard about it. I just go with what my eyes want. :D

    ReplyDelete
  9. This was fascinating! Thank you for pulling so much great info together in one place.

    ReplyDelete
  10. Fontalicious! I feel all informed and my geekery is satiated.

    Excellent points, and you're right, readability is such a big issue, which is why I end up printing a lot of text out and reading it that way. With the amount of time spent on computers these days, adjustments like font sizes, backgrounds, and justification, can make a massive difference. My spyholes would mount an escape plan and run for the hills otherwise. The last thing I want at the end of a long day is to be squinting at fic on my nokia on the train home.

    Can't wait for part two! And I'll resend that link ;)

    p.s See *points upwards* these people love the geekery too! MOAR FONTS!

    ReplyDelete
  11. Great article, I actually will be copying and using the "Font Families" chart, will be great info to use at work.

    Other than font size I ignored a lot of the options FFnet has for adjusting what you see on the screen. (Duh.) Played around with them last night and loved the results. What I REALLY wish is that I had more options as the author to control how it looks when I publish it on FFnet than relying on the readers to make these changes to make it prettier. (I'm a design geek, I can't help wanting to control how it looks.)

    catonspeed mentioned printing stories out to read. I always print my stories out and do my first edit reading them on paper and marking with real red pen. It's like looking at it fresh after hours and hours of looking at it on a computer screen.

    ReplyDelete
  12. Wow, thanks so much for this article! It was really great and I learned a lot. Plus, it didn't hurt that it had some humor as well.

    Thanks again!

    ReplyDelete
  13. Thanks for unraveling the mysteries of this for us!

    The benefit of having a double space after every typewritten sentence was not strictly mechanical. The human eye reads information in chunks, and because there is no variation of letter width in monospaced type, there is nothing for the eye to latch onto. Because of this, using a double space came into use largely for the sake of readability. It signaled to the eye that one sentence was ending and another sentence was beginning.

    ReplyDelete
  14. Real red pen... oh CherBella... you are my kind of lexical textual heroin *sniggers*

    Seriously though, red pen FTW! I don't know whether it's a purely psychological barrier, or if it's the actual formatting of the words on the page, but i take in a lot more with printed documents. And of course, i like to make notes, and may or may not decorate with an array of rainbow post-its and tabs. Admittedly I can do this with track changes in word, comments in acrobat, or a whole host of other options in multiple pieces of software, but it's just not the same. So i whip out the pen, red if available *wink*, and scrawl my own Lucy font across the paper --> http://img709.imageshack.us/img709/7820/lucyp.png

    I blame my research background, it has imbued me with the need to compulsively note take the ever loving shit out of and colour code things. I love it though.

    ReplyDelete
  15. I'm so glad I read this. I believed it was the light writing on dark background that I hated, but you're right, it's the font.

    ReplyDelete
  16. Aha, actually, in England, we're still taught to use em-space!
    Usually when we're about 10.

    I've learned quite a bit from this article! I think I'll be going making some drastic changes to my blog now, haha.
    Thank you :).

    ReplyDelete

Spread The Word