Skip to content
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.
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.
3. Aesthetics
Last edited 603 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:
*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: ,
Contrast
These will help everybody and particularly players with visual disabilities.
Minimum recquirements
Make sure that:
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: , , ,
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.