Skip to main content

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​

    SampleToken NameValueDescription
    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​

    SampleToken NameValueDescription
    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​

    SampleToken NameValueDescription
    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.

    SampleToken NameValueDescription
    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.

    SampleToken NameValueDescription
    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.

    Still have questions?
    Find answers in the Dynatrace Community