Henry Hyde: Designer, Writer, Podcaster

Fonts for Indie Authors and Designers Part 2: typographic colour

Fonts for Indie Authors and Designers Part 2: typographic colour

Fonts for Indie Authors and Designers Part 2: typographic colour

Let’s continue our exploration of the fascinating world of fonts by exploring the subject of ‘typographic colour’ (or “color” for my American friends!).

That sounds very grand and just a bit complicated. What do we mean by ‘colour’ here? Well, it has nothing to do with making your text red, green, blue or your favourite shade of brown! No, here it means something much more subtle—the relative density of text on a page, and therefore the degree to which it covers the paper underneath with (usually) black ink or, in the case of a computer screen, pixels.

Typographic colour header

Why is typographic colour important?

The more dense the text on a page, the darker the typographic colour. And, generally speaking, the darker the typographic colour, the more off-putting it becomes for the general reader.

Note that different readers have different levels of tolerance for the appearance of a page of text. Again, speaking in very general terms, the younger the readership, and the less academic, the lower the tolerance for dense (in our terms ‘dark’) text.

However, this varies according to context, and even the same person will have variations in tolerance according to the subject at hand. For example, I may be perfectly happy to tackle a newspaper column, or a history book, with text that is really rather dense; on the other hand, I prefer a lighter effect when reading a novel at leisure, and lighter still when reading poetry—unless the poet wishes to create a deliberate effect by packing his words close together.

Note also that the effect of typographic colour is a two-way street: my mood may dictate the density of text that I am prepared to tackle and, conversely, a page of text may affect my mood. In the worst cases, it may even bring on a headache!

A good designer or typesetter will be seeking to make the perfect match of typeface to subject matter and it really helps, when providing a brief, to inform the designer of the overall mood you want to create. This is obvious when briefing the designer who will be tackling your book’s cover, but is often overlooked when briefing the person formatting the interior pages. In some cases, it may be the same person, but often the roles are separate.

We shall be looking at other factors that can affect our reaction to a page of text in future posts, but for now I simply want to make you aware that the decisions you make when setting a simple page of text can have a huge effect on how your book is received by your potential readers—even before you make more complicated decisions such as the choice of additional fonts for headers, drop caps, subheadings and so on.

Beyond legibility

We’re assuming, of course, that you have enough common sense to choose a font for your body text that is at least legible! So, unless you’re out to create a particularly irritating or comic effect, you will choose from the many hundreds of lovingly created typefaces available, though most of the designers I know tend to go back time and time again to a handful of classic faces that work every time.

I mean, you want the reader to be able to, well, read what you’ve written, right?

Gothic script used to be commonplace during the Middle Ages and for even longer in German-speaking countries — but it’s hardly a good choice for your novel in 2017, is it?

Nowadays, there is plenty of advice available about the choice of fonts, and in the case of e-books such as those on the Kindle platform, the selection is, to some extent, taken out of your hands.

Why?

Because the reader makes the decision, choosing from a small number of pre-installed fonts on the device. So, there’s no point choosing an exotic font that nobody has heard of, if the technology automatically changes it. (We’ll return to this tricky subject.)

I’ve been involved in web design long enough to remember the early discussions about the best fonts to use in different circumstances—in fact, I had a letter published in an early issue of the now defunct Internet magazine on this very subject. Back then, in the mid-1990s, screen technology was much more crude, so legibility was the real battle, and it was generally recognised that serif fonts (such as Times, Baskerville etc) worked best for print, whilst text on screen was more pleasant to read in sans-serif fonts such as Helvetica, Arial or Verdana.

For the moment, however, we’re going to focus on the simple task of laying out pages of plain text in a typical 6″ x 9″ book, using a serif face.

In the images you’ll see 100 words of gobbledygook text—it’s actually known as Lorem Ipsum—a form of placeholder text used by designers and typographers to try various options without being distracted by actual, real content. It comes in many forms, even Klingon!

Ringing the typographic colour changes

First of all, I chose one of my favourite typefaces: Garamond. In this instance, it’s actually a recent version called Garamond Pro, produced by the well-known software giant Adobe (producers of Photoshop, InDesign, Illustrator and so on).

The first couple of images simply show the effect of this typeface, in its standard ‘regular’ font variant, used at different sizes, ranging from a mere 6pt—the kind of size used for T&Cs on legal documents or very small footnotes—up to 16pt, which would be suitable for books printed for readers with impaired vision, or for text in a magazine or brochure ‘box-out’ or lead paragraph.

You can click on all the images to get a full-size version at 200dpi, or download all six pages as a PDF file here.

Typographic colour: Font sizes 6-12 point

Typographic colour: Font sizes 14 and 16 point

The next page shows the effect of using the same font, but altering the leading. It starts with 10 point text on 10 point leading—known as ‘solid’ when the text size and leading are the same—and then shows the effect of increasing this to the standard 120%. The reduction of density, and therefore typographic colour, is immediately apparent. Increasing this further to 14pt leading has a very pleasing and rather elegant effect, creating lots of ‘white space’ around the lines of text.

The final example on the page sees an increase to a massive 20 point leading, double the point size of the text. You can see that not only has the typographic colour become very pale, but the effect may not, in fact, be desirable unless you had a specific intention, as the lines of text are becoming quite remote from one another and the eye has to make a rather conscious jump from line to line. It is, however, useful spacing if the intention is to edit a manuscript, making handwritten notes between the lines!

Typographic colour: Increasing the leading

The next two sheets demonstrate the effect of choosing a different typeface on typographic colour. These are all serif faces, and you may well recognise some of them. Baskerville, Bembo, Bookman Old Style, Adobe Caslon Pro, Goudy Old Style, Sabon, Times and one of my favourites, Warnock Pro from Adobe. The differences in detail are subtle, but the overall effect of choosing a different typeface is immediately apparent. Remember, the text is identical in every case, and always in 10pt on 12pt leading, but the same 100 words occupy different amounts of space and their legibility and overall typographic colour change to a remarkable degree.

Which is best? Well, that’s up to you, according to the type of book you are producing.

Typographic colour: Typeface variation 1

Typographic colour: Typeface variation 2

Our final sheet today looks at the effect of some very subtle tweaks indeed. I’ve chosen to use the Adobe Garamond Pro again, this time at 11pt on 13.2pt leading. I often find that 11pt is a nice compromise between 10pt, which can often seem a tad small, and 12pt, which can be just a little too large—but this is a personal preference, and a designer is always under the constraints of space and cost, subjects for another time.

And, as if you needed reminding, on electronic devices like the Kindle, the reader can change the size of the font themselves…

In the top example, the text is ‘justified’, which is perfectly standard for books. “Justified” simply means that the text runs from one margin to the other, so that the edges are parallel. in this example, I have turned hyphenation off.

The second example has hyphenation turned on. Now, it’s obvious that a number of words have been chopped in half by those little hyphens (-). Personally, I hate them! However, the use of hyphens normally means that the spacing between individual words remains consistent, whereas the danger of not having them is that unsightly ‘rivers’ of white can appear. The narrower the column of text, the worse the problem. In fact, just by chance, our 100 word chunk of Lorem Ipsum doesn’t seem to be suffering overmuch, though a careful examination of the opening three or four lines gives some indication of the potential problem.

The third variation here is very subtle indeed, one for keen-eyed designers. Again, the text is not hyphenated, but I have changed the kerning of the text from “metrics” to “optical”.

We’ll return to the subject of kerning in a future post, but for the uninitiated, it means the way the letters of the alphabet ‘sit’ next to one another. Optical kerning produces a more pleasing effect to the eye when the lettering is examined closely, and is more apparent the larger the size of the text. In headlines and book titles, it is crucial.

As a quick rule of thumb, two curved letters (such as OO, for example), can happily sit together closer than a curve and a straight upright (OI), and two straight upright forms must be furthest apart of all (IL, for example). Angled strokes often mean that one letter can almost be ‘tucked under’ its neighbour (OW).

Finally, and for comparison, I have arranged the text ranged left only, with a ragged right edge. This is sometimes expressed as ‘flush left’, and of course you might occasionally see text ‘flush right’—picture captions, for example. One of the great advantages of text ranged left is that no hyphens are necessary and the word spacing is beautifully even.

Typographic colour: Subtle variations

That’s quite enough for this time. I hope that you’ve found this explanation of typographic colour useful—it really is an important aspect of book (and any publication) design. Next we’ll look more closely at some of the subtle effects such as kerning and tracking, and the construction and component parts of the letterforms themselves, looking at the delights of the mysterious “x-height”.

One thought on “Fonts for Indie Authors and Designers Part 2: typographic colour

  1. Roz Morris @Roz_Morris

    Really enjoying these, Henry. I’ve been doing bits of book and magazine for years, but didn’t ever have the typography 101 class. I just learned from designers who’d shriek ‘alignment’ and ‘stylesheet’. So it’s great to see the intricacy of how these typesetting decisions are made.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.