Art Text

Only use fonts from Google Fonts or Adobe Fonts
Store the font files on Google Drive
Create a Read Me Google Doc of how fonts are used in the projects

Index

Process: 3 Ways to Integrate Text

Universal Design Guidelines For Text

Process: 3 Ways to Integrate Text

Narration Text Boxes

(required)

Rectangle with dark brown background and large, light text (min contrast ratio of 7:1)
Vary size for emphasis
Choose a font that is very readable and not in a handwriting style. Franklin Heavy Gothic (an Adobe font) was used in Susan's example below

The narration is in the dark box

Speech Bubbles

(as needed)

Curvilinear (can be hand drawn or geometric) with light brown background and large, dark text (min contrast ratio of 5:1)
May be used sparingly or not at all (depending on the writing)
Ovals or curvilinear-hand drawn with straight-lined tails
Tekton Pro (external link) Bold Condensed Oblique: (an Adobe font) was used in Susan's example)

A quote would be in a speech bubble

Full Text Screen

(as desired)(in place of narration text boxes)

There may be situations where this make sense: like when a quote or statistic is emphasized. Note: this particular example (below) contains text that does not meet the universal design contrast requirements.

This image shows an example of a screen made up of predominately text written in a handwritten styled font that reads "That's 40 Million People" all behind a purple painted background

Speech Bubble Style Guide for Prattis: see the Auto Kern is off and set to -15 spacing between lines.

Universal Design Guidelines For Text

Type-Setting

Keep the text close to the action and compact.
Transitions between words and phrases should be short (0.0-0.5 seconds (0-12 frames))
Keep the text on the screen a little longer than the audio narration. This will allow extra time for slow readers.
Should be left-aligned in most cases when there is a large volume of text.
Split up the dialogue into phrases, not sentences, and leave out punctuation.
1. Incorrect
  - Bob and Susan
  - Miller are at the movies.

- Correct
  - Bob and Susan Miller
  - are at the movies

This text is generally easy to read and stays on the screen long enough. Some of it is too low contrast however.

This text is hard to read and does not stay on the screen long enough.

Text Color & Contrast

The text should be high contrast against its background (light on dark or dark on light). Use the Wave Contrast Checker (external link) . To ensure it is between 4.5:1 and 16:1 (over 16:1 cause issues for person's with light sensitivity.

Image showing I. See. U color palate showing a variety of different colors that are color blind friendly.

Testing Your Color Combinations for Color-blind Efficacy

Use the Chromatic Vision Simulator (external link) to ensure that the color combinations work for color-blind persons. It is a mobile app that runs on both the Android and iOS mobile operating systems. with the app running, designers can simply aim their phone camera at any digital display, physical print, object, or environment and it will simulate three types of color-blindness (with side by side options). (free)

Picture of a person's hand holding a phone to a laptop, and using an app to test color blindness. The screen on the phone is split showing two variations of the image on the laptop showing different types of colorblindness.