Design 101: Typesetting

There’s a lot of thought that goes into self-publishing. If you’re an author, you’ve probably given a lot of thought to a few key things about your book such as the jacket, the title and the content. If you’re a reader, these are probably the things you regularly pay attention to as well. Have you ever thought about the interior of a book? How the pages are laid out, the margins set up, or the style of the chapter headings?

If you haven’t thought about those things, that means that the person behind the book did a good job typesetting. Typesetting is the process of properly setting the text on to the page of a publication. Bad typesetting can completely ruin the reader’s experience and interrupt the flow of the book. The last thing you’d want is for a reader to stop paying attention to your carefully crafted work because the spacing between lines is uneven!

When self-publishing, you will eventually have to deal with typesetting. Here are some simple dos and don’ts of this book design fundamental:

Don’t think it’s a simple job.

Typesetting on the surface sounds like it would be easy. After all, you have probably used word processors like Google Docs or Microsoft Word before. These programs can handle simple design tasks, but when it comes to the nitty gritty, they can’t handle a book interior. Which leads me to…

Don’t choose the wrong software.

It may be easy to try and make a program like Word work for you- you already own it and are familiar with it. However, word processing programs are not built for typesetting. While they may be able to handle some basics such as kerning, margins, and fonts, they are frustrating to use. Bending a program to try and fit your needs is harder than using a program built for typesetting. I have used Adobe InDesign for typesetting in the past and highly recommend it. Other programs include LaTeX, Reedsy Book Editor, or Bookwright by Blurb. 

Do study up on the basics.

There’s probably a lot of terminology and best practices that you won’t know going in. Typesetting is not easy to do well. I suggest looking over Canva’s illustrated typography terms to get an idea of popular terms. Typography and typesetting are different, but they have a lot of overlap! After that, start reading up on things like font choice or industry standards.

Do consider hiring a professional.

Let’s face it: you’ve got a lot going on already when you’re self-publishing. If you don’t have time to sit down and learn how to typeset properly, it might be best to hire someone. A professional will already have the appropriate software, the knowledge of how to use it effectively, and should be intimately familiar with the best practices. There’s a lot of typesetters out there who have a skillset to match your project. It may cost more than DIY, but the result will be less frustrating and more professional. 

If you found this helpful, check out our other blogs on design and self-publishing.

Accessible Design: UI Choices

Accessibility in design, when presented online, extends far beyond the visuals. My last two blog posts in this series focused on color choice and font choice. This post will focus on some more technical aspects of accessibility. These have more to do with user interface, or UI, design and accessibility. Good UI can make or break how some people interact with your content.

UI Essential: Alt-text

I briefly brought up the use of screen readers when I wrote about font choice. Screen readers are a tool that visually impaired users may rely on to navigate the web. Their name is self-explanatory; screen readers read text aloud for users who cannot read. However, text is usually the only thing that screen readers pick up on. They cannot interpret pictures. If you want a user to know what is presented in an image, then you need to use something called “alt-text”. Alt-text is found either in the metadata of an image or in the caption of an image. Some website managers allow you to add this metadata when you upload an image. If you use WordPress, for example, you may have even noticed a box labeled “alt-text” when you upload images.

It is useful to provide alt-text for any non-decorative images. For instance, if a restaurant’s website has an image of their menu uploaded, the alt-text should list off the items on the menu. The same goes for charts or diagrams that rely on visual elements. Otherwise, the information will be inaccessible to a user with a screen reader. With images that don’t have text, you can provide a description. Aim to be as descriptive and concise as possible. A user doesn’t need every little detail, but adding some flair is nice. Using proper alt-text conveys valuable information and makes for a more inclusive experience. If you’d like to include alt-text in social media, you can do so in the description or caption of your image-based posts. It won’t affect the metadata of the uploaded image, but a screen reader will catch it.

Keyboard Access

Making a website keyboard accessible is another technical design element. Many users, both with and without disabilities, rely solely on their keyboard to use their computers. It can be a very efficient way to complete a workflow. It is important that your web page follows some basic, standard commands. For instance, every element should be selectable using the tab key and either the space bar or the enter key should activate an element. These are just a couple examples. For a much more thorough guide, you can consult with WebAIM’s guidelines for keyboard accessibility. 

This one can be a bit harder to implement on social media since you don’t own those domains and can’t edit the code. How accessible those websites are is largely out of your control. However, many people do create their own blogs and websites. If you have a website, keep this in mind when selecting a pre-made theme or customizing one through code.  

I hope this has made you more aware of some of the ways people use the web. Remember that it is, however, only a small sample of the ways you can make things more accessible. The more you think about unique user cases, the more accessible you can make your content!

Accessible Design: Fonts

Most of our daily activities involve reading text in some way, but we usually don’t stop to think about it. When you read the nutrition facts on the back of your morning cereal or pick up your tablet to scroll through the morning news, you don’t consider the typeface you’re looking at. In many cases, this is a good thing. Reading would be very difficult if we had to pause and look at every word or character. Information designed to be accessible should not make a reader struggle. Previously, I discussed some of the basics of how to choose a font. This time, I will be looking at font choice through the lens of accessibility. There are two main ways to achieve accessible design using fonts: consistency and familiarity.

Consistency in Accessible Design

First and foremost, you should stick with one or two fonts in your designs. A separate font for a header and body of text are acceptable. It can help readers easily find what they are looking for. Using too many fonts close together, however, can be confusing. It will make a reader stop and think about what they’re looking at. When reading text, flow is important to understanding. Anything that interrupts that flow makes it less accessible. This can also include using fonts that don’t have even spacing between characters, often referred to as kerning.  Wide gaps between characters can cause a reader to stumble, whereas small gaps can simply make words unreadable.

font samples

Consistency can also mean making sure the font you choose has uniform serif or not. Serif refers to the decorative “tail” that letters sometimes have (Times New Roman is an example of a serif font). Sans-serif fonts, like Arial, do not have these decorative marks. There is ongoing debate over which type of font is better for reading in print versus digital. The more important thing is to choose one style and stick with it.

Font Familiarity

There are several standard fonts that are widely available on most devices, such as the previously mentioned Times New Roman or Arial. Using any of these well-known fonts will foster familiarity in a reader. Fonts that are similar to them will do the same. Again, the reason is so the reader doesn’t have to waste any time thinking about what they’re looking at. Characters need to be easy to distinguish. There is a time and place for a fancy script or a bubbly font but limiting it to non-essential information is good accessibility practice. When you want to show something clearly, simplicity is best.

In addition, avoid using highly specialized characters on the web unless they’re appearing in a graphic. People with impaired vision often use screen readers to browse the internet. These special characters often look like a font change to a sighted user, but they cause screen readers trouble. If you’d like to hear how screen readers interpret some special characters, please check out this video from Twitter.

If you found this useful, check out my previous blog about accessibility in design!

Accessibility in Design: Color Choice

Previously, I held a job for a large tech company working in quality assurance. I tested software from an end-user perspective to make sure things worked as intended when the code was changed. One of the most important and often overlooked aspects I tested was software accessibility. Accessibility can range from ensuring screen-readers pick up all text on the screen to checking that keyboard commands work. However, it also covers how your software and its graphics appear visually. Drawing from what I learned, I’d like to extend some tips to help make your designs widely accessible. The first design element I’ll be covering is color choice. 

Color Contrast

One of the first things I learned to test for when considering accessibility was contrast. Like many programs, our software even had a “high contrast” mode.  The point of high contrast is to make it easier for people with weaker or strained eyes to distinguish things like text or icons from the background. While it may be jarring at first, easily distinguishable colors put less stress on your eyes long-term. The minimum accepted ratio for high contrast colors is 4.5:1 between the foreground and background, according to WebAIM’s accessibility guide. However, there are different levels of contrast that correspond to different levels of accessibility. For instance, the Web Content Accessibility Guidelines says that a 7:1 ratio is necessary for a AAA level of contrast. Note that neither of these are legal guidelines for the private sector, but rather a best practice.

There are tools out there that make finding this ratio easy. I recommend using WebAIM or Colorable if you’d like an easy, browser-based tool.

Color Choice and Accessible Design for Colorblindness

Did you know that around 8.5% of the world’s total population is color-blind? It’s important to take this large group into consideration, especially when trying to communicate essential information to your audience. Since the most common type of colorblindness is the red/green varietal, avoid using green and red in conjunction with one another. Layering red text atop a green background might be difficult for a lot of people to read.

However, as there are several types of colorblindness, some designers suggest that using color alone to differentiate crucial elements is bad practice. For example, a clothing website might want to list the color options by name instead of swatches alone. A website that uses status notifications should make their icons different shapes as well as different colors. Using both patterns and color to distinguish segments on a map would make it easier to tell the sections apart. There’s a lot of ways to combine color with other design elements to make it accessible to that 8.5%!

When designing something with colorblind users in mind, it can help to simulate what colorblind people will see when looking at your work. Sim Daltonism is a great option for Apple users, while VisCheck offers a program that PC users can download.

A lot of these guidelines were made with web and software design in mind. However, it can’t hurt to keep some of these suggestions in mind when designing graphics for social media. When trying to build a brand, you need to send a clear message about yourself. People should be able to tell what that message is without struggling. If they can’t read the text or understand the graphics they’re presented, they’ll never be able to do that. It’s a small step you can take towards making the web friendlier and more accessible!  

If you’d like to see more about graphic design, please check out the graphic design tag for our blog feed.

Are You Still On-brand?

Branding is a vital part of developing loyalty and trust around your products and services. But straying away from your preset branding standards is also very easy to do. This is especially true if they don’t represent you or your brand in a way that interests you. 

How do you check your branding?

I suggest starting simple and looking at your visual identity and tone to see if you applied them consistently over the last six months. As a social media strategist, I will be focusing primarily on branding on social media

Does your brand have a style guide?

A style guide will make creating content faster and more consistent. The goal of producing consistent — but not dull — visual content on a platform like Instagram is having people recognize your content as yours without seeing your name or logo. 

A basic style guide should include your fonts, color scheme, and a mood board that encompasses the style you want for your brand.

Your style guide should come from competitor research and acknowledge the psychology behind the colors you choose and the styles of type to be truly effective. You feel different when you see something written with a script font as opposed to a display font, right?

Do you have a set tone?

Some brands are funny and light-hearted while others are serious. For example, Moon Pie on Twitter has a hilarious persona. It would be jarring if they suddenly started tweeting as if they were a more serious brand like Politico.

In that same sense, if you switch between wildly different tones and do not have a strong reason for doing so (i.e. commenting on something serious and values-based as a comedic account) it can disarm your audience and make them distrust your voice. 

Are you keeping your content relevant to your goals?

You may be catching a theme here which is that consistency is key for maintaining your brand. Similarly, your content needs to help promote your social media goals (and business goals) consistently. 

This means you need to talk about things that are relevant to your brand. As an example, we are a digital public relations firm that has a sister publishing company. Therefore, we talk about social media, publicity and branding tips for authors that are published by small publishers or independently publish. 

In addition to the tips, we also share content that jumps on trends that relates to books and the reading community. (Check out our blog about bookstagrammers to see how we leverage Instagram to create digital publicity for authors.)