3. Aesthetics

Last edited 77 days ago by Matthieu Jeunet

Ease players' perceivibility by leveraging the principles of visual information such as hierarchy, colors, contrast, typography, space, and animation.

Text readability

⁠

These will help everybody and particularly players with visual and cognitive disabilities.

Minimum recquirements

For body text:

Make sure body texts are at least 16px* when working @1x.

Use a highly legible typeface, preferably a sans-serif one. If you use a highly stylised typeface, provide an option to switch to a more legible typeface for everyone.

For left-to-right language, always left-aligned the content. For right-to-left language, always right-aligned the content.

Set the line-height at 1.5 the size of the body text.

Use sentence case (avoid full caps or full italic).

Keep each line to no more than 70 characters.

*This reference size is for tools like Figma or Photoshop working @1x. It means that the frame/artboard size is at 640 x 360 pixels, not points. Multiple these values by 2 or 3 if you are working @2x (@720px) or @3x (@1080px). Finally, make sure to find the right equivalent when integrating as engines and tools within engines may have units that differ.

Best practices

Work in progress

Potential useful tools/plugins:

Accessibility: Text Resizing (free)⁠

Dislectek Unity Plugin (free)⁠

⁠

Contrast

⁠

These will help everybody and particularly players with visual disabilities.

Minimum recquirements

Make sure that:

Body text has a 4.5:1 "4.5 to 1" contrast ratio against the lightest color it appear over.

Large text and non-text elements (like buttons or icons) have a 3:1 "3 to 1" contrast ratio against the lightest color they appear over.

It is also recommended that you test for and avoid contrast issues for common types of colorblindness using Color Oracle.

Best practices

Work in progress

Potential useful tools/plugins:

Color Pro (paid)⁠

WebAIM - Contrast Checker (free)⁠

Color Oracle - Colorblindness (free)⁠

Figma Contrast Checker Plugin⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.