Forum Moderators: open

Message Too Old, No Replies

Web Page Readability and Punctuation Marks

         

tedster

1:02 am on Dec 9, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I've just been studying an excellent book "The Elements Of Typographic Style" by Robert Bringhurst. It's about print typography, so not all of it translates to the web by a long stretch. But I've garnered a few gems about punctuation that are helping my pages to be an easier read.

Given the difficulties of online reading, we can use every edge we can get. My thanks to Bringhurst for these ideas.

Periods
Every puncutation mark is a mini-disruption to the eye when a reader first scans the page. When periods are over-used, it can make a page look like it's full of bullet holes. So, Bringhurst suggests some print "rules" that make lots of sense on a web page.

Common abbreviations and acronyms don't require periods to be understood - this may include degrees such as MD, state names such as NY, acronyms such as CIA and so forth. I have one client with a medical site, and eliminating those pompous periods in the degrees after people's names was a breath of fresh air.

Quotation Marks
Printers got along for centuries before quotation marks were invented. The simple convention of indenting a quote already shows quite clearly what content is quoted. We have this convention close at hand with the <blockquote> tag and don't need to be redundant by adding in quotation marks (especially those dramatic angle quotes!)

We also have other means at our disposal to indicate quotes, such as changing the background color, or shifting the font from sans-serif to serif, normal weight to bold, a different color, etc.

We can get along beautifully without those dangling slashes, curls and angle marks in many cases. This approach is particularly helpful when we have quotes within quotes. An extended sequence of single and double quotes can be very distracting from the meaning we hope to convey with our content.

Hyphens and Dashes
Finally we have good browser support for the N dash and the M dash. I say use them well. When we are setting off a phrase within a sentence, the N dash is the best and least disruptive. We should save the M dash for major dramatic pauses in the copy.

Typists evolved the habit of using a doubled hyphen to indicate a longer dash, but doubled hyphens are a distracting and unneeded element on a web page.

We can often eliminate the hyphen that strict usage would seem to require. For instance, a hyphen is strictly required in an adjctive phrase, at least according to typesetting tradition.

But there's no harm in writing
a twentieth century discovery
...instead of...
a twentieth-century discovery.

Not only is there no harm, but when this is a consistent style across a site, the pages become beautified and more inviting to the reader.

We do need to be alert to possible confusion. For instance, consider this phrase...
twenty one night stands
...it needs a hyphen to clarify whether we mean
twenty-one night stands
or
twenty one-night stands.

Any other ways to limit or use punctuation? Punctuation techniques that make your web pages easy on the eye, clearer in meaning, and so on?

jimbeetle

3:06 am on Dec 9, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I was very surprised when I first marked up some web pages and saw hard to read they were on the screen. The old textbook editor in me still winces but I continue to take a paring knife to my punctuation. Print standards just don't work for screen readability.

I do not use periods in common abbreviations such as degrees and states. I spell out all common street abbreviations (avenue vs av or ave, place vs pl, etc) because the abbreviation looks strange without the period. I think it might also help foreign visitors not that familiar with our street naming nomenclature.

For long lists of widget attributes I use pipes with double spaces instead of commas. Just love that white space!

I cut down my use of commas in straight writing. If a sentence reads well enough without them, they're gone. If necessary I rephrase.

I love the N dash but I'm lazy. If I'm not in a rush I use it. If hurried it's the old --.

I use a lot of compound adjectives and the hyphen is one thing that my editor self has to retain.

Any title is italic, whether magazine, book, play, opera, symphony, whatever.

I go so far as to omit the period at the end of a paragraph (but do include? or! if needed). I figure the space before the next paragraph signals the end well enough and the page looks much cleaner.

And I use 1 1/2 line spacing on much of my text to make it look cleaner, easier to read and differentiate from other blocks of information.

I'm sure there's more but them's the highpoints.

Jim

keyplyr

4:36 am on Dec 9, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Although grammatically incorrect, I always omit comas preceding and, or and but. Similar to the period malady, when I look at a page full of comas, it looks very complicated and I feel I have to keep score of something.

BlobFisk

11:26 am on Dec 9, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



There are some very interesting findings here [psychology.wichita.edu] on how text should be presented to the user for optimal readablility on a web page.

The article goes into optimal fonts and sizes, but has some very useful information on line lengths, which I found very interesting.

tedster

2:28 pm on Dec 9, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Did you notice that Wichita is NOT using a liquid layout? I think that preserving line length to font size ratios is one good argument for fixed width layouts.

Some flexibility might make sense to me, but only when I can count on widespread max-width and min-width support

choster

8:00 pm on Dec 9, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Don't get carried away. Speech browsers rely on punctuation marks to render content accurately. Unnecessarily omitting periods is just as distracting as unnecessarily adding them.

Some of the concerns raised are problems of poor writing, rather than markup or layout. Unless you're Joseph Conrad, nesting anything further than a quote within a quote is probably poor form, since inline quotations should only be used in brief. The "comma fault" is warned against in every high school freshman composition class. And if your text is so lengthy that dashes are distracting, maybe your page itself is too long-- break it up into chunks.

rjohara

10:43 pm on Dec 9, 2002 (gmt 0)

10+ Year Member



I'm a big fan of Bringhurst's book, even if I don't agree with every one of his recommendations. Typography geeks will adore any book that has a whole chapter devoted to typographic squiggles (which is what his long final section really is about). All those characters and many more exist in Unicode, and it will be a joy when we can properly include them.

The _Chicago Manual of Style_ is another one to keep by your keyboard at all times, and to study for examples of good text layout. They have a good FAQ page on the web that answers many common questions:

[press.uchicago.edu...]

Some time ago I went through all my pages and added proper em and en dashes, and I have not regretted it. Google supports these properly in the SERPs, which is an important consideration.

One character I encourage people to consider is a proper apostrophe ("high nine") in place of the typewriter tick-mark. In regular text is isn't always that conspicuous, but especially when someone makes a large text graphic and includes one of those typewriter apostrophes - ugh, it's like looking at a huge misspelled word in large print.

The numeric reference for a proper apostrophe is: & # 8217 ;