Typography

No description in the documentation.

${typographyCardStyles} To set the font-family of an element use the .sap-font-family-type class or the @include sap-font-family(type) mixin. Regular Variable: var(--sapFontFamily) Style: "72", "72full", Arial, Helvetica, sans-serif Class: .sap-font-family-regular Mixin: @include sap-font-family(regular) Light Variable: var(--sapFontLightFamily) Style: "72-Light", "72-Lightfull", "72", "72full", Arial, Helvetica, sans-serif Class: .sap-font-family-light Mixin: @include sap-font-family(light) Bold Variable: var(--sapFontBoldFamily) Style: "72-Bold", "72-Boldfull", "72", "72full", Arial, Helvetica, sans-serif Class: .sap-font-family-bold Mixin: @include sap-font-family(bold) Semibold Variable: var(--sapFontSemiboldFamily) Style: "72-Semibold", "72-Semiboldfull", "72", "72full", Arial, Helvetica, sans-serif Class: .sap-font-family-semibold Mixin: @include sap-font-family(semibold) Semibold Duplex Variable: var(--sapFontSemiboldDuplexFamily) Style: "72-SemiboldDuplex", "72-SemiboldDuplexfull", "72", "72full", Arial, Helvetica, sans-serif Class: .sap-font-family-semibold-duplex Mixin: @include sap-font-family(semibold-duplex) Monospaced Regular Variable: var(--sapContent_MonospaceFontFamily) Style: "72Mono", "72Monofull", Lucida Console, monospace Class: .sap-font-family-monospaced-regular Mixin: @include sap-font-family(monospaced-regular) Monospaced Bold Variable: var(--sapContent_MonospaceBoldFontFamily) Style: "72Mono-Bold", "72Mono-Boldfull", Lucida Console, monospace Class: .sap-font-family-monospaced-bold Mixin: @include sap-font-family(monospaced-bold) Black Variable: var(--sapFontBlackFamily) Style: "72Black", "72", "72full", Arial, Helvetica, sans-serif Class: .sap-font-family-black Mixin: @include sap-font-family(black) Header Variable: var(--sapFontHeaderFamily) Style: "72", "72full", Arial, Helvetica, sans-serif Class: .sap-font-family-header Mixin: @include sap-font-family(header)

${typographyCardStyles} To set the font-size of an element use the .sap-font-size-value class or the @include sap-font-size(value) mixin. Header 6 Variable: var(--sapFontHeader6Size) Size: 0.875rem (14px) Class: .sap-font-size-header-6 Mixin: @include sap-font-size(header-6) Header 5 Variable: var(--sapFontHeader5Size) Size: 1rem (16px) Class: .sap-font-size-header-5 Mixin: @include sap-font-size(header-5) Header 4 Variable: var(--sapFontHeader4Size) Size: 1.125rem (18px) Class: .sap-font-size-header-4 Mixin: @include sap-font-size(header-4) Header 3 Variable: var(--sapFontHeader3Size) Size: 1.25rem (20px) Class: .sap-font-size-header-3 Mixin: @include sap-font-size(header-3) Header 2 Variable: var(--sapFontHeader2Size) Size: 1.5rem (24px) Class: .sap-font-size-header-2 Mixin: @include sap-font-size(header-2) Header 1 Variable: var(--sapFontHeader1Size) Size: 2.25rem (36px) Class: .sap-font-size-header-1 Mixin: @include sap-font-size(header-1) Small Variable: var(--sapFontSmallSize) Size: 0.75rem (12px) Class: .sap-font-size-small Mixin: @include sap-font-size(small) Medium Variable: var(--sapFontSize) Size: 0.875rem (14px) Class: .sap-font-size-medium Mixin: @include sap-font-size(medium) Large Variable: var(--sapFontLargeSize) Size: 1rem (16px) Class: .sap-font-size-large Mixin: @include sap-font-size(large)

${typographyCardStyles} In general, there is no line height applied to text, as the line height e.g. affects the padding. If a more generous line height is required for long continuous text, a consistent line height of 1.5 is recommended. Normal Line Height Class: .sap-font-line-height Mixin: @include sap-font-line-height() Value: normal Long Text Line Height Class: .sap-font-line-height-long Mixin: @include sap-font-line-height(1.5) Value: 1.5

${typographyCardStyles} Common typography use cases with combined font settings. Header Text in Size 3 Style: "72" font, 20px, #32363a Usage: Dynamic page header, object page header Class: .sap-font-header-3 Mixin: @include sap-font(header-3) Standard Text Style: "72" font, 14px, #32363a Usage: Text control Class: .sap-font-standard-text Mixin: @include sap-font(standard-text) Small Detail Text Style: "72" font, 12px, #6a6d70 Usage: Time stamps, small bylines Class: .sap-font-small-detail-text Mixin: @include sap-font(small-detail-text) Standard Field Text Style: "72" font, 14px, #32363a Usage: Input field, feed input, text area Class: .sap-font-standard-field-text Mixin: @include sap-font(standard-field-text) Labels Style: "72" font, 14px, #6a6d70 Usage: Labels Class: .sap-font-label Mixin: @include sap-font(label) Descriptions Style: "72" font, 14px, #6a6d70 Usage: Object attribute Class: .sap-font-description Mixin: @include sap-font(description)