Typography
Last updated
Was this helpful?
Last updated
Was this helpful?
Typography is a crucial part of a design system, ensuring consistency, readability, and usability across different platforms and devices. Good typography rules help present content clearly and efficiently.
DIGIT Typography uses the typefaces Roboto and Roboto Condensed.
Headings establish the visual hierarchy of the content, guiding users through structured information. They range from large titles for prominent sections to smaller subheadings for organizations.
headingXl
Used for main page titles.
32px
36px
40px
headingL
Suitable for section headers.
24px
28px
32px
headingM
Used for subsections or feature highlights.
20px
22px
24px
headingS
Ideal for smaller titles and labels.
16px
16px
16px
headingXS Used for minor headings and annotations.
12px
14px
14px
Body text is the primary content in paragraphs, articles, or instructions. It should be readable, well-spaced, and appropriately sized for different devices.
bodyL
Used for general reading content.
16px
20px
20px
bodyS
Ideal for supporting information and descriptions.
14px
16px
16px
bodyXS
Used for less prominent text, such as disclaimers.
12px
14px
14px
Captions text provide supplementary information, often appearing in smaller font sizes below the primary content
captionL
Used for standout short descriptions.
24px
28px
28px
captionM
Suitable for explanatory notes.
20px
24px
24px
captionS
Best for minor clarifications and subtitles.
16px
20px
20px
Links are interactive text elements used to navigate or perform actions. They are always underlined to indicate clickability. They all have the same scale across all breakpoints.
linkL
Used for large link buttons
20px
linkM
Used for medium link buttons
16px
linkS
Used for small link buttons
14px
Button text is designed to be clear, actionable, and distinguishable from other text elements. It maintains a bold style for better visibility. They all have the same scale across all breakpoints.
buttonL
Used for large buttons
20px
buttonM
Used for medium size buttons
16px
buttonS
Used for small size buttons
14px
Heading And Caption
Heading and Caption use a 1.14× multiplier for Roboto and Roboto condense.
Body and Link
Body and Link use a 1.37× multiplier for Roboto.
Use defined font sizes
Choose from library defined font sizes. By using unique font sizes, you risk upsetting the hierarchy and balance of typography in your product.
Don't use underlines for adding emphasis
Underlines are reserved for text links only. They should not be used as a way for adding emphasis to words.
Respect capitalization rules
Use sentence case for all UX content.
Use tabular numbers for numerical data
Numbers within components should be tabular with lining figures. In tables, numbers should be right aligned to make numerical data easier to read and compare.
Don't let paragraph widths get too thin
Paragraphs of text that are too long are difficult to follow, and paragraphs of text that are too thin are difficult to read. Ideally, blocks of text should be roughly 70 characters wide. Be sure to keep them at least between 50 and 120 characters wide.
Keep content short and to the point
Keep paragraphs concise. Some users with cognitive disabilities (and even those who don’t) can have a very difficult time reading and comprehending large blocks of text.
Don't use indentation
Paragraphs of text should not be indented.
Don't fully-justify text
Do not use fully-justified blocks of text. This adds trapped white space within paragraphs, which makes it harder to read, especially for those with cognitive disabilities or dyslexia. Right alignment (left rag) is also discouraged for paragraphs of text.
Typography component pairing
Heading, body, caption, and link typography components can be paired together in order to create balanced relationships while enforcing hierarchy of content. By default, this can be done by using text block components with the same size. Relationships may sometimes need to be more or less pronounced, so in those use cases, it’s acceptable to combine your own selection of sizes as long as you’re maintaining consistent hierarchy.
