3.5 Min Read
10 May, '22
.png)
What is a type system
Typography is often one of the foundational components you will want to get a handle on, as it will need to work harmoniously with other elements like icons and UI controls. As we design and code usable, consistent, beautiful interfaces using systems, it’s essential that a strong foundation is established.
Consistent and readable typography will help scale multiple applications and devices without complicating the transition between designers and developers.
Google has provided guidelines to their Material designs type system, which makes it easy to repeatably apply a collection of properties (like line height and size) to text objects in your system.
The type scale
The type scale is a selection of font sizes that we use to represent different text elements in order to establish a balanced and harmonious composition in products while remaining consistent and recognisable.
When customising a typestyle, the change cascades down to all the components that use that style. For Example, changing the “button” style will inform the typography of all components that use the button typography style. Headline styles are more flexible, and they include a rich information hierarchy and a range of options for presenting headline content.
.png)
This example displays font Hierarchy through differences in font-weight (Light, Medium, Regular), size, letter spacing, and case.
Type scale generator
Google's type scale has a combination of thirteen styles that are supported by their type system. Google's type scale generator is a tool for creating type scales and corresponding code. Any font you choose is automatically resized and optimised based on Material typography guidance for readability.
Type considerations
A lot of factors are involved in deciding which font to use in your system. Consider things like App performance, personality, multiple systems, readability, scalability, fallbacks and pairing.
Typefaces can be another touchpoint to help subtly convey the right tone and personality throughout the digital experience. If the brand has a unique typeface, not ideal for extended reading or small sizes, consider using it for display sizes, like headlines that are used less frequently. In this case, a more legible typeface for most of the typography that will appear in smaller sizes should be considered.
While legibility is determined by the characters in the typeface, readability refers to how easy it is to read words or blocks of text, which is affected by the style of a typeface.
.png)
Colour considerations
Colour also plays an essential role in the established type states of an interface, such as primary, secondary, interactive, disabled and error. Colour text should be used sparingly to attract attention and apply selective emphasise.
It is important to consider text legibility when applying colour. All text should be legible and should meet accessibility standards. Ideally, the coloured text should be reserved for text elements such as headlines, buttons, and links. Google has provided the material colour tool, which determines if certain foreground colours used on text pass accessibility standards on background colours.
Check marks indicate whether a text colour is legible in front of a background.
Check marks indicate whether a text colour is legible in front of a background.
Insights
Stay up to date with the latest designs, user experience and free industry insights.
