Fonts and Colors

The easiest way to customize your story's fonts and colors is with the Style backstage tab¹, which sets values in the config.style object for you. As you make changes in that tab, your story's appearance will automatically update, so you can easily experiment to find a look that fits your story. However, changes you make will not be permanently saved. The next time you test or play your story, it will revert back to its previous appearance.

In order to make changes in the Style tab permanent, you must copy the code in the Config panel at the top of the tab into your starting passage's vars section. (This passage is shown with a rocket-ship icon in Twine's story map.) Clicking anywhere in the box the code sits in will automatically select all of it to make copying and pasting easy.

Doing so will cause the appropriate variables to be set when your story first begins--which doesn't mean that it has to be the only appearance your story takes on. You can change variables in the config.style object in a later passage's vars section and your story's appearance will change when the passage is visited. You could use this, for example, to denote a dream sequence or flashback.

The other panels in the Style tab, Page, Header, and Footer, all have the same fields. As you might guess, Page sets the base style of your story and Header and Footer govern the areas above and below the main text. By default, Chapbook stories don't have a header.

The values you set for page, header, and footer styles inherit from each other. That means that if a header or footer style value isn't set, it will use the corresponding page value instead. If a page value isn't set either, Chapbook's default style will be used instead.

Setting Text Style

Chapbook uses a concise notation for specifying text style. Below is a simple example:

Palatino 18

This sets a Palatino typeface at 18 pixels tall.² But in actual use, you ought to use something like this instead:

Palatino/serif 18

Slashes separate alternate typefaces in what is called a font stack. Before the advent of web fonts, font stacks were a crucial part of web design. At that time, web browsers were only capable of displaying fonts installed in the operating system, so designers had to specify alternate typefaces in order to create a consistent appearance across different operating systems.

In our current times, font stacks affect more what a page looks like at first glance--typically, text appears immediately in a system font, then in a web font after it finishes loading. (See External Web Fonts for details on how to use a web font with Chapbook.) But there are players who will have disabled web fonts, either out of personal preference or a need to save network bandwidth, and it's good practice to design your story to accommodate that.

The example above indicates that if a typeface named Palatino isn't available to the player's web browser, serif signals it should fall back to a generic serif font.³ If you'd like to set your story in Helvetica, you might use:

Helvetica/Arial/sans-serif 14

Many people viewing your story using a Windows computer won't have Helvetica available, but they almost certainly will have Arial, Microsoft's Helvetica competitor, and if for some reason they have neither, the story will use whatever sans serif font is available.

When specifying typefaces that have spaces in their name, you don't need to do anything special:

Times/Times New Roman/serif 20

You can also modify a font with the words bold, italic, underline or small caps. If you'd like to use multiple styles, put spaces between them:

Palatino 18 bold italic

There is a special font style named regular, which removes any bold, italic, underline, or small-cap styling that the font would normally inherit.

Font styles must be entered in all-lowercase. This is because you can omit parts of the declaration. All of the below are valid font notations:

• Palatino
• 18
• bold italic
• Palatino bold
• 18 small caps

The omitted parts are inherited as described above.

Colors

Although you don't have to use it, Chapbook includes a color palette called Reasonable Colors created by Matthew Howell. Reasonable Colors is designed to make designing accessible and attractive color combinations easy.

There are 25 hues, and each hue has 6 shades:

To use a particular shade, enter the name in its box, e.g. yellow-6. To ensure that text has enough color contrast, choose two shades that have at least a numerical difference of 3. That is, yellow-6 on a yellow-3 background has sufficient contrast, but red-5 on red-3 doesn't. The Reasonable Colors site also has suggestions on colors that will complement a given hue--choose a hue to see detailed information--but you don't have to follow these suggestions, of course.

You can also use any other color notation that web browsers understand, from the traditional hex triplet notation (e.g. #0b7285) to more modern ones, such as hsla(0%, 65%, 48%, 0.75).

When setting colors in config, often you can specify both a background and foreground. For instance, you can set config.style.page.color to 'orange-4 on orange-1'. However, when specifying a border color, for instance config.style.page.link.lineColor, only the foreground is used.

As with fonts, you can omit parts of a color declaration. Setting config.style.page.link.color to 'on blue-3' causes links to use the page's foreground color, whatever it may be, but use a medium blue as background.

Open Color (deprecated)

Version 1 of Chapbook included a different color palette called Open Color. You can continue to use it, but this palette will be removed in version 3 of Chapbook. To continue to use these colors, add oc- in front of their name: i.e. oc-red-6 or oc-gray.

The full list of hues and shades available in Open Color is available on its project web site.