The evolution of the TELUS brand continues! The brand new Universal Design System is now available and all teams are encouraged to transition their applications to UDS components in order to better reflect the latest vision of the TELUS brand.
TDS Core and TDS Community will continue with limited support and restrict new feature requests.
While diving into this documentation, you’ll notice some new updates:
- We’ll provide direct links to corresponding UDS components from either tds-core / tds-community
- We’ll provide notice about deprecated components (that may not be implemented on UDS in the near future)
Contact us for more information on how to get support. And join our TELUS Slack channel for updates.
Typography
Overview
TDS's primary typeface is Helvetica Neue, a robust typeface with legible numbers that renders well at all sizes. It’s designed with precision and it commands respect, while remaining a friendly, sophisticated, and neutral typeface which never detracts from content.
Hierarchy
Hierarchy signifies importance by structuring something to be more or less obvious. It clearly communicates a change from one level of content to another. Typography uses weight and size to create hierarchy. Primary content uses large/body with varying headline and subtitle size and secondary content uses small/body.
Weight
Weight is used to create proportional contrast throughout the various sizes of typography. It’s intentionally applied to specific sizes to enhance readability and legibility across devices and platforms. Smaller sizes make use of heavier weights and larger sizes use lighter weights.
Scale
Scale creates consistency in sizing across elements. Modular scaling was used to set type sizing in a more meaningful way between devices and screen sizes. TDS uses "rem" units for all type so that it will scale appropriate based on the user's browser font size settings.
Body, links: Body copy is 16px across all devices and screen sizes.
Type leading
Type leading (in most cases) is the font size + 8px. However, in some instances it may be modified slightly smaller depending on the application.
Line length
The ideal line length for body copy is considered to be 50-75 characters per line with the inclusion of spaces. The best way to achieve an optimal character count per line is by putting constraints around how many columns your text block spans.
Too wide – if a line of text is too long, the user’s eye will have a hard time focusing on the text. This is because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to continue from the correct line in large blocks of text.
Too narrow – if a line is too short, the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress people, making them begin on the next line before finishing the current one (hence skipping potentially important words)
Usage
For guidelines on the usage of our font please refer to TELUS BrandHub. We do not recommend using any other type styles outside of the ones available in TDS. Please see the Typography components for implementation details.
Governance
The typography is mandated by the TELUS Brand team and should not be adjusted without explicit approval. If you would have any questions regarding implementation please get in touch with us.
Roadmap
- v1.0: Drop base font size from 20px to 16px
- Adopt a more complete modular scale to work responsively with various view ports and within the typestack
- Provide more guidance on use of colour with type