Limit your font to 2 typefaces:
- A primary font that can be more decorative and unique to your app for title
- A secondary font, preferably a sans serif font for better legibility for all other texts.
Use larger font sizes for primary information such as titles to create a better hierarchy.
Use smaller font sizes and font weight for secondary information.
Large title 34pt
Caption - Font size should be no less than 11 pts to maintain legibility.
Material Design recommends using the type scale generator for creating type scale and corresponding code.
You can use a value checker to ensure that the combination of foreground and background color of your app passes the accessibility criteria (online tool you can use: https://contrast-ratio.com) or https://webaim.org/resources/contrastchecker/
WCAG 2.0 guidelines are categorized into three levels of conformance in order to meet the needs of different groups and different situations: A (lowest), AA (mid range), and AAA (highest).
To meet the level AA success criteria:
- Text smaller than 18 points must have a minimum contrast ratio of 4:5:1
- Larger text must have a contrast ratio of 3:1 or greater.
To meet the level AAA criteria:
- Text smaller than 18 points must have a minimum contrast ratio of 7:1
- Larger text must have a contrast ratio of 4:5:1 or greater.
Use a strong contrast between background and foreground colors.
If you use a dark background color button, it is best to use a lighter color font - example below with primary button.
You can use different shades of the same color as long as there is a strong light and dark contrast between the foreground and background colors (example with the secondary light green button and dark green text.)
Text doesn’t have to be 100% black (#000000), you can use a dark gray (#444444) over a light background to soften your style.
You can keep the overall look of your app very minimal and simple as long as you have a strong contrast between the text and the background.
The secondary button should be the receding one and the primary button the most prominent one.
Updated over 1 year ago