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)

Generic	Font	Windows 2000/XP	Windows Vista	Mac OS X	Linux Unix
serif	Cambria
	Constantia
	Georgia
	Palatino Linotype
	Times New Roman
	Times
sans-serif	Arial
	Arial Black
	Arial Narrow
	Calibri
	Candara
	Corbel
	Helvetica
	Impact
	Microsoft Sans Serif
	Tahoma
	Trebuchet MS
	Verdana
cursive	Comic Sans MS
monospace	Andale Mono
	Consolas
	Courier
	Courier New
	Lucida Console

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.