Composition

The preceding chapters on HTML and CSS cover the essential principles and technicalities that you must understand if you are to prepare an electronic book for publication. However, understanding how, say, to put a border around a content element, is not to understand when you should do so – or indeed, when not. That is, just because you can do a given thing does not mean you should.

With this in mind, consider therefore the word ‘composition’ – literally ‘to put together’ – which, in writing prose, be it fiction or non-fiction, concerns the narrative elements and their arrangement. In photography, it concerns the nature and arrangement within the frame of the components that comprise the image; and in CSS-based styling and layout, composition refers to the fonts, colours, adornment and positioning of the various elements that make up the page.

The essence of the compositional process centres therefore on the decisions that you make. Indeed, this chapter could go easily by the title ‘Choices’ rather than ‘Composition’, as it goes beyond syntax, fonts and box-models to explore the space of design decisions within which we move when turning a raw slab of content into a beautiful book. Given, however, that HTML and CSS allow you to do a given thing in a number of different ways, it is possible to make poor decisions when creating the code that underlies a book's presentation, just as it is when, say, laying out your cover art.

Duly, this chapter considers those latter areas first, before moving to explore the aesthetic concerns that a study of composition also embraces. As with the preceding three chapters, it is unlikely that you will need to read every section below, indeed, if your HTML and CSS is very simple, as is the case for the majority, you need read only those sections here that are appropriate to your project.

IDs & Class-Names

If you find that yourself using CSS quite extensively in your book, you will need to pay attention to the way in which you manage your CSS-related code. Indeed, as chapter Four, Style, points​out, thinking of class names is part craft, part art, and the same applies to id-attribute values.

Certainly, you should avoid using class names and IDs that are reserved words. That is, do not use words that are part of HTML and CSS. Consider the following hypothetical selectors:

div.background { ... }
p  .border     { ... }
#clear         { ... }
#top           { ... }

These may seem reasonable, you really could have a <div> that has a class-attribute value of ‘background’, or, say, an element with an id-attribute value of ‘top’. The problem is that these are also CSS property names, and while this practice causes no problems for user agents, it is a good idea to maintain clean conceptual-separation, especially when you are new to CSS, otherwise you may create confusion for yourself.

In a similar vein, the following class name would be unfavourable:

<div class = 'div'>

Were you trying to target all divs by means of that class-name, the class-name itself would be redundant, as the following are semantically identical:

div.div { ... }
div     { ... }

The essential problem, however, is again the danger of creating confusion for yourself. For example, you might end up doing something like this in your HTML:

<span class = 'div'> ... </span>

…Which is ridiculous; divs are divs, spans are spans, and there is no need to complicate matters for yourself.

Another mistake that is common with novices are CSS definitions like the following:

div.Blue
   {
   background-color : #00FF00;
   }

This definition targets all divs that have a class-attribute value of ‘blue’, but if you are up to speed with CSS colour values (on which there is a great deal more below), you will have noticed that it gives such divs a background colour of green.

Equal silliness arises if you create a class name called, say, ‘div_38em’, and then give all such divs a width of 30ems, or if you assign the class name ‘Right_Floater’ to a set of elements, and then make them float left. It follows that you should create class names that reflect the role of the elements concerned within the styling and layout scheme on which you settle, not the effect that they are supposed to generate.

If, in the light of this, your book contains textual elements that are, say, case studies within some field, which you wish to surround with a border, then creating a class name of ‘CaseStudy’ is far more favourable than creating a class name of ‘Bordered’. To emphasise this point, consider the nomenclature you would be forced to adopt if all case-study elements were also floated to the right, and had rounded corners. You might end up with code like the following:

<div class = 'Bordered_RightFloated_RoundedCorners'>

At the least, such names are dreadfully unwieldy and tend to bloat one's code. Indeed, when such names arise in the field of programming, it is a very strong indication of deep flaws in the design (in the ‘engineering’ rather than ‘graphical’ sense). To reiterate, e-book production is not​programming, but the two are closely related as they draw from the common well of abstract symbolism, and so you would be wise to take the parallel given here to heart.

To press this point home with a real example, the class names that govern the sidebars in this guide are simply Sidebar_Wide, Sidebar_Medium and Sidebar_Narrow. They say nothing about how the sidebars are actually implemented, thus remaining independent of changes to the relevant definitions, and the section below that covers element subsumption reprises this point.

Table-Based Layout

If you have a particularly complex layout in mind, you may find yourself tempted to use tables to effect the positioning of elements in your content. This is understandable, as the grid nature of tables appears to offer a clear path to one's goal, and the notion of floating elements to the left or right seems at first face to be rather alien and counter-intuitive. In fact, this is not a favourable idea, and this section explores the reasons why.

Using tables for layout has its origins in the 1990s when CSS was very new, and support for it in web browsers was patchy and unreliable. Some people still use this approach when developing web sites, due to mis-perceived complexity and limitations in CSS, but the web development community discounts the practice for a number of sound reasons, some of which apply to e-books and web sites equally, and these are as follows:

Aside from these points, table-based layout presents other problems that affect only web site developers. However, if you pursue the idea presented​in Chapter Eight, Infrastructure, and publish some of your e-book content on your own web site for promotional purposes, those other disadvantages will also impinge on matters, and they are as follows:

Note that, in addition to these points, and as pointed out​previously, tables of links do not work on Kindle devices. That is, clicking/touching on a link held in a table cell does not take you to another location, a fact that Amazon documents explicitly, so using tables for layout in this respect is just not possible.

Notably, the realisation that tables are ill-suited to layout, caused many web developers to take a polar view, seeing tables as a compositional device to be avoided at all costs. This, in turn, led them to render tabular content using CSS in conjunction with divs and spans, but this approach simply creates problems of its own.

The fact is that there is nothing wrong in using tables to present information that is of an inherently tabular nature, such as the net revenue tables​presented in Chapter One, Strategy. That is the purpose of the table-related elements in HTML – to reduce tabulation concerns to the trivial. It is the use of tables to implement complex layouts that you should avoid, as it is simply not necessary, especially in e-books. That of course, is with the exception of those times when you need to work around the float​bug that a number of Kindle-flavours exhibit.

If you need to follow up on the points given in this section, suggested search terms are:

wikipedia tableless web design

Element Subsumption

Assuming that you take the advice given in the preceding chapter, and assuming that you do need to implement relatively complex layout in your book, it is highly likely that you will use the float mechanism that CSS supports, and which Chapter Five, Layout,​considers in great detail.

Consider therefore a scenario where you have three elements that should form, collectively, a sidebar. The three elements are a graphic, a piece of text, and another graphic, and your goal is to array these down the right-hand side of the page, where one is stacked on top of the other.

Recalling from Chapter Five that floated elements have​block-flow, you remember to apply a width rule to the textual element (to prevent it expanding to fill its parent element laterally). You do the same to the graphic elements in order to give them display-resolution independence, and perhaps to make them the same size, and apply a float rule to all three elements.

The next example gives the code for this, and the effect it generates, but do note that the demonstration in the third panel of the example shows how the CSS and HTML code presented should work. Given the ‘float bug’ mentioned in Chapter Five, simply replicating the code above in any file that you test on a Kindle of your own might yield the effect shown in that chapter.

*.Sidebar
   {
   width : 7em;
   float : right;
   }

*.Sidebar * { width : 100%; }

<img class = 'Sidebar'
     src   = 'Images/Lorem_Ipsum.svg'/>

<p   class = 'Sidebar'>
Excepteur sint occaecat.
</p>

<img class = 'Sidebar'
     src   = 'Images/Lorem_Ipsum.svg'/>

<p>
Lorem ipsum dolor
...
dolore magna aliqua.
</p>

Excepteur sint occaecat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Clearly, this does not fulfill the ideal, and the reason is that using the float property in this way simply causes the elements to crowd up against each other. Happily, however, the solution is simple, you need only subsume the elements that should form the sidebar within a <div> and float that to the right.

The next example modifies the previous in this way, thus yielding the effect we seek:

div.Sidebar
   {
   width       : 7.5em;
   margin-left : 0.3em;
   float       : right;
   }     

<div class = 'Sidebar'>
   <img src = 'Images/Lorem_Ipsum.svg'/>
   <p>
   Excepteur sint occaecat.
   </p>
   <img src = 'Images/Lorem_Ipsum.svg'/>
</div>

<p>
Lorem ipsum dolor ... id est laborum.
</p>

Excepteur sint occaecat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This demonstrates a potent, generic approach that should form a principal part of your toolkit, and is the technique used in this guide to render the table of contents at the head of each chapter.

That is, each set of links in such contents tables is contained within a div that has a class attribute-value of ‘ChapterToC’, which gives it a grey background and rounded corners. Those divs are contained within a parent div that, as mentioned above, has a class-attribute value of either ‘SideBar_Wide’, ‘SideBar_Medium’ or ‘SideBar_Narrow’ and the definitions for those classes gives such divs a width setting, and floats them rightwards.

The critical point is that sub-dividing things in this way disentangles or separates element roles cleanly. The ‘Sidebar_’ abstraction used in the implementation of this guide yields generic containers of known width and behaviour, within which anything can reside, be it a table, flow chart, diagram or a chapter-contents listing. This, during production, limited the knock-on effect of changes to the CSS that applied to sidebar-related elements, thus expediting matters.

Indeed, as Appendix C, Advanced Styling & Layout, points out,​this approach is invaluable when trying to overcome unnecessary bugs. That is, the solution to the problem explored there lay in containing a div within a div, which separated two CSS rules that conflicted nastily due to a bug in the software for a number of Kindle-flavour user agents.

Sizing

A principal feature of e-books is the concept of re-flowable content. That is, as the user switches between landscape and portrait mode, or changes the size of the font, any text is re-rendered, with the words moved to different positions in accordance with the change (unless the content is held in a <pre> element). This is a factor in the compositional equation from which print media are blissfully immune, and which can present challenges when creating e-books that employ coarse-grained elements such as sidebars and diagrams.

Those challenges are compounded by the massive difference in display resolutions across the range of user agents, which precludes specifying sizes using pixel units. That is, attempting a (literal) one-size-fits-all approach through using pixel units requires the user to re-size the content's rendering in order to suit the device in question, and this gives a book an amateur feel. Hence, you should stipulate sizes using ems and/or percentages, as​noted in Chapter Four, Style, and this section considers the issues that surround the use of these two metrics.

As pointed out previously, stipulating the size of an element using ems, causes its actual on-screen dimensions to correspond to its font size. That, in turn, is determined by any font-size rule that applies directly to that element, and if no such rule exists, it will be determined by its parent's font size (which may itself be set explicitly, or be taken from its parent, and so on).

If all font sizes in the parent-child hierarchy are set using ems or percentages, and all element dimensions are set using ems, a change to the user agent's font size (colloquially, the ‘zoom level’) will cause the entire layout to scale accordingly. This yields device independence, and do note here that ems-based scaling means that a change in aspect ratio between portrait and landscape will not affect the layout. However, this introduces a quandary, as larger font sizes may alter a carefully thought-out layout unacceptably, especially on the more-limited display technologies.

That is, selecting a large font may cause an ems-sized element to expand such that it dominates the display, which may not be what you want. Under higher settings (i.e. relatively large text) an ems-scaled sidebar may exclude all content to the left or right, and the next example demonstrates this. To see the effect in question, increase the zoom level on your user agent progressively, noting as you do the way in which sidebar expands to consume the layout horizontally.

div.Sidebar
   {
   width   : 20em;
   padding : 0.3em;
   border  : 0.1em solid black;
   margin  : 1em 0.3em 0.3em 0.3em;

   float   : right;

   }     

<div class = 'Sidebar'>
Duis aute irure ... id est laborum.
</div>

<p>
Lorem ipsum dolor ... ea commodo consequat.
</p>

Conversely, using percentages to stipulate the size of an element along a given axis will cause its extent to be a proportion of its enclosing element's size along the same axis. That is, stating a width of 40% will give the element a width of 40% of its parent element's width. If we assume that the enclosing element is the body element, and assume that that element fills the display, then the width of the child element will be, essentially, 40% of the width of the display (or ‘viewport’, more accurately). Given that the viewport dimensions that e-readers provide are fixed, the child element in our example will always have the same lateral extent.

Unlike sizing using ems, entirely percentage-based scaling will alter the physical dimensions of the layout when changing between landscape and portrait, but a change in text size will not change the layout. The problem here is that increasing the text size will redistribute any text it contains, and may reposition child elements (depending on their styling and display properties). This too may not be what you want.

div.Sidebar
   {
   width   : 20em;
   padding : 0.3em;
   border  : 0.1em solid black;
   margin  : 1em 0.3em 0.3em 0.3em;

   float   : right;

   }     

<div class = 'Sidebar'>Duis aute irure...</div>

<p                    >Lorem ipsum dolor...</p>

With these principles established, it is of course possible to combine the techniques. For example, a sidebar could be sized in ems, but its internal elements could be sized in percentages (or vice versa). Indeed, Amazon's documentation recommends that you set margins and padding in percentages instead of ems, as this ensures that the margins do not grow wide with large font sizes.

The entire set of permutations is too great to enumerate here, and it is likely that many would be mutually equivalent, while many others would be of no value. This precludes the provision of hard and fast advice here, as the correct decision depends on your particular goals. However, we do have two guidelines:

overflow : hidden;

text-overflow : ellipsis;

Colour

For the majority of e-books, colour is not a great concern in respect of the content, as that majority comprises works of pure prose, with chapter headings, and no peripheral elements such as diagrams and sidebars. The only point at which colour is likely to enter the equation for such books is in the cover art. Clearly, appreciation of colour is entirely subjective, so guidelines such as ‘prefer red to blue’ would be absurd, but there are certain principles to which you should cleave if you are intent on doing a professional job.

First, remember the prevalance of monochrome e-ink devices, as two colours that appear quite different on a colour display may look identical when rendered as shades of grey in e-ink. That is, certain colour combinations have the same luminance when rendered on a monochrome display, and so present no contrast.

As a demonstration, and if you are reading this on a monochrome e-ink device, you should be unable to see any text in the first sidebar you see here; it should look like a featureless, grey rectangle. If you can see the text, it may be that you have an e-ink display that supports greater than 16 grey-shades; more likely, you have a colour device. In either case, you will be able to see the phrase ‘Can You See Me?’, and if you have a colour display you will be able to see that the colours are a light green on cyan. For those of you who see nothing in the first sidebar, the second shows the same phrase in white on charcoal, and will be visible irrespective of your display technology.

If you wish to determine which such colour combinations fail on e-ink displays, you will need to read the rest of this section, and do quite a bit of experimenting. On-line colour conversion tools are available, however, and so the following search-terms suggestions apply:

find ‘complementary colours’

The second consideration when using colour, is that two shades of grey that differ only slightly in their luminance may render identically on an e-ink display. That is, on a sixteen grey-shades device, the renderer will display both as the same grey-shade because having only sixteen from which to choose forces a compromise, unless one shade lies on the darker side of one sixteenth of the gamut while the other lies on the lighter side.

Another way of saying this is that colour gradients that fill an area of greater than sixteen pixels in extent are hopeless on a sixteen grey-shades e-ink device. This is because the gradient renders as a set of progressively darker (or lighter) bands, and the scope of this is depicted in the sidebar. If you are reading this on a 16 grey-shade user agent, you will see a near identical set of stepped rectangles in the two right-most columns in the sidebar you see here, running from lightest at the top to darkest at the bottom. However, if your user agent possesses a considerably higher ‘colour depth’, stepping will be visible in only the middle column, and the right-most column should shade gracefully from white to pure black.

If you seek another demonstration, and are reading this on a sixteen grey-shades e-ink device, the silhouette photograph of the New Mosque in Istanbul used in the section on Negative Space below shows prominent circular banding around the sun, an artefact that will be invisible on electro-luminescent user agents. The image in the sidebar shows a screen shot of that photograph rendered on a Kindle Touch (which ensures that the banding will be apparent to you irrespective of your display technology).

Given these points, if you wish to stick with a simple grey-shade palette when colouring content elements, you can pick one of the values from the left-most column in the table above, and cite the hash followed by the six symbols for that shade. That is, and to reprise an example from Chapter Four, Style:

h1 { color : #808080; }

<h1>
Lorem Ipsum
</h1> 

The points above might lead you to think that you should avoid using colour in your e-books, and stick to a monochrome palette, in order to keep e-ink users happy. That is an unfavourable stance, however, as there are many colour, electro-luminescent user agents in the world, and, as things stand currently, viable colour e-ink technology may be just around the corner. The mandate therefore is that you should use colour, but always test on a monochrome user agent (like the Kindle Previewer, in e-ink mode) to ensure that things are at least acceptable on chromatically challenged devices.

In terms of your aesthetic choices over colour, guidance can be found in the fact that, when young women start using makeup, they can be prone to overdoing things; eye shadow, for example, plastered-on as if with a trowel. As they develop a more refined approach, however, they use makeup in a much more subtle fashion. Thus it is with colour in CSS, where the concoction of all manner of lurid colour schemes is trivial, and where the mark of the amateur is the overuse of colour, and of aggressive, discordant colour contrasts (lime green on magenta – why?).

A parallel is to be found in the history of programming languages, where the advent in the late 1980s of formal support for a technique known as ‘class extension’ (also known as ‘inheritance’, related only weakly to inheritance in CSS) resulted in a form of intoxication in a proportion of the programming community (including this author), who overused and misused it greatly. In some, the technique even came to be seen, incorrectly, as a central predicate of software design and implementation, thus creating more problems than it solved. To reprise the introduction to this chapter: just because you can does not mean you should, and so do remember that web development and graphic-design professionals take the less-is-usually-more approach to colour, often using it in an elegant and and restrained fashion, which is a philosophy you should nurture in yourself.

As an example, consider the manner in which this guide presents its code examples and tables as light grey panels with slightly rounded corners. They appear to be simple, flat expanses of background colour, but relatively understated shading like that can have a somewhat insipid appearance, with little contrast between them and the rest of the content. The naïve response to this is to make the panels darker, but this is heavy-handed for those of us who prefer silky subtlety, and collision with the work's other compositional tenets also becomes more likely.

Given this, all such grey panels in this guide possess a thin border that is just slightly darker than the principal grey-shade. Being only slightly darker, such borders are not apparent unless you increase your user agent's zoom level to ‘Elephantine’, but they serve to give the edges of the panels they surround slightly greater contrast. This gives them greater definition, thus making them seem more clear-cut – they have greater contrast, yet there is no overall change in shade.

To see the technique in action, consider the example below, where the left-hand panel has no border, but the middle and right have a border that is slightly darker, and slightly darker still respectively:

The effect is very subtle, but visible nevertheless on both e-ink and luminescent displays – to revisit the makeup analogue, you could say the technique acts like the application of a little eye-liner. The Lorem Ipsum graphic that this guide uses also employs the same technique, and if you are curious about the precise CSS that is needed to implement the example above, a crude version is as follows:

#LeftDiv
   {
   background-color : #B0B0B0;
   border-radius    : 0.55em;
   }

#MiddleDiv
   {
   background-color : #B0B0B0;
   border-radius    : 0.55em;

   border           : 0.1em solid #A0A0A0;

   }

#RightDiv
   {
   background-color : #B0B0B0;
   border-radius    : 0.55em;

   border           : 0.1em solid #909090;

   }

Obviously, you could reverse the effect by making the border one or two notches lighter than the element's background colour, which would have a softening effect. Moreover, you can apply the same technique in your SVG images; that is, you give appropriate image elements a very thin border that is just slightly darker than their principal colour, which gives them a little more definition.

So far, in this chapter, we have considered the more functional aspects of e-book composition, taking in code symbology, favourable and unfavourable approaches to layout, the issue of colour, and element-sizing techniques.

Moving towards the other end of the compositional axis, however, sees issues of an ever-greater semantic, abstract and aesthetic nature take the upper hand, and the presentation of textual elements is the next stop along this progression, a topic that the next three sections explore.

Text

In composing the presentation of the text in your content, two points apply.

First, remember that Amazon reports a preference on the part of users for control over line spacing, margins and typefaces when reading e-books, and so forcing a particular typeface or font size etc. on people, in terms of the body text (as in the principal textual corpus in your book) is poor practice. Other textual elements, however, are another matter, where Amazon is in favour of, for example, distinctive typefaces for headings. This means that you should avoid application of any CSS property that affects the body text or the elements that contain that content, such as borders around all paragraphs or which, say, changes the background or margins for the <body> element.

The second, rather more subtle issue pertaining to the presentation of body content lies in the fact that some e-book publishers seem to feel it necessary to replicate all the attributes of print. After all, those of us who care about the dissemination of quality writing see value in preserving long-held literary traditions, as Appendix C, Advanced Styling & Layout points out in respect of drop capitals and illuminations. However, it is a mistake to treat the electronic presentation of text as if it were a direct substitute for print. This is because e-books are an analogue not a re-implementation of print, and so form only a simulacrum of that venerable medium.

This is clear immediately when you hold a print book in your hands and read from one of the pages. The previous and next pages are clearly visible, giving ready context within your field of view, while the compact, leaf nature of the book allows immediate access to arbitrary locations; transition to another place needs but a fingernail.

Clearly, print surpasses electronic in this regard because, without the presence of a link in the content upon which you can touch or click, getting to a different section of an e-book requires various steps. You can page repeatedly forward or back (tedious if your target is distant), or you can go to a table of contents and proceed from there; failing that, you can perform a search operation.

In the light of these points, one could say that e-readers provide only a peephole interface to a book's content, whereas the organised physicality of print is the interface to the content. Indeed, some publishers exploit the physicality factor in the form of ‘thumb indexes’ – the indentations that you sometimes see cut into the side of the pages of books such as large dictionaries, which are labelled A-Z, and which expedite alphabetic access to a given section.

Consider too the limitations of some current display technologies. At the low end, where many millions of e-ink devices reside currently, are resolutions as low as 600 × 800 in a screen that is, on a Kindle Touch, just 9.2cm × 12.8cm in size. While such technology renders text and graphics beautifully, that device can render only around 365 words per screenful at the smallest font size. This tends to emphasise the sense of a limited, peephole view on the content, and devices such as smart-phones with their smaller displays can only tighten the constraint still further. The general implication of these points is that chasing the precise reproduction of print is wasted effort, and that it is far more favourable to realise the unique nature of the medium at hand, and to ‘work with the grain’.

Accordingly, the specific, practical implication of the peephole argument is that you should favour short paragraphs more than you would usually in print. Paragraphs are typographical grouping elements that serve to break content up conceptually, co-locating related points and arguments, thus contributing to the reader's mental map of the content. Given this, and while long paragraphs risk engendering confusion and conflation in the human reader's mind, they are more tolerable in print because the physicality factor identified above gives strong, reliable context.

Consider then a long paragraph on an e-reader: it fills the display completely, having started on the previous ‘page’, and extends far into the next ‘page’, or even the one after that. This can make the reader feel lost in a monolithic block of content. Really tiny fonts are no solution, in part because you should not apply global styling to the body text, but also because the glyphs making up the text then become too small to discern. This approach would do no more than cause users to increase the zoom level, thus rendering the base font-size irrelevant.

The real solution is to give your content far greater structure by making your paragraphs much smaller and more bite-sized than you would in print, as this gives your reader a greater sense of location within the geography of the work.

Fonts

If you choose to use your own typefaces, do bear in mind that the fonts that are installed by default on e-readers are optimised so as to render as attractively as possible on their displays (although this is not an issue on ultra-high resolution Retina-type displays), and so you should be discerning in your use of alternative typefaces. While you may love a given typeface that you have discovered, be aware that it may not look so good when rendered before your customers' critical gaze. To reprise the spirit of Rule​One in Chapter One, it is not about what you think looks good, it is about what appeals to your potential customers.

The second factor in respect of fonts, specifically in the case of your cover art is that you should limit the number that you use. The same argument applies here as it does with the use of colour, which is that it is trivially easy to use multiple typefaces in multiple permutations of size, boldness and italicisation; but again, just because you can, does not mean you should.

That is, it is often easy to identify amateur covers in e-books by counting the number of fonts used in their cover art. Self-published books that have, say, four typefaces manifesting as seven different fonts are easy to find, and this reprises the argument above about clarity and structure. If anything, the power of modern software tools facilitates such font profusion, as it is so easy to simply pick yet another typeface from a list, and then embolden, and so on. Novices often use this in trying to make their creations as interesting as possible, without realising that they are being heavy-handed, and are thus degrading rather than improving the work at hand.

In the light of this, and if you are new to graphic design, take a look at professional cover artwork. You will find that designers are relatively restrained in their typography, which lends greater clarity and thus has a greater impact in the potential customer's eye. For you the easiest and most successful path lies therefore in picking a single typeface for the title, and just one other, if necessary, for auxiliary text, such as the author names and the subtitle, if applicable.

The same principles apply to the book's internal typography. That is, if you wish to use a custom font for chapter and section headings, use just one, and vary them only in size. There is no need to italicise and embolden to give greater distinction, unless you have a rigorous typographic scheme in mind that is appropriate to, say, a technical work that you are producing.

Titles

As Rule​Three in Chapter One, Strategy, points out, of all the textual elements in a book, and in terms of making sales, a book's title – the words themselves, and their presentation – is one of the most important components. This is because the title is one of just two points of initial contact that you have with the browsing potential customer (the other being the cover as a whole),

That is, when customers go to retailers like Amazon for books, the vendor presents a list of titles, with a thumbnail image of the corresponding book's cover accompanying each. At that point your book has but a fraction of a second in which to attract the customer's attention, and only once you have snared his/her interest is the customer likely to click on the link to see more. Only then does your promotional blurb (and, from there, the sample that is available via the Look Inside feature) get a chance to play its part, and it is clear that the title and its presentation are a key compositional concern.

Four points apply in this respect:

To support the ease of assimilation argument, there is a wealth of evidence to show that the number of objects we can take-in visually and, at a glance, is limited, as is the number of concepts that we can accommodate simultaneously. Moreover, empirical research shows that human short-term memory has a capacity of five plus or minus two, thirty seconds after exposure to a given set of words or objects (and without the use of aide memoires on the part of the experimental subject).

It seems that our short-term memories are supposed to be rather ‘leaky’ in this way, as greater persistence could cause problems in switching from one context to another rapidly. When our hominid ancestors roamed the African plains, the ability to switch quickly from, say, making a stone tool to concentrating on running for one's life when hungry lions appeared would have been, literally, a life-saver. When your upper-most thought is whether you saw two or three lions, an internal critique of your stone-chipping technique, and the fact that Attempt Number Six failed, is less of a concern.

Instead of baulking at these empirical points, you can work with them by keeping your title to seven words or less. Moreover, you can lighten the customer's cognitive load further by ensuring that some of the words are small prepositions and/or conjunctions. Such words – ‘and’, ‘the’, ‘of’ etc. – are useful when composing your cover because you can make them smaller than the longer words in the title. You can even fit them into spaces that the larger words create by dint of their ascenders and descenders, as the image in the sidebar illustrates.

There is also some latitude to be gained in using, if appropriate, a subtitle to distribute the marketing work, as the next sidebar illustrates. You can even adopt a ‘sell with the title and explain with the subtitle’ policy. That is, catch a customer's eye in the moment with a shorter, more-punchy title, and then secure his/her interest by providing a more-wordy description of the book's content in the form of a subtitle. This gives latitude in that you can use a more stylish font for the title, and use a simple, plain and smaller font for the subtitle, which yields greater freedom within the space constraints that apply.

As pointed out above, there is a spectrum of compositional factors that have a bearing on e-book production. This ranges from the more functional considerations, such as class and id values in your HTML/CSS, through issues that are functional but of semantic significance to the customer, such as colour and the presentation of text. Now, at the far end of the progression, we consider the highly conceptual, psychological questions that surround the compositional equation, in relation specifically to the design of a good cover. That is, what looks ‘good’ to the customer, why does it have such appeal, and can we derive formal principles that we can apply to cover art design?

Given that a person will prefer one composition to another (in any medium), and given that aesthetic appeal is entirely subjective, you could argue that there can be no recipe for good compositions, and that it is impossible to separate a given set of works into those compositions that are canonically good and those that are canonically bad. This is true, but the fact is too that certain compositions find far greater favour with the majority than others. Some movies, for example, are massively popular, while others that cover the same topic are regarded as out-and-out turkeys (the various and numerous versions of the Titanic story are a ready example).

This suggests that it is worth identifying the elements in those more-popular compositions that give them their popularity. That is, our personal tastes may be unique and ineffable, but it is possible nevertheless to discern patterns in the spectra of aesthetic preferences, patterns upon which we can capitalise. Moreover, in accordance with Chapter One's Rule​One, Address the Market, and to reprise a point made above, your tastes and preferences are as valid as those of anyone else, but success in publishing is not about what you like, it is all about identifying and catering for that which the punters like.

A Sense of Fit

Let us start by examining an idea on which we can all agree by considering the following (entirely contrived) limerick:

Limericks have a well-defined form, as poems composed of five lines, with an ‘anapestic metre’, deviation from which creates a clear sense of something amiss, a sense of mismatch. The example above does not conform strictly to the formal pattern, as ‘Lorem’ does not rhyme perfectly with ‘Ipsum’, but this is not the point. Consider instead the following variant:

Gypsum is a constituent of plaster (as in casts for broken limbs), alabaster being a special form that is used commonly in statues; and its chemical name really is calcium sulphate dihydrate. Moreover, the Romans spoke Latin, they created statues in alabaster, and Lorem is a credible first name for a woman, as it sounds so similar to ‘Lauren’.

It follows that both versions of the limerick have faultless internal consistency, the latter being painfully accurate, but accuracy is not at stake here, it is the ‘sense of fit’ that we desire when reaching the end of the last line of the verse, and which is absent from the second version. It does not rhyme, and so is ‘unsatisfying’, failing to ‘resolve’ in the way that the first rendition does – you could say that the second version gives no sense of closure. Taste may be peculiar to the individual, but it seems reasonable to assert that no native English-speaker would have a genuine preference for the second version of the limerick. (Notably, also, the second version is the literary equivalent of a record shot in photography – a concept that is explored below).

With this point in hand, and to develop the argument, the fact of a missing ‘sense of fit’ implies clearly that the first four lines create that hole that is left unfilled. A little analysis shows that the first line establishes the initial situation, whereafter the following three lines collaborate in using that initial situation to create a sense of tension. They establish the impression of building up to a conclusion that is connected to the initial situation. Their content and structure ‘demand’ that the final line in the stanza resolve the tension with a satisfying rhyme that relates semantically to the first, thus tying up every loose end perfectly.

Consider then the difference between artistic photography and what are known as ‘record shots’. A marine biologist, for example, on dredging some strange creature from the deep, will photograph it against a blank background with full, even lighting, and with a ruler or other standard object in the frame so as to give scale. The aim here is to capture the salient features of the animal, ensuring that all are portrayed with unambiguous clarity; and this is a record shot – objective study is the intent, not the evocation of emotional response in the viewer (although serendipity may deliver that gratis). That scientific motivation robs record shots of the quintessential factor that raises simple image-capture to an art – they may have all the right ingredients, but they will never win Wildlife Photographer of the Year because they lack a key component.

Consider too your ideal three-course meal. Now imagine that, instead of eating it in its normal form, you puréed it in a blender (starter, main, dessert, yes the wine goes in too), and then consumed the resulting gloop. No nutritional component would be lost, the flavour combinations would be identical, and it would travel gut-wards in much the same form as if you had ingested it conventionally. Your perception of the meal, however, would be entirely different. Something would be missing, it would lack the component(s) that separates acquisition of nutriment from a memorable gustatory experience, in just the same way that passport photos (stark exemplars of record shots) are poles apart from memorable portraits.

Now consider a sub-standard fictional narrative. It has the right ingredients: a premise, characters, settings, causal sequence; but simple possession of these requisite ‘nutrients’ can never make a bestseller because, just like the boring record-shot and the unappealing slop of the liquidised meal, it lacks something vital.

Given these points, and given that the second version of the limerick above lacks the resolution of the first, can we view record-shots, homogenised meals and dull narratives in the same light? Can we discern a common, abstract principle underlying these disparate scenarios? Can we say that all these ‘compositions’ are equally lifeless because they lack a favourable combination of situation, tension and resolution?

Let us see: in the culinary example, there is seamless juxtaposition of flavour elements, but that very evenness is what saps the meal (the ‘situation’) of contrast and hence drains it of the tension that, normally, is resolved by the act of mastication and swallowing. There is equivalent juxtaposition without asymmetric contrast in record-shot photography too: there we have pure situation, where no element of the composition ‘demands’ something from the others – nothing creates tension. It is the very fact of the blank background, the very evenness of the full lighting, the assured reliability of uniform scale that informs but never excites before it resolves.

We see a similar principle too in a comparison of popular and unpopular narratives – we are, for example, all familiar with cliff-hangers and the way in which they leave tension unresolved. That is, in the same way that a court transcript may relate the events of a trial entirely accurately, a story may present its elements with entire competence, but a simple, sequential description of the facts will never evoke an emotional response. The only exception is where the facts are truly extraordinary in themselves (‘Ah… not so Your Honour, the prosecution accepts that the defendant really was abducted by aliens…’), but even then it is established norms that form the situation within which the facts in question create tension.

In music too, a melody will establish situation, and then create tension by, say, sharpening a note, before resolving satisfyingly. If you have a musical ear, it is possible on occasion to predict a resolving note or chord the first time you hear a tune, given one's inner feel for musical scales. This is especially easy with a Blues melody, which may explain in part the undying popularity of The Blues as a whole. Notably, the lyrics to the song Hallelujah by Leonard Cohen actually describe the melodic changes as they happen. To wit:

Given these points, we can come full circle to test the situation-tension-resolution hypothesis through surgical alteration of the limerick above? For example, if we consider just the essential situation then we are left with just that:

…which takes us precisely nowhere. Let's try again; if we re-present the middle three lines, we have:

Again, a simple assertion that steps beyond the bounds of absolutely nothing. Similarly, removing the middle three lines and re-presenting the remainder, yields:

Again, all well and good, and while one hopes that lust went requited, it is hardly the stuff of award-winners because we will never know the outcome – it has situation and a trace of rather prosaic tension (in the figurative and literal meanings alike), but we have not even a hint as to resolution.

We can even try re-presenting all three elements but in a different order:

Ho hum, plus ça change in the land of Nothing Ever Happens.

This is a compelling perspective that yields valuable insight into the why and how of great, artistic composition, irrespective of medium, and we can use this model to establish some principles for photographic composition, and thence for the creation of competent cover art for a book. These principles are the subject of the remaining sections in this chapter.

Unless you choose something entirely abstract for a book's cover art, the central principle is that, in line with the arguments above, you are trying to tell a story. That story should have situation and, from there, tension that creates a desire for resolution in the potential customer, yet, unlike stories related in prose, you do not have the luxury of the flow of time, where events are related sequentially. No explicit time dimension exists in photography and graphic design, and so this restricts you to telling the story ‘statically’. That is, the salient elements of the tale are available all at once, and so you need to use other factors as stand-ins for the flow of time when trying to invoke the situation-tension-resolution principle.

The idea that great cover art involves telling a story in a static, spatially distributed sense rather than by a dynamic, descriptive sequence in prose is perhaps the most powerful compositional tool we have at our disposal. It is by elements of situation, tension and resolution that visual composition can tell a story, and the best such compositions spin tales of intrigue, suspicion, victory, loss and a myriad other things that fascinate us so.

Rule of Thirds

A long-held compositional technique in photography, painting and graphic design is called the ‘Rule of Thirds’ (first documented in 1797). The idea is that you can divide the frame into three equal thirds vertically and three equal thirds horizontally, as the sidebar depicts in landscape and portrait orientations, and that you position elements of the composition on or around the one-third lines, and on the intersections between those lines. (Note here that, while our interest here in good cover art causes us to consider things in the portrait orientation, it applies equally to landscape orientation too.)

Observing Rule of Thirds contrasts with the approach that many novices adopt, who often place a/the principal element of a composition dead in the centre of the frame. This follows a natural desire to achieve balance, as it apportions the space around the element equally, but that is the stuff of record shots. Seeking balance in this way leaches tension from the composition, thus robbing it of interest, thus foiling its ability to tell a story. Conversely, offsetting an element deliberately towards the side, top or bottom of the frame introduces tension, thus creating interest, because it leaves a space in the vicinity of the other one-third intersections, just as the middle three lines of a limerick create a hole that begs to be filled.

Consider the first photograph in the sidebar. It places the horizon on the vertical mid-point of the frame, and places the tree on the horizontal mid-point.

Now compare that with the image beside, a cropped version of the first, presented as a putative book cover, which places the horizon on the lower horizontal-one-third line, and the tree on the right-hand vertical mid-third line. This places the intersection of tree and horizon almost exactly on the lower-left one-thirds intersection. This, in turn, introduces tension, as the upper right-hand quarter of the frame is essentially empty, thus creating a ‘hole’ in the same way that limericks do. This concurs with our pursuit of good cover art, as you can occupy that space with the title or author name, as the image demonstrates, thus giving a sense of balance and fit (and note that those elements are on or around one-third intersections).

If you are unconvinced, however, consider the next image, the pier at Eastbourne in the UK. It has good, even lighting, the orange of the rust is vivid, the join in the stanchion forms the principal ‘character’ in the story, and the use of a wide aperture (considered​in Appendix D, Better Photography) gives a sense of depth. This causes the eye to roam ever farther back along the structure in an attempt to find the end (to resolve the tension that the foreground sets up), thus aiding the sense of a story being told.

However, the photographer (this author) made a stupid mistake, as he stuck the stanchion-join, indeed the entire anatomical 'mid line' of the pier, on the vertical midline of the frame. No amount of cropping will save this shot; it should have been re-taken with the camera positioned just above or just below the stanchion-join. This would have placed the join on the upper/lower horizontal one-third line, where parallax would have then placed the stanchion join that lies in the mid-ground above or below the pier structure's mid-line. That is, adjusting the camera height would have placed the vanishing point on the top-right one-third intersection or the bottom-right one-third intersection.

To develop this critique further, placing the camera below the joint would have opened up the space to the lower right (the sand and shingles), thus creating an excellent locus for a book title and author name. Moreover, yawing the camera to the right slightly would have opened up the entire area of negative space (covered below) that runs down the right-hand side of the frame.

Note that the idea of placing an image element on a one-thirds line or intersection does not necessarily mean positioning a single element. To reprise the point made​above about subsuming a set of HTML elements within another element, thus yielding the ability to position things as a group, you can place a group of image elements collectively on a one-third line or intersection. That is, a group of image elements will possess a common centre-point, and so it is possible to align that centre point according to the Rule of Thirds, where that group of elements may have its own internal layout that is also driven by Rule of Thirds and the other broad principles covered in these sections of this chapter.

Note too that none of this means observing the rule (‘heuristic’, more accurately) slavishly. Rule of Thirds is not a mathematical recipe, demanding that you place the geometric centre-point of an image element precisely on a given one-third intersection. Indeed, if you adhere to the principle in such a blind, mechanical sense, you are likely to end up with compositions that fail to come to life. Doing this is like observing blindly the received wisdom on writing style, such that you never use passive voice, out of a desire to remain unswervingly within the rules, which causes you thereafter to create prose that feels odd, stilted and artificial. Always bear in mind that the aim is to choreograph the components of a piece such that they operate as a coordinated whole; sometimes, sticking something in the middle of the frame works best simply because of the nature of the elements in question.

Notably, the idea that observing Rule of Thirds opens up gaps that create tension, leads us to our next high-level compositional tool, Negative Space.

Negative Space

The concept of white or ‘negative’ space is a powerful component in many visual compositions, and may come as a surprise to the novice, as it posits that empty areas of the frame are far from being something that must be filled inexorably, but are positive design elements in their own right.

Obviously, if an area of a visual composition contains an absence of elements, then there is nothing there, and the naïve reaction to this is to fill it (again, presumably, from a natural desire for completion). Thus it is easy to find self-published e-books with busy, over-filled covers, where the individual concerned did not have the confidence to let a bit of empty space speak for itself. The insight lies in seeing the empty area as an object, and therefore a bona fide design element, by dint of the elements that circumscribe it and by the frame boundary itself.

That is, and in accord with the situation-tension-resolution model, the situation of those other elements creates the empty space, suggesting that there should be something there. This gives the tension component that acts as a foil for the other elements in the composition. In fact, the composition may not resolve the tension, thus, one hopes, creating an itch in customers shopping for a good read, an itch that that can be scratched only by finding out more about the book, and even (Deo volente) buying and reading it.

This is why, on examining professionally produced covers, you can find daring use of negative space, where the positive elements in the composition – the title, author name(s) etc. – are minimal in their extent. This yields a clear uncluttered layout, where the expanse of negative space amplifies the effect of the positive elements. You could say that this parallels the eye-liner technique explored above.

Consider the image in the sidebar, the New Mosque in Istanbul, taken in the daytime not at night. The brightness of the sun and hence limited exposure latitude (explained​in Appendix D) causes the dome of the mosque and the minaret to appear in silhouette, which is an instance of negative space in itself because there is nothing present within the inky blackness. (This is why ‘negative space’ is a better term than ‘white space’, although, an even better term might be ‘null space’). However, the composition also observes Rule of Thirds by placing the sun-dome-minaret triplet in the lower-left quadrant of the frame, thus creating another deep area of negative space to the top right.

Three final points in this section: first, the concept of negation does not necessarily mean pure nothing. In the image of Eastbourne pier in the previous section, the collaboration of the in-focus foreground and the out-of-focus background negates the background somewhat, thus creating tension. That which is distant is indistinct and unclear – what things lie there?

Second, this guide makes a strong argument for the importance of laying out CSS and HTML code in a formal, consistent manner, where regular indentation of elements in the code forms part of that layout regimen. The leftward space that the indentation opens up contains absolutely no information, and yet contributes very greatly to the content as a whole (if you doubt this, just try reading code without indentation). This too is therefore an instance of negative space, and to reprise a point made in Chapter One, Strategy, it is one of the few times when you truly can get something for nothing.

Finally in this section: the song All I Really Want, by Alanis Morrisette, on her Jagged Little Pill album, contains a two-beat span of silence between the lyric ‘Why are you so petrified of silence? Here can you handle this?’ and ‘Did you think about your bills, your ex, your deadlines?’. Similarly, the song called Slipping, on the album My Favorite Headache by Geddy Lee, has a three-beat span of silence at 02:31, just before the first rendition of the chorus. Both of these are examples of Null Space, as null as null can get, rendered acoustically (or not in this case: a hole exists by dint of its edges), and they lend their respective songs considerable heft.

Depicting Movement

Negative space can be combined with other compositional principles, such as the concept of ‘Lead Room’. If, for example, you are creating an ‘action’ composition, where, say a train or car can be seen speeding along, you can put some effectively empty space ‘ahead’ of the vehicle in the direction of its motion (‘effectively empty’ meaning that there may be a background of some form, but it is homogenous and not a principal element of the composition). This creates an impression of the vehicle having somewhere to go, and enhances the sense of movement.

The idea here is that the alternative – to truncate the space ahead of the moving object – gives it no room to move, thus creating the curtailing the impression of movement, and the next pair of images in the sidebar illustrate the two scenarios.

Remember, however, that we are interested in great cover art, not the pure issues of photographic composition, and so you can argue that placing the horse to the left of the frame in the bottom example yields an opportunity to emplace something or someone that is following (and who, say, is desperate to avoid losing his/her fleeing mount). In this case, the proximity of the horse's head to the left-hand side of the frame in the first example gives a strong impression that the animal is on the verge of getting clean away.

In fact, we can develop this idea by abandoning the notion of placing the entire animal within the frame, and by clipping it deliberately instead. In the first of the next pair of images in the sidebar, cropping the horse renders it a secondary element, and while the outline of the mane maintains the impression that it is on the way to some destination, the appearance of ‘just passing through’ allows something to the top-right (in line with Rule of Thirds) to be the primary element of the composition. Moreover, leaving the area to the top-left empty (Rule of Thirds again) would balance the composition with a judicious dollop of negative space.

In the second example, the situation of the horse's head on the top-left one-third intersection makes it a primary element, and, as with the first example, the outline of the mane gives an impression of movement. However, the fact that the animal is only halfway-in is what compounds this to deliver the sense of something really fleeting. By truncating the animal, the composition creates an impression of swift passage; and as cover-art fodder, all it would need (aside from a horse that is not rendered in silhouette, unless that is your goal) is the placement of the title and author name to the bottom left. This would leave the top-left one-third intersection empty again (Rule of Thirds and Negative Space), thus making the composition a simple, effective story teller.

Note here that there are non-compositional (that is, non-placement-related) graphical techniques such as the idea of motion-blur that comes from slower shutter speeds in photography. That is covered​in Appendix D.

Curves and Lines

Curves and lines in are also potent compositional cues, as they lead the eye in a given direction, and can act as frames and ‘guides’ for other elements. Roads, rivers and railway lines are an excellent source of such image elements, as are bridges.

Spiral staircases (‘helical’, more accurately) are also guaranteed fodder for the artistic photographer, so never waste the opportunity if you see a helical staircase when you have camera in hand. Photography alone could have been the prime mover for such design, as the first image in this section illustrates admirably. This cover mock-up started as an ordinary photograph, the application to which of the pencil-sketch effect used in Chapter Two, and a lot of hand editing, yielded this veritable symphony in curves. As a book cover, it requires only one or two individuals in period dress, one coming down the steps, near the foot, looking over her right-hand shoulder at the (possibly enigmatic) mid-left figure receding into the background. This would hint at, say, a potent romance, or perhaps an historical thriller.

Now consider the second image. There is a delicious area of negative space at the top-right one-thirds intersection, and the shot has a great sense of depth and distance. To complement those elements, the graceful curve of the railway line draws the eye away into that distance, thus raising implicit questions: what lies yonder, to where does that track lead? To set it all off, we have the train moving against the backwards flow of all the other depth cues; perhaps it carries our story's protagonist from a turbulent and chilly past; perhaps we must go where he has been in order to witness the resolution of the tale.

In fact, the use of curves and lines goes further than compositions based around natural landscapes, roads, train tracks and helical staircases. There is, for example, the somewhat risible notion of putting 'go-faster stripes' on a car; but in the context of cover art, motion blur relies on a streaking effect to create a sense of movement. All such applications of curves and lines use their ability to take the viewer from Point A to Point B in the absence of a flow of time, and thus they can be used to tell a story statically; an interesting story too, as long as it has situation, tension and a hint at possible resolution.

Rule of Odds

A further principle that appears to subscribe to the situation-tension-resolution model is the Rule of Odds. This holds that people prefer an odd rather than even number of principal elements in a composition, although this is useful if we are considering three or five elements only, as seven or more exceed the number of objects the mind can take in at once without enumerating them. Gratifyingly, this heuristic coincides neatly with the situation-tension-resolution model, as that itself comprises three components, and this allows you to ‘assign’ situation, tension and resolution to three visual elements in the cover art. That is, one element can represent situation, and the other two can represent tension and the suggested path to resolution respectively.

It would seem that the mechanism by which the Rule of Odds operates centres on the fact that two divides even numbers completely, leaving nothing unsatisfied (no space that requires filling). That is, even numbers of compositional elements yield no tension. After all, the term ‘even’ means ‘flat’, ‘featureless’ and ‘plain’. Obviously too, the notion of something being ‘odd’ concerns not only numbers but many other things too. We describe a situation where something is misplaced or missing as being ‘odd’, in the sense of unorthodox, and here too we see the principle of something being out of place, something that demands completion, thus generating tension.

As an example, the next image in the sidebar, a photograph of the campanile in St Mark's Square, Venice, combines all of the principles explored in the sections above:

These properties yield an image replete with situation and tension, and the negative space gives an opportunity for some textual elements that turn the image into a more-than-passable book cover.