Type

Usage Guidance

The Sana Canvas Type System contains a range of contrasting sizes built upon the foundational principles of typographic design. The system is responsive, built using rem values with the base font size set to 16px (1rem), aligning to the base value for Sana Canvas Spacing. It’s flexible, and configurable, purpose built for Workdays diverse and growing product suite. In this section you will find the rationale behind the Sana Canvas type system, and what is available to use.

Typeface

The Sana Canvas Type system uses Roboto as its primary typeface, a typeface is a collection of fonts such as ‘Roboto Bold’ and ‘Roboto Bold Italic’. Sana Canvas utilizes Roboto’s monospace counterpart, Roboto Mono for specific use cases like tabular figures.

To use the Sana Canvas Kit font on web install and import the @workday/canvas-kit-react-fonts module.

Note: This module sources fonts from the Workday CDN.

Font Stack

The font stack contains a number of similar typefaces to support a series of fallbacks for circumstances when Roboto cannot be loaded on a user’s device.

Sans-serif font stack

'Roboto', 'Helvetica Neue', 'Helvetica', Arial, sans-serif

Mono font stack

'Roboto Mono', 'Courier New', 'Courier', monospace

Type Styles

The Sana Canvas type system contains a total of 12 type styles to create robust typographic hierarchies. They are informed by the Sana Canvas Type Scale to build a predictable and rational system. Styles are categorized by levels and sizes, there are 4 type levels, each level is coupled with 3 sizes. Each size applies fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, and color styles for you, so you can create consistent type quickly and easily. Type styles are highly composable and allow for easy modifications to be made such as changes to weight, color, and the addition of variants.

Javascript / Typescript

// styles.ts
import {system} from '@workday/canvas-tokens-web';
import {createStyles} from '@workday/canvas-kit-styling';
 
const headingStyles = createStyles({
  ...system.type.heading.small,
})
 
const bodyStyles = createStyles({
  minWidth: 48rem;
  ...system.type.body.small,
});

Note: We are using createStyles which wraps our tokens in var(--${tokenName}) and allows you to spread the token styles onto the element.

HTML

// index.html
<h2 className="cnvs-sys-type-heading-small">Heading</h2>
<p className="cnvs-sys-type-body-small">Body text</p>

Typescale

The Sana Canvas type scale is divisible by 2, this provides a wide range of type sizes to choose from. The divisible scale provides a logical order of predictable sizes. The scale is informed by Sana Canvas spacing principles to ensure consistent spacing is maintained in Workday’s UI when other elements are included alongside type.

Canvas Kit v5 introduced rem units (instead of px) to our type tokens. This update follows the guidance from the WCAG spec  and provides better support for users who change their browser’s default font size. If you’d like to learn more about rem and relative units, you can review this documentation on CSS values and units .

Note: We are using 16px as our base font-size for these values. This is a browser standard and also fairly common across Workday. However, if your body text is set to a value other than 16px, you will need to adjust that value for text to render properly.

Baseline Grid

A baseline grid is the foundation that type rests on. It is a series of rows that are used to create consistent vertical spacing with text. The Sana Canvas Baseline grid of 4px is also informed by Sana Canvas spacing principles, allowing uniform spacing to be maintained across Workday’s UI.

Line Height

Line height controls the amount of space between lines of text, line height is used to scale text proportionally and is directly informed by the Sana Canvas baseline grid to create uniform line heights across type styles.

Font Weight

Weight can add additional emphasis to typographic hierarchies, using weights can highlight the importance of the content displayed on a device. Sana Canvas recommends the use of Bold, Medium and Regular weights to support the majority of use cases encountered. These can be used on any level of the type hierarchy. Light weights are reserved for large sized text, the lower contrast of light weights makes it difficult to read at small sizes.

• Light - 300
• Regular - 400
• Medium - 500
• Bold - 700

Javascript / Typescript

// styles.ts
import {system} from '@workday/canvas-tokens-web';
 
const styles = {
  fontWeight: `var(${system.fontWeight.bold})`,
};

CSS

// styles.css
@import '@workday/canvas-tokens-web/css/system/_variables.css';
.bold {
  font-weight: var(--cnvs-sys-font-weight-bold);
}

Type Color

Using type colors applies comfortable contrast ratios to type and makes the content presented to the reader much easier to consume. Using the type colors provided by Sana Canvas will create texture in your hierarchies, building visual interest as well as indicating the function of typographic elements.

Type Variants

Variants allow Sana Canvas type styles to be modified beyond what is available by default, variants allow you to build detail on top of your typographic hierarchies that can aid your readers’ understanding of the information displayed in your products.

Javascript / Typescript

import {system} from '@workday/canvas-tokens-web';
 
const errorColorStyles = {
  color: `var(${system.color.text.critical.default})`,
};
 
const hintColorStyles = {
  color: `var(${system.color.text.hint})`,
};
 
const inverseColorStyles = {
  color: `var(${system.color.text.inverse})`,
};

Additional Considerations

For additional guidance when using All Caps, Hyperinks, and choosing appropriate Line Lengths in your products, please read the sections below.

All Caps

All Caps, or Uppercase characters reduces readability and can be visually overwhelming. All Caps can seem to shout at the reader when overused.

Hyperlinks

Hyperlinks are used to create shortcuts to other locations using the link variant, these should link to related information for the user to read if they wish. Hyperlink styles should be used sparingly as the high contrast style can become a burden to the reader if poorly implemented. Never embed a hyperlink into an entire paragraph of text, instead, embed a key word that relates to the information you wish to link off to.

Do

Embed a hyperlink into a key word.

Don't

Embed a hyperlink into an entire paragraph.

Line Length

Line length can determine the readability of paragraphs, the recommended number of characters in a line of text should range from 45-75 characters per line. Sana Canvas recommends 64 characters per line to produce comfortable paragraphs for optimal readability.

Web Examples

The type tokens are divided into three main parts:

• levels (the type hierarchy)
• properties (fontFamilies, fontSizes, and fontWeights)
• variants (modifiers for type styles)

Each part serves its own purpose but is also designed to be combined with the others. Knowing how and when to combine tokens is key to getting the most out of them.

Properties

As previously mentioned, you’ll most often you will want to reach for levels, but in some situations you may only need to set one or two type values for styling. Type properties give you an atomic-level of control when you want to explicitly set a particular value.

Web Example

Here’s an example using fontFamily, fontSize, and fontWeight.

import {system} from '@workday/canvas-tokens-web';
 
const customTextStyles = {
  fontFamily: `var(${system.fontFamily.default})`,
  fontSize: `var(${system.fontSize.body.small})`,
  fontWeight: `var(${system.fontWeight.medium})`,
};
 
const CustomText = () => (
  <p css={customTextStyles}>This is custom Roboto medium text using type properties.</p>
);

Font Families

Font Sizes

Creating Combinations

As previously mentioned, in most cases all you’ll need will be the levels of the type hierarchy. But these tokens can also be used to create style combinations when necessary. Below is a web example:

import {system} from '@workday/canvas-tokens-web';
import {createStyles} from '@workday/canvas-kit-styling';
 
const listItemBaseStyles = createStyles({
  padding: 0,
  ...system.type.subtext.large,
});
 
interface InverseListItemProps {
  isActive?: boolean;
}
 
const InverseListItem = (props: InverseListItemProps) => {
  const listItemActiveStyles = props.isActive
    ? {
        fontWeight: `var(${system.fontWeight.medium})`,
        color: `var(${system.color.text.inverse})`,
      }
    : {};
 
  return <li css={{...listItemBaseStyles, ...listItemActiveStyles}}>First List Item</li>;
};

Note: We are using createStyles which wraps our tokens in var(--${tokenName}) and allows you to spread the token styles onto the element.