Design Considerations

Players will spend quite a lot of time with your story simply reading its text, so they deserve a well-considered experience. Which is not to say the experience should always be comfortable. Cara Ellison's Sacrilege has a searing purple background for its text and bright yellow links that turn green when you point at them, but all this is in service to its content. Sacrilege's story is, in part, about the sensory overload of a nightclub, so it's fitting that the text itself somewhat overload the player's senses.1

Fortunately, people have been designing reading experiences for centuries now, and there's quite a lot of accumulated wisdom on how to use type gracefully.

  • If you're new to typography, the best first port of call is Matthew Butterick's Practical Typography. Butterick is opinionated and a bit patrician in some of his pronouncements, but his basic ideas are sound, and he takes the Practical part of the name of his web site seriously.

  • The Yale Web Style Guide's chapter on typography is also worth reading, though it is intended for web designers and developers, who must build pages from the ground up.

  • If you find yourself truly intrigued by typography, it's worth tracking down a copy of The Elements of Typographical Style.

There is also a strange kind of science to selecting colors.

  • If you've never delved into color theory, try starting with with the Color Schemes chapter of Rune Madsen's Programming Design Systems. It uses code examples using a programming language called Processing, but you can safely skim over them. If you find yourself intrigued by the subject, try the rest of Madsen's section on color.
  • Khan Academy has a free online course on the science of color that talks about both how our eyes and brains perceive color, and the different color models used to represent color.
  • There's no substitute for simply playing with color. The best tool online for this is perhaps Adobe Color CC, which is beginning to show its age but is still useful.
  • WebAIM has a contrast checker that ensures that the color scheme you design has sufficient contrast for low-vision players. Your colors should pass the WCAG AAA criteria for normal text.

Try playing it, even for a little, then go back to the plain-jane white background of a typical web site. You'll see afterimages.