In Digital Assistant typography is controlled through a dozen CSS classes which all use the same font-family you can define in the body of your page.

Best practices

Create a typographic hierarchy

Digital Assistant has recommended sizes for Card elements to help create an easy to scan information hierarchy. Be selective with the size you choose and consider how the typographic hierarchy of the Card can help the user consume the key information at a glance.

Different font-sizes create a typographic hierarchy

Use one type family

By default Digital Assistant uses the system font of the user's device, i.e. San Francisco on iOS devices, or Segoe UI on Windows. These fonts are web-safe but also render seamlessly on the device. You can however use your corporate font instead. If you do, ensure that it is used consistently as it gives a more intuitive UX.

Use bold sparingly

Digital Assistant's visual language should be lightweight and easy to scan. Overusing bold can make an interface heavy and difficult to identify important information, however it makes sense to use it some applications, e.g. to highlight a selection or callout a warning.


Headlines are used to denote the title of your content or to call out key information, e.g. "You have 8 tickets". Headlines come in different sizes and you should choose one so that the content ideally doesn't have to wrap into a second line.

Use the below class names to style your content.


All other text is mostly used to write paragraphs or indicate secondary information, details or fine print. These are the classes you can use.

Font weights

Font weights can be used to further format and accentuate texts or labels.

You can combine font-weight classes with other font size classes, for example:

You can also customize which font to use for Digital Assistant.