Layout: What do Headers do?

A series of posts on Layout, because I can’t put all of this on one page.

Part 3: Headers, semantics, and Berra talking about them both.

Headers break up big chunks of text, and let you find your way through a document.

It’s hard to keep your place in a big chunk of text. If you don’t give people breaks, their eyes get tired, and their brain gets tired. Headers give your eyes a break, and let you find things, and let you work out how important those things are.

Here is an excerpt chunk from Stone and Bone. It has three visible layers of header, and from them you can tell how important each part is. Each of our big headings has smaller headings that are areas, each area has a text description, and a danger level, and each danger level also has a description. You can’t have a danger level without having a description of the area, in fact. What we have is a hierarchy:

  • Big Red Header
    • Important Yellow Header
      • Black Header

Colour-blindness aside1That’s a whole other post, but you can and should test for it. you can tell what’s important by colour, positioning of header, whether the header has a number, and what the font is. The black Danger Level header is pretty similar to the paragraph font, but bolded, and the other two headers are the same font in different sizes. There’s a different level of big red header too, which I could use if I needed something REALLY important.

The red ‘Beyond the Plateau’ header serves as a break so that you know you’re at the end of one area and onto another now. We have a new map for that part, and of course, each map has a big red header in the text, to make the transition. Ideally I’d have some text between the two header sizes here, but this was a relatively early work, and I was not so aware of that practice. The reason for an extra bit of text is to explain what is different now that the header has indicated a change, so that you know what you’re getting into next, as a reader.

Headers are a semantic layout. That is, the skeleton of your document has form and meaning. If you can see only the headers, you know the main way the document works even if you do not have the details. So, put things of the same level of importance under the same level of header. As noted below in comments, header hierarchy matters for accessibility reasons too. It affects how screen reading tools navigate, interpret, and present text to people who listen to a written text. As a layout artist I think a lot about visuals, but I don’t think enough about hierarchies like this, so that’s an improvement I could be making.

Big new areas to explore are at about the same level as the NPC who gives you a new plot, because they each begin a new section. Individual map points are about the same level as each other. So, meeting the Chief Plot Giver ™ is probably a big red header, in my scheme, and then the description of the briefing they are given might be a yellow header – subordinate to the red one, but a definable part of the wider interaction2Really, a map is just a series of subordinate points within the PCs’ interactions with the area..

My layout software, Affinity, can generate a table of contents automatically from my headers. I admit I don’t do it that way, but… well, it can, and that tells you what headers are important for in terms of document structure. In terms of space structure, they give us gaps. Part 2 already talked about gaps within columns and above headers, though. So instead, I’m going to talk about the one sort I have not yet talked about – Chapter Headers!

Am excite. These things can be very pretty.

A screenshot from a book showing a large area with the word 'SKILLS' in it, and a decorative top and bottom to the word. There is then space before the text begins with a large drop-caps W.

Here’s a chapter header. It sits at the top of a page, and says pretty solidly ‘this is a new beginning’. This is from the RuneQuest Core Rulebook3Thanks to Chaosium for permission to use it., and it’s just beautiful. You can zoom in and see on the PDF things that you can’t even see on the page.

It lets you know, completely and absolutely, that the chapter is the most important subdivision of this book. Each chapter holds its own subject, and no sub-division within there is going to be nearly that important.

In the PDF, this is the top-level style of header, so you can choose to go to the Game System, or the Skills, or the Rune Cults. Each one looks similar. It’s got a top and bottom, but no sides, so that no matter how long the chapter title is, you don’t have a problem with it being too long.

The space beneath the heading is enough that you can appreciate the heading itself in its own setting. Then there’s text, which in this case starts with a drop cap and some red words because if you started with ordinary text, you just couldn’t compete. The drop caps and the red colouring/caps only appear here. Chapter transitions are important.

In a single adventure, you probably do not have anything that important. If you are writing a longer book, you might.

A screenshot of a page of a roleplaying book.  It is headed CREATURES in a black font with cut-outs of mushrooms.  Under the heading is a blue line and then a space before the rest of the text, which is headed with the title 'Black Elves' outline, underlined, and overlined in blue.

And look what we have here – someone wrote a book and it has chapter headings! That someone is Brian Duguid, and the work is The Voralans, about the Black Elves of Glorantha. Thanks to Brian for letting me use this image.

This page is pretty interesting, because it shows some changes Brian has made to the template, and some things he has kept the same. We’ll start with the obvious bit. Brian’s gone for blue instead of the green stat blocks of other books. He’s used the red of the characteristic block heading for the names of spells. I think I like that. It helps them stand out but it’s not a heavy bold or a subtle italic.

There’s one thing I think is not successful here, which is I think he could have gone further with the blue. The Black Elves heading has a blue outline and a line top and bottom, but the chapter header doesn’t. Instead, it’s got the Jonstown Compendium runes, in brown. The parchment backing is that colour, but it’s not really supported with the rest of the colour choices. I think it would have been more successful to replace the Rune line with something in darker, desaturated blue, which isn’t actually about the header, but I find it makes the header unbalanced. Maybe a mycelium network or the fruiting body silhouettes that are used as cut-outs in the letters would have worked there. I also think that the title could have been created from a bold/capital version of something in the book already, and then the fungus shapes could be cut out of it by hand, and it would match what we read elsewhere. The round, almost chubby font seems a bit friendly for the subject matter. The solidity of the font does give room for the cut-outs, though, so I can see why you might want wide, round letters.

In general, it’s a clear heading, it tells you exactly what you’re getting, it’s thematic, it’s got images and decoration in it which do not detract from being able to read it. There’s space around it, and it keeps the colour structure of the rest of the book. It’s very definitely a new chapter, and it’s very definitely about creatures. I’d prefer more visual balance, but then again, I do things that other people don’t like.

Having got this far, I think it’s only fair to grab one of my own headings so that you can look that over too.

Here’s a header from The Temple of Twins. There are a few things to note about it. First off, in the space available, it’s off-centre, and so is all of the text. I made that decision on purpose, because when you scroll down on the PDF, you have a left page then a right page. The coppery image on the right is on the left on the previous page, and if I centred to the available space, then there would be a zig-zag effect as the reader scrolled. When I come to making a print book, if I have something like this, I’ll align everything to guides so that the non-centredness gives me a decent gutter and I still have space on the outside of each page.

In terms of vertical space, I like this. It’s got a bit more space below than above to separate it from the text but not so much that it’s divorced4Depending on whether you read to the top of the headings, or the top of the text, of course., it’s got a wide set of lines to say ‘this is a new section, pay attention, things just changed’. The top and bottom spaces are around the same height as the pair of lines with the text between them, and most readers find that a visually pleasing distribution. I moved it around to deal with the fact that the Rune line above isn’t really a part of the document, but also definitely exists and shouldn’t be clashed with, so it’s not perfect, but it does the job. I could possibly remove the Rune lines from the top of the header pages, but I’ve got pretty short chapters sometimes, so it might just be confusing as they Runes would keep disappearing then reappearing. As I recall the red lines are slightly colour changed so that they look the same colour as the red text just below, because of how humans see.

The thing that I could improve is the font. It’s got clear letter formations, but they’re thin and spiky. On the occasions when we use it as a cover font, I make it bold and then put a stroke around it, to give it some body. Here, it’s doing the job of looking old and dignified (and therefore distant in time and place) by being thin and columnish… but it’s also got really thin lines and the spikiness can be unpleasant. The lines around it are thicker than the lines of the title itself.

I’ll probably be keeping it for the time being, and it’s certainly going to be part of anything more that BWT publish in Prax, because I don’t want to change style partway through what we’re publishing. However, I’m aware it’s not the best option for readability, and I’m thinking about what else to do.

Anyhow, that’s it for Headers. Use them to say how important things are, use them for visual breaks, and don’t crowd them.

  • 1
    That’s a whole other post, but you can and should test for it.
  • 2
    Really, a map is just a series of subordinate points within the PCs’ interactions with the area.
  • 3
    Thanks to Chaosium for permission to use it.
  • 4
    Depending on whether you read to the top of the headings, or the top of the text, of course.


Add Yours →

As an added note, header hierarchy matters for accessibility reasons too. It affects how screen reading tools navigate, interpret, and present text to people who listen to a written text. That’s another reason you generally don’t want to skip levels in the hierarchy (like having a header 1 followed by a header 3). You may think that you have relatively few readers who use such tools, but I’d suggest that it’s always worth keeping accessibility in mind. Universal design will help more people than not, after all.

Here are some good guidelines on headers and accessibility by the Web Accessibility Initiative:

More about universal design here:

Yes! This is a fault in what I’m writing here, in part because I’m over-compressing. I started this series by accident. In part, though, I’m just not good enough. I’ve thought a bit about how someone using a screen reader might access my work, and I just don’t know enough.

I’m going to take from your comment and edit above now, so people don’t have to scroll down to it.

Leave a Reply

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