Blank Lines There are way too many blank lines on the Web. The big problem with blank lines is that when you use them for everything, their meaning goes away. Judicious and consistent use of vertical space will set up a hierarchy of white space that actually serves to communicate with the reader. Indent paragraphs that should stick together to form a complete train of thought. In this context, you can then space down to form a break between sections. I use indented paragraphs in my e-mail. That way, when the reader gets to a blank line, she knows she's at a new section, and this helps her see at a glance how many topics I'll be covering. Don't be afraid! Don't settle for the "HTML look"! If more people demand better typographic control, we will have some influence on a future (VI?) version of HTML!

Banish the Horizontal rules! Just because everyone else on the Web has horizontal rules all over the place, doesn't mean you have to. Always take a horizontal rule out and replace it with the proper amount of vertical space, then look at your page both ways before deciding you really want to leave the rule in. Every week, I work with the next high-five site, asking them to take out the horizontal rules and look again. They always leave them out. Many High-Five sites start with horizontal rules. Very few survive serious scrutiny. Why does the Web look like a contest to design the "coolest" horizontal rules? Here is a rule that will help. Don't rebel against rules; think about them and decide whether you should use or break them. Don't use horizontal rules as separators. Use a horizontal rule only to denote a change of context. You'll see them on my site only to change voice. If I'm speaking to you, I won't let a horizontal rule break that voice. If I change into "navigation mode," where I want you to make a decision about going somewhere, I might use a separator of some sort, but you'll find I only do it in certain situations. If I change to show things other people have said, as in my Severe Tire Damage essay, I might use a little something to change the context, but notice that the horizontal separators I use are porous, so as not to arrest, but just to pause.

Inter-line spacing Space between lines is called leading, because typographers used to set metal type by hand. They'd put a bar of lead between the lines. Leading is measured in points, same as type. If you have 12 point type on 12 points of lead, that means there are 12 points from baseline to baseline down the page. In that case, there is no real leading. 12 point type on 10 points of lead is called "negative leading." If you have 12 on 24 (what some people might call "double spacing"), there are 24 points between baselines. There is no control over leading in HTML. Why? I imagine the answer is "because there is no need." Any lines you see with more than the usual amount of space are done the hard way: by breaking each line and inserting space. This is painstaking, doesn't work with all fonts or browsers, and should be used with care. I have another way to do it, a better workaround, which you'll learn in my book. HTML 3.0 has plenty of chance to do leading in their concept of "style sheets." I have no idea when Netscape will make this a feature.

Vertical Space Between Sections There really isn't much call for the <P> construct. I hardly ever use it. I use the single-pixel gif. Between sections, I'll put an appropriate amount of space. Look at my pages and you'll see what I mean by appropriate. I'll put more space before a larger heading than before a sub-head. The main thing is to set up a hierarchy and make sure it's consistent. Each "level" in the hierarchy should be visually distinct from its neighbors. Adjust and test. I use 10 pixels of white space before a heading here, which is a bit more than a "blank line," because I tried 8, 9, 10, 11, and 12 pixels, and 10 was the most pleasing to me. If you want to space vertically like this, please take a minute to read the source of this document. Notice how vertical spacing commands (using dot_clear) begin and end with <BR>, so that I can keep the writing to itself. I try hard to make my HTML readable, so I can write and keep my train of thought without having to worry too much about the HTML instructions. One of the great things about hypertext is that major sections can be broken up into separate pages, so you don't see much on my pages beyond what I consider readable in one sitting. Careful vertical spacing is especially useful in the design of forms, which are too often just scattered white boxes with no grouping or hierarchy to help the user through the process.

Sub-Heads Sub heads (like the one above) should be closely associated with their paragraphs below. They should not be floatingvertically centered between paragraphs. That's what The New York Times does, and it looks awful. If I can, I leave a little vertical space between a subhead and its paragraph, just a bit more space than is between the lines of the paragraph itself. In fact, there is a single pixel of white space between each sub-head and its first paragraph on this page. Whatever you do, don't leave a "blank line" between a subhead and its associated paragraph. This is another great reason to use indents on the paragraphs that follow: everything will "belong" to the subhead, and a blank line will denote a new section.

Read The Form of the Book, by Jan Tschichold; Hartley and Marks Publishers, 1991. Pronounced "Yan Chick-old," Jan was one of the most influential typographic designers of this century. His story is fascinating, and this book is the most dog-eared book on my shelf. It is easily one of the most important books on typography and typographic principles ever written. It is printed on wonderfully soft, creamy paper, designed impeccably, and contains a treasure of typographic tips. Available at designer and architectural bookstores, like Stout Bookstore in San Francisco. If you go to my Type Bibliography, you'll see a link to a web page on Jan Tschichold elsewhere on the Web.

Last modified: 3/14/96 Go back to Web Wonk.