Web typography
It's not just HTML
wherein I defend a few bones of design

View a printer-friendly version

Read the accessibility statement for this website to know more about the accessibility-specific ehancements that have been implemented. The focus of this page is mainly on the non-syntactic issues that were handled.


There's more to web design than just HTML

Like a forest or a garden or a field, an honest page of letters can absorb--and will repay--as much attention as it is given. Much type now, however, is composed not for the page but for the screen of a computer. That screen can be alive with flowing color, but the best computer monitors have dismal resolution (about 130 dpi: one fifth the current norm for laser printers and roughly 5% of the norm for professional digital typesetting). When the text is crudely rendered, the eye goes looking for distraction, which the screen is all too able to provide.

From, The Elements of Typographic Style, by Robert Bringhurst.

A novice once asked a master sculptor how to sculpt an elephant. The master replied: Take a big rock, kid, and then chip off everything that does not look like an elephant.

I'm no master sculptor or typographer; neither am I a master web designer. But I've tried to incorporate as much of common aesthetic sense and reason into my page design as possible--borrowing and learning from the masters of the art, web style and design books, the print media, and using my own design sense (picked up from plain observation) as lagniappe.

Here's a little catechism on the design I chose.


Aesthetic issues

These are in no particular order, even at a conceptual level. So I'll just take them randomly, one at a time.


Why is there such a lot of wasted screen space on both sides?

Long lines of text on
screen are disorienting;
trust me on that one.

Ah, yes, screenspace. Before I get to the real answer to that question, which deals with web typography more than web design, allow me to crib awhile why it is an issue at all. You see, some people are so miffed by the idea that there is a little free space on a web page that they take it as a personal insult to their cutting-edge graphics cards and monitors. 640x480? 640x480? I'd rather stare at a rock all day than look at a page in 640x480, they wail. Well, to those people, I have an excellent suggestion: custom stylesheets. I have no intention of making the default visual style of my pages auto-expanding to fit screen--it makes reading textual content (which is pretty much the only content in these pages) disorienting. Trust me on that one.

Unless you have a truly superhuman eyespan, you'll find that reading large amounts of text laid out to fit the breadth of the screen is very, very, disorienting, and hence strainful to the eyes. I bet you wouldn't read a newspaper that lays out its articles end-to-end on a full-length paper--by the time you get to the end of a line, you'll have to waste a tremendous amount of time reorienting yourself to the next line, and more often than not, you'll end up losing track of which line you just read. Which is not a lot of fun.

Something like the McQuary limit, you might say.

Losing track of which
line you just read is
not a lot of fun.

It is indeed true that web content can be longer (in breadth) than their print counterparts without compromising on readability; since the typical viewing distance is more (your monitor is generally farther from your eye than the hardcopy you'd read) on screen than otherwise. But, long lines of text (especially on higher resolutions) will invariably require readers to strain their eye muscles (a minor pain) or move their heads slightly (a major pain) to track back over the text. Readability takes a big hit, simply because by the time your eyes make the trip back to the left margin you've lost track of which friggin' line you were reading. One way out is to resize your window, but that's uh, ugly.

And if I make it difficult for people to read what's on my pages, then, what's the point?.

The prime-mover of design that has guided me in making this site has been maximum usability. Which, to me, clearly translates into easily readable text and a clean layout.

To me, usability
clearly translates into
easily readable text
and a clean layout.

I've ranted on about readability for a bit now, so I'll quickly capsulise what the first part means. Easily readable text means a legible, elegant, and comfortable typeface, an easily accessible and comfortable layout, no text justification, nothing wider than, say, two typical eyespans, and a generally casual, yet striking, typographical mood (hmm, that could be hard to define).

Clean layout goes beyond just typographical niceties--for example, clean layout also means no cluttering of content, no excessive structuring and/or nesting of web pages; like Splash Screen > Home Page > Writings > Non technical > Culture > Societal idiosyncracies > People and their fancies > Actual Article. If I'd structured this site like that, you'd disappear off my server faster than I can spell out HTTP. Hypernesting makes it so darned complicated (not to mention time-consuming, impatience-inducing and super-boring) to browse a website, that by the time you're two pages down the totem pole, you'd rather click the close button and play with your dog than endure one more level of nesting.

(Of course, this doesn't apply to online web directories, like the Google Web Directory, which have so many categories of pages that you'll be spaced out just thinking about it. Even so, I'll wager that people use the search functionality in those pages, rather than actually starting from their central page, and traversing the hierarchy.)

This also has ramifications in terms of asking the user to make a choice. Every time I'm presenting a nested structure, I'm basically asking the visitor to make a choice. As Neo profoundly finds out with The Architect in one of The Matrix movies--choice, the problem is choice.

Choice. The problem
is choice.

Even if the choices that a visitor to a web site would have to make are not as revelatory and special-effects laden as Neo's, most are still, well, avoidable. Do you want to see writings of technical interest or writings of personal interest? Uh-huuhh. And every time a visitor is asked to make a choice, without knowing what his choice actually means, he becomes um, bored, and uncomfortable, and uninterested, and generally wondering what-this-is-all-about. Why the heck should I choose a sub-category? Just show me all that you've got, and I'll click on something that I think is worth my while.

Excellent point.

I've kept nesting to a maximum of three levels, which I think is the threshold level of nesting to prevent people from being lost in a labyrinth of pages, and to make it more difficult for them to say bye-bye in disgust. But, I digress.

The basic idea of banging out a lot of text on a page, is, logically, for it to be read and understood. And for it to be read, it needs to be readable. All that whitespace goes into making these pages more readable. Not to mention pretty. (Now, then, that would be a judgement call. But seriously, print typographers love to put a lot of whitespace on their pages, but usually do not, for reasons of cost. But what's stopping me on the Web, where the marginal cost is a nice fat zero?)


Why is text limited to a narrow strip of, what, 70 characters?

Same thing. As I've hinted, usability is not just capable of being used; it is more of easy and effortless and comfortable to use. Out here, usability and accessibility basically mean readability. And readability means one barrier less.


Why is the whole darned page just 640px wide? My monitor supports 1280 x 1024.

Great! But your eye probably does not. I've designed this site keeping in mind the bare minimum web browser infrastructure--640x480 resolution, 28.8kbps modems, 256-colour displays, and a text-only browser. See previous section, and the one before that.


Why are paragraphs not justified?

Because paragraph justification cannot be justified in web design. Hmm, I'd better elaborate on that.

Simple rule, really:
No uneven left margins
for languages that read
left-to-right.

To better appreciate text-alignment choices, we need to look at the four different choices available, which are:

  1. Right-aligned text.
  2. Centered text.
  3. Justified text.
  4. Left-aligned text.

The case against right-alignment: Right aligned text for articles and other text-centric content does not make sense, simply because these pages are written in English, and we read English from left-to-right. This by itself doesn't mean anything; but, when we read, our eyes fix the left-hand margin of the paragraph as an anchor to which to return to after every line is read, or, more technically, scanned. Right-aligned text hence produces an uneven, jagged left margin, making reading difficult as there is no fixed margin of reference to the paragraph.

The case against centered-alignment: This is a no-brainer, for the same reasons. Centered text makes both the left and the right margins uneven. Both right- and center- aligned text require more work for the eye. And that means more work for you and me. So, no centered alignment for text. Period.

The case against justified text: Justified text creates nice, pretty rectangles of characters, with both right and left margins evenly aligned. This is almost always achieved by adjusting the space between words in a paragraph, and, when this calibration fails, introducing hyphens to break lines. This is great for sophisticated visual displays, but, in general, A Bad Thing. Here's why:

Exhibit A. Low resolution displays and text-only terminals. Lower resolution displays simply lack the granularity of control required to effectively justify text. For example, on text-only terminals, the lowest possible control you can have in terms of spacing is one character, and most justified paragraphs will require finer levels of control.

Exhibit B. Uneven negative space in visual displays. First of all, this negative space thing. Negative space (or white space) is the (somewhat Zen-like) term used to denote open space between various design elements in the layout, including those between letters, words, and paragraphs of text; and space between graphics. The actual content (like text) is called positive space. Negative space, unlike the misleading name, is in fact very positive in typography. It is essential for providing spatial relief between visuals, and (is supposed to) guide the eye from over there yonder to right here, to back over there. For an eternally inexperienced web designer like me, white space is an abstruse concept, and is something very hard to grasp--precisely because of the property that white space is not just missing text, but a concerted effort to leave out a visual to enhance the design. In short, it's not about putting things in, it is about leaving things out. Yup, definitely Zen.

It's not about
putting things in,
it's about leaving
things out.

By a careful and entirely preconceived observation of both Exhibits A and B, this court has come to the verdict that since text-justification generally boomerangs on low-res displays, and is only marginally better on high-res displays; text-justification should not be used on this site other than for expository purposes (like above). This, the court has reason to believe, is in conformance with the general theme of usability and device independence, which both the defendant and the prosecutor uphold and strive for. Final verdict: Use left-aligned text.

This is also the very reason most publishing houses (as of now) require that all manuscripts sent in must be in monospace font, 1.5 lines spacing and left-aligned (specifically, with the left edges even and the right edges jagged). There are other manuscript guidelines too; like three, and only three, spaces paragraph leads. Not two, not four--three.

As of now,
left-alignment
is the better and
wiser option.

Of course, all these could be the results of that universal force of habit, as most editors are only still making the transition from the typrewriter days (bwah ha ha! did you say justified text? On a typewriter? bwah ha ha)--to the personal computer age. The logic still holds, though. This might change in the future as more displays (and with them, people) become used to this new breed of page layout, but as of now, left-alignment is the better and wiser option.


What about fonts?

It is well known in print typographer circles that serif typefaces are better for print (for example, a perennial favourite is Times Roman); but this wisdom is not readily convertible to the screen arena. On screen, sans-serif typefaces are generally considered better, with the very notable exception of Georgia, which is a serif font, but offers excellent legibility on screen, thanks to the exaggerated x-height (height of a lowercase x). Other screen-optimized fonts are Verdana, Trebuchet MS, and Times New Roman, the screen cousin of Times Roman.

Hardcore typographers will tell you that every font has its own hidden language, symbolism and aura, and specific fonts are to be used for specifc kinds of content. That being a wee bit more subjective than I'm accustomed to handling, I chose a font that is informal, easy to read on screen, and to my eyes, looked neat and harmonious with the other elements in the page. (Please don't pick a fight with me on this--I have no convincing demonstration to defend that.)

My choice for screen readability is Georgia, with a 1.15-1.25 line spacing for paragraphs. I've always liked serif fonts better anyway.

As is conventional (and logical), all headline elements have been rendered using sans-serif fonts, which I think provides for a good, clean and elegant blend to the main content rendered in Georgia.


What if I disable CSS?

Go ahead. These pages are accessible (and readable) without CSS. The relief blocks might unexpectedly chip in with information, though.


I like pink text on green background. Can I customize this site according to my custom style?

You can. You'll need a browser that supports custom stylesheets to do that, though. And by the way, I'm kinda taking a longish shot here, but; did you say pink on green?


I think your design is good, can I copy it?

Go right ahead. The default stylesheet is at www.rnspeak.org/DefaultStyleSheet.css. The printer friendly stylesheet is at www.rnspeak.org/PrnStyleSheet.css. Feel free to use layout/CSS ideas (if you find any, that is) in them to suit your own needs. You've been given carte blanche!


I think your design sucks. How do I tell you that?

Of course, you'll just pour it all out at the feedback page, and it'll reach me.


I think you've overlooked an important accessibility issue. How do I let you know that?

The feedback page, again.


What's this big fuss about accessibility? Aren't all pages automatically accessible?

All web pages are
accessible, but some
are more accessible
than the others.

Simply put, no. Sure, at the technological level, any web page is accessible using the right software and protocol. But, obviously, that's not what I mean when I mention accessibility.

A glance through the list of accessibility enhancements on usability-centric sites will quickly convince you that all pages are accessible, but some are more accessible than the others.

Accessibility touches upon latent issues like putting users with disabilities into focus, visual layout and flow of content, standards-conformance and other flotsams and jetsams, that, in general, only designed pages are aware of. If you just fire up your HTML editor and create a web page, it is most likely to be less accessible than a well-designed and well-thought out one.

Read more about it in the accessibility statement, which contains resources and links related to accessibility.


Why don't you have comment functionality on your web log? Every other blog has it.

(Later.)


Which CMS are you using to maintain your weblog?

My own.

I used to use my own, but I've now upgraded to the slick and sophisticated (enough) Wordpress. And it looks like I'll be a permanent camper at the WordPress tribe. It's easy to set up, easy to hack, easy to configure and has all the functionality I'll ever need. Life is indeed good.


What's with the blocks of blown-up text floating around?

Relief blocks.

These floating blocks of
text provide visual relief,
by breaking content and
introducing negative space.

It is perhaps a documented fact that pages that are teeming with characters, without any breaks in layout, are more difficult and boring to read than pages that have lots of negative space in them. They are there to provide visual relief.

This is something I picked up from Reader's Digest. In stories where there are no visual elements, the typesetters/editors usually pick out a dramatic sentence from the copy, blow it up to 150% size, and use it to provide negative space on the page. It is functionally equivalent to a visual element.

Relief blocks contain
pivotal information that
can be highlighted while
scanning a page.

These blocks serve many purposes. First of all, they provide good negative space, which enhances readability instantly. Second of all, they act as placeholders for hightlighting crucial bits of information in the page; like an interleaved bullet list throughout the document. Third of all, they reduce boredom--anyone who's been through the system of knowledge dissemination called education will attest to the unmistakable feeling of apathetic distaste that envelops you when you're presented with 100 pages of pure, dense text. It doesn't matter one whit if those pages contain some of the funniest lines that literature has ever produced--they look boring, and that's more than enough to drive people out.

Hence, relief blocks.


I have a related question not discussed here.

Fire away. You know where to head.