Assigning values for color, font, and font-size for a styled web game
When choosing colors and fonts for an Inform game, there are important considerations regarding legibility and photosensitivity. Readers respond differently to “light” and “dark” modes, and color choices can introduce eye strain or even headaches.
There is likely no perfect website, but there are resources and best practices available for authors to rely on.
The evolving APCA Contrast Method represents the current state of the art for evaluating color contrast in web pages. It evaluates legibility according to three characteristics:
- Color contrast (determined by
colorandbackgroundproperties) - Character weight (
font-weightproperty) - Character size (
font-sizeproperty)
Using an APCA contrast checker, authors can verify the legibility of in-game text.
Font selection is, itself, more art than science. Some choices, such as members of the cursive family, seem obviously poor. When in doubt, a little research goes a long way, as accessibility is a widely-discussed topic online. An internet search regarding a specific font will often prove productive, i.e., is Verdana an accessible font. Sometimes, fonts seem heavier or lighter than they would ideally be. The font-weight property can be specified to make text more legible in such cases.
Since modern websites (including ones made with Bisquixe) support in-browser zoom in/out, font-size is a starting point from which players can adjust. One consideration is that Apple’s iOS will “zoom” automatically on input fields with font sizes smaller than 16px, a behavior that authors and players alike may wish to avoid. In any case, the font-size property should comply with APCA guidance.
In many cases, options for both light and dark color schemes will be desirable. Strategies for providing such options will be identified in a future post.
Ultimately, though, web styling is simply another technical element of an Inform project that should be evaluated by testers. The guidance of this reference is to begin with best practices and end with playtesting.