Typography

Typography establishes content hierarchy in your app, and is a key aspect of shaping its readability. It plays a crucial role in how your app looks, feels, and effectively communicates content to users.

import Typography from '@dynatrace/strato-design-tokens/typography';

Typography.Display

Sample	Token Name	Value	Description
Aa	Typography.Display.Level1.Family Typography.Display.Level1.Weight Typography.Display.Level1.Size Typography.Display.Level1.LineHeight Typography.Display.Level1.TextDecoration Typography.Display.Level1.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 600 64px 1.1875 none none
Aa	Typography.Display.Level2.Family Typography.Display.Level2.Weight Typography.Display.Level2.Size Typography.Display.Level2.LineHeight Typography.Display.Level2.TextDecoration Typography.Display.Level2.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 600 56px 1.2142857143 none none
Aa	Typography.Display.Level3.Family Typography.Display.Level3.Weight Typography.Display.Level3.Size Typography.Display.Level3.LineHeight Typography.Display.Level3.TextDecoration Typography.Display.Level3.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 600 48px 1.25 none none

Typography.Heading

Sample	Token Name	Value	Description
Aa	Typography.Heading.Level1.Family Typography.Heading.Level1.Weight Typography.Heading.Level1.Size Typography.Heading.Level1.LineHeight Typography.Heading.Level1.TextDecoration Typography.Heading.Level1.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 600 32px 1.25 none none
Aa	Typography.Heading.Level2.Family Typography.Heading.Level2.Weight Typography.Heading.Level2.Size Typography.Heading.Level2.LineHeight Typography.Heading.Level2.TextDecoration Typography.Heading.Level2.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 600 28px 1.2857142857 none none
Aa	Typography.Heading.Level3.Family Typography.Heading.Level3.Weight Typography.Heading.Level3.Size Typography.Heading.Level3.LineHeight Typography.Heading.Level3.TextDecoration Typography.Heading.Level3.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 600 24px 1.3333333333 none none
Aa	Typography.Heading.Level4.Family Typography.Heading.Level4.Weight Typography.Heading.Level4.Size Typography.Heading.Level4.LineHeight Typography.Heading.Level4.TextDecoration Typography.Heading.Level4.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 600 20px 1.4 none none
Aa	Typography.Heading.Level5.Family Typography.Heading.Level5.Weight Typography.Heading.Level5.Size Typography.Heading.Level5.LineHeight Typography.Heading.Level5.TextDecoration Typography.Heading.Level5.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 600 16px 1.5 none none
Aa	Typography.Heading.Level6.Family Typography.Heading.Level6.Weight Typography.Heading.Level6.Size Typography.Heading.Level6.LineHeight Typography.Heading.Level6.TextDecoration Typography.Heading.Level6.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 600 14px 1.4285714286 none none

Typography.Subtitle

Sample	Token Name	Value	Description
Aa	Typography.Subtitle.Display.Level1.Family Typography.Subtitle.Display.Level1.Weight Typography.Subtitle.Display.Level1.Size Typography.Subtitle.Display.Level1.LineHeight Typography.Subtitle.Display.Level1.TextDecoration Typography.Subtitle.Display.Level1.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 400 28px 1.4285714286 none none
Aa	Typography.Subtitle.Display.Level2.Family Typography.Subtitle.Display.Level2.Weight Typography.Subtitle.Display.Level2.Size Typography.Subtitle.Display.Level2.LineHeight Typography.Subtitle.Display.Level2.TextDecoration Typography.Subtitle.Display.Level2.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 400 24px 1.5 none none
Aa	Typography.Subtitle.Display.Level3.Family Typography.Subtitle.Display.Level3.Weight Typography.Subtitle.Display.Level3.Size Typography.Subtitle.Display.Level3.LineHeight Typography.Subtitle.Display.Level3.TextDecoration Typography.Subtitle.Display.Level3.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 400 21px 1.5238095238 none none
Aa	Typography.Subtitle.Heading.Level1.Family Typography.Subtitle.Heading.Level1.Weight Typography.Subtitle.Heading.Level1.Size Typography.Subtitle.Heading.Level1.LineHeight Typography.Subtitle.Heading.Level1.TextDecoration Typography.Subtitle.Heading.Level1.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 400 21px 1.5238095238 none none
Aa	Typography.Subtitle.Heading.Level2.Family Typography.Subtitle.Heading.Level2.Weight Typography.Subtitle.Heading.Level2.Size Typography.Subtitle.Heading.Level2.LineHeight Typography.Subtitle.Heading.Level2.TextDecoration Typography.Subtitle.Heading.Level2.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 400 18px 1.5555555556 none none
Aa	Typography.Subtitle.Heading.Level3.Family Typography.Subtitle.Heading.Level3.Weight Typography.Subtitle.Heading.Level3.Size Typography.Subtitle.Heading.Level3.LineHeight Typography.Subtitle.Heading.Level3.TextDecoration Typography.Subtitle.Heading.Level3.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 400 16px 1.5 none none

Typography.Text

Use to style the main body text of the interface. Legible and comfortable for extended reading.

Sample	Token Name	Value	Description
Aa	Typography.Text.Base.Default.Family Typography.Text.Base.Default.Weight Typography.Text.Base.Default.Size Typography.Text.Base.Default.LineHeight Typography.Text.Base.Default.TextDecoration Typography.Text.Base.Default.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 400 14px 1.4285714286 none none	Use to style the main body text of the interface. Legible and comfortable for extended reading.
Aa	Typography.Text.Base.Emphasized.Family Typography.Text.Base.Emphasized.Weight Typography.Text.Base.Emphasized.Size Typography.Text.Base.Emphasized.LineHeight Typography.Text.Base.Emphasized.TextDecoration Typography.Text.Base.Emphasized.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 500 14px 1.4285714286 none none	Use to style short-form text in the interface that requires additional emphasis or attention. Conveys a stronger tone in relation to the default text style.
Aa	Typography.Text.Small.Default.Family Typography.Text.Small.Default.Weight Typography.Text.Small.Default.Size Typography.Text.Small.Default.LineHeight Typography.Text.Small.Default.TextDecoration Typography.Text.Small.Default.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 400 12px 1.333333333 none none	Use to display text in a lower hierarchy than the base text style.
Aa	Typography.Text.Small.Emphasized.Family Typography.Text.Small.Emphasized.Weight Typography.Text.Small.Emphasized.Size Typography.Text.Small.Emphasized.LineHeight Typography.Text.Small.Emphasized.TextDecoration Typography.Text.Small.Emphasized.TextTransform	DynatraceFlow,Roboto,Helvetica,sans-serif 500 12px 1.333333333 none none	Use to add a tone that conveys importance in relation to the default text style.

Typography.Code

Use to display text in code.

Sample	Token Name	Value	Description
Aa	Typography.Code.Base.Default.Family Typography.Code.Base.Default.Weight Typography.Code.Base.Default.Size Typography.Code.Base.Default.LineHeight Typography.Code.Base.Default.TextDecoration Typography.Code.Base.Default.TextTransform	Roboto Mono,monospace 400 14px 1.4285714286 none none	Use to display text in code.
Aa	Typography.Code.Base.Emphasized.Family Typography.Code.Base.Emphasized.Weight Typography.Code.Base.Emphasized.Size Typography.Code.Base.Emphasized.LineHeight Typography.Code.Base.Emphasized.TextDecoration Typography.Code.Base.Emphasized.TextTransform	Roboto Mono,monospace 500 14px 1.4285714286 none none	Use to add a tone that conveys importance in relation to the default text style.
Aa	Typography.Code.Small.Default.Family Typography.Code.Small.Default.Weight Typography.Code.Small.Default.Size Typography.Code.Small.Default.LineHeight Typography.Code.Small.Default.TextDecoration Typography.Code.Small.Default.TextTransform	Roboto Mono,monospace 400 12px 1.333333333 none none	Use to display code in a more space-efficient variant in relation to the base text style.
Aa	Typography.Code.Small.Emphasized.Family Typography.Code.Small.Emphasized.Weight Typography.Code.Small.Emphasized.Size Typography.Code.Small.Emphasized.LineHeight Typography.Code.Small.Emphasized.TextDecoration Typography.Code.Small.Emphasized.TextTransform	Roboto Mono,monospace 500 12px 1.333333333 none none	Use to add a tone that conveys interactivity or importance in relation to the default text style.