Topography on the web has been too often in the hands of geeks and not often enough in the hands of typographers. Having written a book Topography on the Web published by AP Professional in 1998 , I feel compelled to write a chapter on topography that will lead you to use proper typefaces and typesetting. After all, most books published in print have enjoyed proper typesetting for centuries, and your webbook should be no different. When it comes to publishing a high-quality book, professional typography is your best friend. Here are some guidelines:
- Get a good book on digital topography and use that as your reference and guide.
- Use only serif typefaces for reading. Sans serif typefaces were widely used in the early days of the web because they looked better on low resolution screens. Today we have high resolution screens and no longer need to settle for sans serif typefaces. Text blocks with serif type are easier to read for Americans.
- Use a typeface that is a little heavier than average. It’s more readable on the web than a thin type. Don’t use bold type, however, because it’s too heavy and harder to read.
- Consider using sans serif typefaces for titles, subtitles, headings, subheadings, and headlines. Sans serif type is readable in larger type and short phrases. Sans serif type for headings makes a nice contrast to the serif type that you use in text blocks.
- Use a type size that’s readable on both phones, tablets, laptops, and desktops. It will be a different size for different typefaces. Typically, it’s in the range of 12 to 22 points (pixels).
- Your text columns should be a minimum of 9 words wide on the average. You count every word on a line including articles, analyze several lines, and take an average. For the most efficient reading, your column should be no wider than 12 words (38–45 characters). For justified text, you can go a little wider to 10–14 words (40–50 characters). This is a general rule for normal size text. Thus, the rule is appropriate to present a narrow column for reading on smartphones that fits the guidelines.
- For the tablet, laptop, and desktop versions of your book, you may want to use a wider book-like column. That’s OK, if not optimal, because people are used to reading books with wide columns; and a wider column gives you maximum flexibility to incorporate graphics and embed programming in the webpage. But don’t make your text column too wide. It will be difficult to read.
- Justify your text column. It looks neater and more professional and is how most magazines and books are typeset. Some experts argue that unjustified text is more readable. But it’s really a tossup, and justified text is more in keeping with customary usage.
- Use hyphenation. Justified text, in particular, when hyphenated will avoid some of the unseemly looks of justification. You can use snippets of CSS code in the webpage <head> to enable hyphenation in the operation of browsers. You don’t have to do more than that.
- You must have contrast between the type and the background to enable readability. For dark backgrounds, you must use light type. For light backgrounds, you must use dark type. You will do best with white type on very dark backgrounds or black type on very light backgrounds. The background must be a uniform color. Backgrounds with patterns, images, multiple colors, and the like do not support easy reading. Personally, I favor black type on light pastel backgrounds. A pure white background is hard on the eyes.
- Use italics for emphasis. Use bold only for heavy-duty warnings, particularly where safety is involved or potential destruction (e.g., equipment) is a possibility. Use emphasis sparingly. Use bold almost never. It’s perfectly appropriate, however, to use bold in titles, subtitles, headings, subheadings, and headlines.
- The use of all-caps phrases or sentences is seldom appropriate in headings or text. All-caps are difficult to read. Nonetheless, all-caps are acceptable for acronyms and designations. Never use all-caps for emphasis.
- Make sure the leading is adequate. The leading is the space between lines of text. If the leading is too little, the text will be difficult to read. If the leading is too great, it will be OK to read, but the text will start to look like a double-spaced academic paper rather than a book.
- How you treat paragraphs in print is well-defined. You have several choices. Perhaps the best way to handle paragraphs is to start them flush against the left side and with a half-line of space (an additional half-line of leading) between paragraphs. A full line of leading is too much, and no leading all will confuse users as to where the paragraphs terminate.
- For novels, tradition calls for an indent for the first sentence of each paragraph and no half-line between paragraphs.
- Typefaces are called fonts in web jargon. Fonts have a different meaning in topography terminology. For the purposes of this chapter, however, you can use the two terms typeface and font interchangeably.
- Use traditional typefaces (e.g., Garamond) for your text blocks. They have been proven over centuries to be readable and attractive. There are many modern versions of traditional typefaces (e.g., Times) that are also perfectly acceptable for readability. Avoid unusual typefaces that may be aesthetically attractive but are not readable.
- Weird, bizarre, and designer typefaces, although not appropriate for text blocks, are perfectly appropriate for aesthetic use, promotional use (e.g., advertising), spiffy page designs, and even headings. Always keep in mind, however, if you want somebody to read the words you publish, the typeface however strange must still be readable. If someone has to take the time to decipher the text (even a split-second or two), it’s not readable.
It is my purpose in writing this chapter for you to become aware that readability is all. A book that’s not easily readable is of little use to anyone. Some people think, as I do, that topography is a fine art. It certainly has aesthetic appeal and impact. But before all, it is also a craft. It is the craft of providing users (readers) with easy-to-read text. The text should be so readable that the type becomes invisible, in effect. If readers notice the type, it’s probably not readable. You can write the best book written since Shakespeare’s plays, but if you don’t typeset it properly, it will satisfy few readers.
The web is overflowing with designer templates for webpages. Some of them are so aesthetically pleasing that they will knock your eyes out. Nonetheless, too many of them have been created by designers (or programmers) who have no feeling for topography and are blithely unaware of what people need to read easily.
That leaves you with two choices when you search for a webpage template to use. First, you can find a template that has good topography. Or, second, you can find a template that has good design with poor topography; and you can change the topography. I have reviewed dozens and dozens of designs (themes) for WordPress webpages and for other authoring systems. Few of them have acceptable readability. Good typography is generally missing on the web, sad to say.
Indeed, I’ve found that more than a few webpage templates disregard easy reading completely; and to read such poor topography, you have to copy and paste the text into a word processor to read it there instead of on the webpage. Needless to say, you don’t want your typography to be so careless.
WordPress
For WordPress, you’re stuck with the font chosen by the template designer. Most WordPress templates have mediocre typesetting. Thus, it’s up to you to either choose a template from the few that have good typesetting or to change a template that has poor typesetting. To change the typesetting, you’ll have to change the CSS (cascading style sheets) file for the template, which although not impossible, requires a lot of busy work (and a comfortable knowledge of the typesetting functions of CSS).
One way to get around changing CSS is to obtain a WordPress typography plugin. Such a plugin (mini-program) enables you to change the fonts used by a WordPress theme without manually changing the CSS. Very handy.
How Do Fonts Work?
You can link to a font file just as you would a JavaScript file, a CSS file, or a media file. The font file can be in the Google font repository or it can be anyplace on the internet. WordPress typography plugins that enable you to change fonts typically use Google fonts and take care of the linking for you.
CSS
You control your webpage typography with CSS. Fortunately, CSS like HTML is not programming. It’s an easy-to-learn markup language (for basic typesetting) that ties into HTML. Think of it as a clever add-on to HTML to make HTML a more effective typography system. It is beyond the scope of this book to teach you CSS markups, but it’s part of the web typography system, and you will not find it difficult to engineer basic typesetting. Keep in mind that although good typography may not be critical for webpages in general, it is absolutely essential for a webbook.
A CSS file is just like a JavaScript. It can be a separate file from the webpage file; it can be in the head of a webpage; or it can be in the body of the webpage itself. A separate CSS file has the least priority, followed by CSS in the head of the webpage, followed by CSS in the body of the webpage having the highest priority. This means that CSS code in the body of the webpage takes priority (if there’s a conflict) over either CSS in the head of the webpage or CSS in a separate file. This priority makes the use of CSS not only flexible but powerful.
CSS goes in a plain text file with the .css as the suffix (extension). A CSS file is typically referenced in the head of the webpage. CSS can also be included in the head of the webpage with the style markup instead of being in a separate file. In the body the webpage, you can use CSS with the style markup. Or you can use it in other markups with the style attribute.
Since CSS is important to the idea of a webbook, it is worth your attention. Even if you don’t become an expert in CSS, you will want to have a basic understanding. Such basic knowledge will help you use such programs as WordPress.
Devices
Regardless of what you do with your fonts, some devices have a mind of their own. For instance, let’s say that you’ve designated Merriweather (from Google fonts) to be the font for your publication. This Google font is readily available to every device via the web. But some devices will not display the Merriweather font. They will display a default serif font instead.
Likewise, if you were to designate a sans serif font, a device may not display the particular sans serif font you designated, but instead will display its own standard sans serif font. Thus, no matter how hard you work to make your topography the best it can be, some devices will not display it as you have intended. Someday this may change, but today it’s a fact of life. Not much you can do about it.
Simplicity
If you want to always be able to freely repurpose something with the least amount of work, simple typesetting becomes your best policy. In other words, keep your typesetting as simple as possible in HTML, and when you repurpose to another format (e.g., EPUB), you will not have to redo the typesetting.
Oddly enough, simple typesetting is best for readers. Nothing is simpler than the typesetting for a novel which is the highest form of entertainment in the text publishing world. You will find the most complex typesetting in textbooks. Textbooks? That should be your first clue. Complex typesetting is not what you want to present to your readers unless absolutely necessary. A compromise between simplistic typesetting and textbook-like complex typesetting seems satisfactory for webbooks in general.
Google Fonts
Google provides over 500 fonts via the web that you can use free. And you can link to the Google font files just as you can link to JavaScript and CSS files. (Note that such links will not work unless a user is connected to the internet.) You do need to pay attention to the license agreement for each font. The fonts won’t be in the Google font repository unless they are open software. Nonetheless, the license agreements vary (read Chapter 21). Not all the fonts are top quality, so choose carefully. And keep in mind that there are other places on the web where you can find open software fonts (free fonts) too.
Summary
Good typography means easy readability. After all, a webbook is a book. Printed books almost always have expert typography and are easy to read. Make sure your digital books are the same. A webbook gives you the greatest flexibility for making your typography work.
