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 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 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 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 (in most cases) is the font size + 8px. However, in some instances it may be modified slightly smaller depending on the application.
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)
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.
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.
- 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