47 lines
6.5 KiB
HTML
47 lines
6.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Zk | Layout and Design - Reducing barriers between story and reader</title>
|
|
<link rel="stylesheet" type="text/css" href="/style.css" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<meta charset="utf-8" />
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>Zk | Layout and Design - Reducing barriers between story and reader</h1>
|
|
</header>
|
|
<article class="content">
|
|
<p><span class="tag">writing</span> <span class="tag">non-fiction</span> <span class="tag">essay</span> <span class="tag">video-essay</span></p>
|
|
<p>There’s no denying that the lion’s share of the work that goes into a book is the writing. Obviously, that’s the part that writers sweat over, the bit that takes the longest, and the heart and soul of a book.</p>
|
|
<p>It’s not <em>all</em> that makes a book, though.</p>
|
|
<p>When you’re getting ready to publish a book, though, you don’t just slap all your text into a document and send it to a printer. There’s a step between finishing the words and sending a book off to the printer: layout and design. It’s not one you should skip out on, either!</p>
|
|
<p>The point of layout and design isn’t just to fit all of your words onto a page of certain dimensions. One can do that easily enough with no further thought by just changing the page size in one’s word processor, after all. The goal of book design is, rather, to reduce the barriers between words and reader. Good design makes your story shine through, while bad design causes unnecessary friction on the reader’s end.</p>
|
|
<p>The oft-maligned widows and orphans - single lines of text belonging to larger paragraphs at the beginnings and ends of pages are an example of this. While sometimes they are unavoidable, you should strive to reduce their occurence, especially around page-turns or at the end of a sentence., where a widow or orphan might cause the reader to stumble.</p>
|
|
<p>If there is one thing that can be said about page layout, it’s that you need to give the text room. This shows up in a few different ways, but the most obvious is in the margins.</p>
|
|
<p>A book is a physical object designed to be held, so you will obviously need room on the pages for them to be held. More than that, though, surrounding text by a margin keeps the eyes from being distracted tryin to intepret things outside the page as part of the text itself. You can think of it like watching a movie in the theater, where the area around the screen is kept dark and distraction-free so that your eye is automatically drawn to the action.</p>
|
|
<p>A good default margin is a half an inch on top, bottom, and outer margins, and at least three quarters of an inch on inner margins. Note that <em>all</em> text should be within the margins, including headers, footers, and page numbers.</p>
|
|
<p>I say ‘at least’ when it comes to the inner margins because, even when a book is laid flat, the valley between the open pages will take up some visual space. The thicker the book, the more space that will be taken up here, too. If you have a three-hundred page book, three quarters of an inch might work alright, but at four hundred pages, you might see readers straining to read text closer to the inner margins and want to bump it up to 0.875 inches. At six hundred pages, you might even consider one inch margins.</p>
|
|
<p>Letting text breathe doesn’t just mean margins, though. You’ll want to set an appropriate line height for your text. While you can get into the nitty-gritty with vertical rhythms and all, a sensible default is one-and-a-half spacing. Having text that’s too closely spaced together when the goal is a smooth parsing can lead to skipping or re-reading lines. This is particularly important in fiction text where reading sessions are longer and eye strain is a consideration.</p>
|
|
<p>On that note, font selection is something that is also worth taking into account. For interior text, there’s not really much room for inventiveness. You should stick with a simple, easy-to-read serif font. Not being inventive doesn’t necessarily mean not showing some personality aligned with your plot: a calm, slightly bolder face like Gentium Book Basic fits better with a literary fiction setting, while something more angular such as Garamond might fit better with a more action-packed plot.</p>
|
|
<p>If you need to include multiple fonts in the text, such as something for chat dialogue or letter headers, make sure to limit the choice so as not to exhaust the reader.</p>
|
|
<p>That covers the main text of the page, but you can also add a bit of variation with the headers and page numbers. If you decide to include a header, with the book or chapter titles and the author’s name, you can vary things up a little bit there, though again, try not to distract from the story itself.</p>
|
|
<p>Where you can be more interesting with fonts is on the title and half-title pages. A bold, wobbly font such as Luckiest Guy would work well for comedy, while Orbitron would fit well with a a science-fiction setting.</p>
|
|
<p>Searching for fonts can be one of the more fun aspects of layout. Google Fonts is an excellent resource — all of the fonts mentioned above are available there. Many of their fonts are under the Open Font License which allows usage online as well as in print. Simply view the specimen for the font and look for the link to the font’s source.</p>
|
|
<p>From there, you’ve got the interior largely complete. If you have interior art, you’ll have to consider whether or not the images will be full-page or not, and if not what sorts of margins you would like around them so as not to be too crowded.</p>
|
|
<p>However you layout your book, whether through Microsoft Word, LaTeX, InDesign, or something else, simply keep in mind that the best page design should be invisible to the reader, and that if they remark on anything, it should be the story itself. Stay out of the way and make life easy for them, and you’ll have done your job well.</p>
|
|
</article>
|
|
<footer>
|
|
<p>Page generated on 2021-01-03</p>
|
|
</footer>
|
|
</main>
|
|
<script type="text/javascript">
|
|
document.querySelectorAll('.tag').forEach(tag => {
|
|
let text = tag.innerText;
|
|
tag.innerText = '';
|
|
tag.innerHTML = `<a href="/tags.html#${text}">${text}</a>`;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|