Styling & Themes / Default Theme / Customizing Typography / 
New to Kendo UI for Angular? Start a free 30-day trial

Customizing Typography

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-h1-font-sizeCalculationcalc( var( --kendo-font-size, .875rem ) * 4 )calc(var(--kendo-font-size, 0.875rem) * 4)
Description
The font size of the highest level heading.
$kendo-h2-font-sizeCalculationcalc( var( --kendo-font-size, .875rem ) * 3 )calc(var(--kendo-font-size, 0.875rem) * 3)
Description
The font size of the second highest level heading.
$kendo-h3-font-sizeCalculationcalc( var( --kendo-font-size, .875rem ) * 2.5 )calc(var(--kendo-font-size, 0.875rem) * 2.5)
Description
The font size of the third highest level heading.
$kendo-h4-font-sizeCalculationcalc( var( --kendo-font-size, .875rem ) * 2 )calc(var(--kendo-font-size, 0.875rem) * 2)
Description
The font size of the fourth highest level heading.
$kendo-h5-font-sizeCalculationcalc( var( --kendo-font-size, .875rem ) * 1.5 )calc(var(--kendo-font-size, 0.875rem) * 1.5)
Description
The font size of the fifth highest level heading.
$kendo-h6-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the sixth highest level heading.
$kendo-h1-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the highest level heading.
$kendo-h2-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the second highest level heading.
$kendo-h3-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the third highest level heading.
$kendo-h4-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the fourth highest level heading.
$kendo-h5-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the fifth highest level heading.
$kendo-h6-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the sixth highest level heading.
$kendo-h1-line-heightNumber74px74px
Description
The line height of the highest level heading.
$kendo-h2-line-heightNumber56px56px
Description
The line height of the second highest level heading.
$kendo-h3-line-heightNumber42px42px
Description
The line height of the third highest level heading.
$kendo-h4-line-heightNumber40px40px
Description
The line height of the fourth highest level heading.
$kendo-h5-line-heightNumber28px28px
Description
The line height of the fifth highest level heading.
$kendo-h6-line-heightNumber20px20px
Description
The line height of the sixth highest level heading.
$kendo-h1-font-weightStringvar( --kendo-font-weight-normal, normal )var(--kendo-font-weight-normal, normal)
Description
The font weight of the highest level heading.
$kendo-h2-font-weightStringvar( --kendo-font-weight-normal, normal )var(--kendo-font-weight-normal, normal)
Description
The font weight of the second highest level heading.
$kendo-h3-font-weightStringvar( --kendo-font-weight-normal, normal )var(--kendo-font-weight-normal, normal)
Description
The font weight of the third highest level heading.
$kendo-h4-font-weightStringvar( --kendo-font-weight-bold, normal )var(--kendo-font-weight-bold, normal)
Description
The font weight of the fourth highest level heading.
$kendo-h5-font-weightStringvar( --kendo-font-weight-bold, normal )var(--kendo-font-weight-bold, normal)
Description
The font weight of the fifth highest level heading.
$kendo-h6-font-weightStringvar( --kendo-font-weight-bold, normal )var(--kendo-font-weight-bold, normal)
Description
The font weight of the sixth highest level heading.
$kendo-h1-letter-spacingNullnullnull
Description
The letter spacing of the highest level heading.
$kendo-h2-letter-spacingNullnullnull
Description
The letter spacing of the second highest level heading.
$kendo-h3-letter-spacingNullnullnull
Description
The letter spacing of the third highest level heading.
$kendo-h4-letter-spacingNullnullnull
Description
The letter spacing of the fourth highest level heading.
$kendo-h5-letter-spacingNullnullnull
Description
The letter spacing of the fifth highest level heading.
$kendo-h6-letter-spacingNullnullnull
Description
The letter spacing of the sixth highest level heading.
$kendo-h1-marginList0 0 var( --kendo-font-size, inherit )0 0 var(--kendo-font-size, inherit)
Description
The margin of the highest level heading.
$kendo-h2-marginList0 0 var( --kendo-font-size, inherit )0 0 var(--kendo-font-size, inherit)
Description
The margin of the second highest level heading.
$kendo-h3-marginList0 0 var( --kendo-font-size, inherit )0 0 var(--kendo-font-size, inherit)
Description
The margin of the third highest level heading.
$kendo-h4-marginList0 0 var( --kendo-font-size, inherit )0 0 var(--kendo-font-size, inherit)
Description
The margin of the fourth highest level heading.
$kendo-h5-marginList0 0 var( --kendo-font-size, inherit )0 0 var(--kendo-font-size, inherit)
Description
The margin of the fifth highest level heading.
$kendo-h6-marginList0 0 var( --kendo-font-size, inherit )0 0 var(--kendo-font-size, inherit)
Description
The margin of the sixth highest level heading.
$kendo-headingsMap( h1: ( font-size: $kendo-h1-font-size, font-family: $kendo-h1-font-family, line-height: $kendo-h1-line-height, font-weight: $kendo-h1-font-weight, letter-spacing: $kendo-h1-letter-spacing, margin: $kendo-h1-margin 
),
h2: (
    font-size: $kendo-h2-font-size,
    font-family: $kendo-h2-font-family,
    line-height: $kendo-h2-line-height,
    font-weight: $kendo-h2-font-weight,
    letter-spacing: $kendo-h2-letter-spacing,
    margin: $kendo-h2-margin
),
h3: (
    font-size: $kendo-h3-font-size,
    font-family: $kendo-h3-font-family,
    line-height: $kendo-h3-line-height,
    font-weight: $kendo-h3-font-weight,
    letter-spacing: $kendo-h3-letter-spacing,
    margin: $kendo-h3-margin
),
h4: (
    font-size: $kendo-h4-font-size,
    font-family: $kendo-h4-font-family,
    line-height: $kendo-h4-line-height,
    font-weight: $kendo-h4-font-weight,
    letter-spacing: $kendo-h4-letter-spacing,
    margin: $kendo-h4-margin
),
h5: (
    font-size: $kendo-h5-font-size,
    font-family: $kendo-h5-font-family,
    line-height: $kendo-h5-line-height,
    font-weight: $kendo-h5-font-weight,
    letter-spacing: $kendo-h5-letter-spacing,
    margin: $kendo-h5-margin
),
h6: (
    font-size: $kendo-h6-font-size,
    font-family: $kendo-h6-font-family,
    line-height: $kendo-h6-line-height,
    font-weight: $kendo-h6-font-weight,
    letter-spacing: $kendo-h6-letter-spacing,
    margin: $kendo-h6-margin
),

)

(h1: (font-size: calc(var(--kendo-font-size, 0.875rem) * 4), font-family: var(--kendo-font-family, inherit), line-height: 74px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit)), h2: (font-size: calc(var(--kendo-font-size, 0.875rem) * 3), font-family: var(--kendo-font-family, inherit), line-height: 56px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit)), h3: (font-size: calc(var(--kendo-font-size, 0.875rem) * 2.5), font-family: var(--kendo-font-family, inherit), line-height: 42px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit)), h4: (font-size: calc(var(--kendo-font-size, 0.875rem) * 2), font-family: var(--kendo-font-family, inherit), line-height: 40px, font-weight: var(--kendo-font-weight-bold, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit)), h5: (font-size: calc(var(--kendo-font-size, 0.875rem) * 1.5), font-family: var(--kendo-font-family, inherit), line-height: 28px, font-weight: var(--kendo-font-weight-bold, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit)), h6: (font-size: var(--kendo-font-size, inherit), font-family: var(--kendo-font-family, inherit), line-height: 20px, font-weight: var(--kendo-font-weight-bold, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit)))
Description
The headings Map.
$kendo-paragraph-marginList0 0 var( --kendo-font-size, inherit )0 0 var(--kendo-font-size, inherit)
Description
The margin of the paragraph.
$kendo-paragraph-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the paragraph.
$kendo-paragraph-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the paragraph.
$kendo-paragraph-line-heightNumber20px20px
Description
The line height of the paragraph.
$kendo-paragraph-font-weightStringvar( --kendo-font-weight-normal, normal )var(--kendo-font-weight-normal, normal)
Description
The font weight of the paragraph.
$kendo-paragraph-letter-spacingNullnullnull
Description
The letter spacing of the paragraph.
$kendo-code-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the code tag.
$kendo-code-font-familyStringvar( --kendo-font-family-monospace, normal )var(--kendo-font-family-monospace, normal)
Description
The font family of the code tag.
$kendo-code-line-heightNumber20px20px
Description
The line height of the code tag.
$kendo-code-font-weightStringvar( --kendo-font-weight-normal, normal )var(--kendo-font-weight-normal, normal)
Description
The font weight of the code tag.
$kendo-code-letter-spacingNullnullnull
Description
The letter spacing of the code tag.
$kendo-code-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the code tag.
$kendo-code-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The vertical padding of the code tag.
$kendo-pre-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the preformatted text.
$kendo-pre-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The vertical padding of the preformatted text.
$kendo-code-border-widthNumber1px1px
Description
The width of the border of the code tag.
$kendo-code-bgString$kendo-base-bgvar(--kendo-color-surface, #fafafa)
Description
The background color of the code tag.
$kendo-code-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The color of the code tag.
$kendo-code-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the code tag.
$kendo-display1-font-sizeCalculationcalc( var( --kendo-font-size, .875rem ) * 8)calc(var(--kendo-font-size, 0.875rem) * 8)
Description
The font size of the largest display text.
$kendo-display2-font-sizeCalculationcalc( var( --kendo-font-size, .875rem ) * 7)calc(var(--kendo-font-size, 0.875rem) * 7)
Description
The font size of the second largest display text.
$kendo-display3-font-sizeCalculationcalc( var( --kendo-font-size, .875rem ) * 6)calc(var(--kendo-font-size, 0.875rem) * 6)
Description
The font size of the third largest display text.
$kendo-display4-font-sizeCalculationcalc( var( --kendo-font-size, .875rem ) * 5)calc(var(--kendo-font-size, 0.875rem) * 5)
Description
The font size of the fourth largest display text.
$kendo-display1-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the largest display text.
$kendo-display2-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the second largest display text.
$kendo-display3-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the third largest display text.
$kendo-display4-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the fourth largest display text.
$kendo-display1-line-heightNumber1.21.2
Description
The line height of the largest display text.
$kendo-display2-line-heightNumber1.21.2
Description
The line height of the second largest display text.
$kendo-display3-line-heightNumber1.21.2
Description
The line height of the third largest display text.
$kendo-display4-line-heightNumber1.21.2
Description
The line height of the fourth largest display text.
$kendo-display1-font-weightStringvar( --kendo-font-weight-light, normal )var(--kendo-font-weight-light, normal)
Description
The font weight of the largest display text.
$kendo-display2-font-weightStringvar( --kendo-font-weight-light, normal )var(--kendo-font-weight-light, normal)
Description
The font weight of the second largest display text.
$kendo-display3-font-weightStringvar( --kendo-font-weight-light, normal )var(--kendo-font-weight-light, normal)
Description
The font weight of the third largest display text.
$kendo-display4-font-weightStringvar( --kendo-font-weight-light, normal )var(--kendo-font-weight-light, normal)
Description
The font weight of the fourth largest display text.
$kendo-display1-letter-spacingNullnullnull
Description
The letter spacing of the largest display text.
$kendo-display2-letter-spacingNullnullnull
Description
The letter spacing of the second largest display text.
$kendo-display3-letter-spacingNullnullnull
Description
The letter spacing of the third largest display text.
$kendo-display4-letter-spacingNullnullnull
Description
The letter spacing of the fourth largest display text.
$kendo-font-sizeNumber0.875rem0.875rem
Description
The base font size across all components.
$kendo-font-size-xxsNumber0.5rem0.5rem
Description
The extra extra small font size across all components.
$kendo-font-size-xsNumber0.625rem0.625rem
Description
The extra small font size across all components.
$kendo-font-size-smNumber0.75rem0.75rem
Description
The small font size across all components.
$kendo-font-size-mdNumber$kendo-font-size0.875rem
Description
The medium font size across all components.
$kendo-font-size-lgNumber1rem1rem
Description
The large font size across all components.
$kendo-font-size-xlNumber1.25rem1.25rem
Description
The extra large font size across all components.
$kendo-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The base line height across all components.
$kendo-line-height-xsNumber11
Description
The extra small line height across all components.
$kendo-line-height-smNumber1.251.25
Description
The small line height across all components.
$kendo-line-height-mdNumber$kendo-line-height1.4285714286
Description
The medium line height across all components.
$kendo-line-height-lgNumber1.51.5
Description
The large line height across all components.
$kendo-line-height-emCalculationcalc( #{$kendo-line-height-md} * 1em )calc(1.4285714286 * 1em)
Description
The base line height in ems across all components.
$kendo-font-weightNumber400400
Description
The base font weight across all components.
$kendo-font-weight-thinNumber100100
Description
The thin font weight across all components.
$kendo-font-weight-extra-lightNumber200200
Description
The extra light font weight across all components.
$kendo-font-weight-lightNumber300300
Description
The light font weight across all components.
$kendo-font-weight-normalNumber$kendo-font-weight400
Description
The normal font weight across all components.
$kendo-font-weight-mediumNumber500500
Description
The medium font weight across all components.
$kendo-font-weight-semiboldNumber600600
Description
The semibold font weight across all components.
$kendo-font-weight-boldNumber700700
Description
The bold font weight across all components.
$kendo-font-weight-extra-boldNumber800800
Description
The extra bold font weight across all components.
$kendo-font-weight-blackNumber900900
Description
The most pronounced font weight across all components.
$kendo-letter-spacingNullnullnull
Description
The base letter spacing across all components.
$kendo-letter-spacing-tightestNumber-.15px-0.15px
Description
The tightest letter spacing across all components.
$kendo-letter-spacing-tighterNumber-.10px-0.1px
Description
Slightly looser than the tighter letter spacing across all components.
$kendo-letter-spacing-tightNumber-.5px-0.5px
Description
Moderately tight letter spacing across all components.
$kendo-letter-spacing-normalNumber0px0px
Description
The normal letter spacing across all components.
$kendo-letter-spacing-wideNumber.5px0.5px
Description
Wide letter spacing across all components.
$kendo-letter-spacing-widerNumber.10px0.1px
Description
Slightly wider than the wide letter spacing across all components.
$kendo-letter-spacing-widestNumber.15px0.15px
Description
The widest letter spacing across all components.
$kendo-font-family-sansListArial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill SansArial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans
Description
The sans font family across all components.
$kendo-font-family-serifList"Times New Roman", Georgia, Garamond, Palatino, Baskerville"Times New Roman", Georgia, Garamond, Palatino, Baskerville
Description
The serif font family across all components.
$kendo-font-family-sans-serifListsystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The sans-serif font family across all components.
$kendo-font-family-monospaceListSFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospaceSFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace
Description
The monospace font family across all components.
$kendo-font-familyStringinheritinherit
Description
The base font family across all components.
$kendo-font-sizesMapk-map-merge( $_default-font-sizes, $kendo-font-sizes )(xxs: 0.5rem, xs: 0.625rem, sm: 0.75rem, md: 0.875rem, lg: 1rem, xl: 1.25rem)
Description
The font sizes map
$kendo-line-heightsMapk-map-merge( $_default-line-heights, $kendo-line-heights )(xs: 1, sm: 1.25, md: 1.4285714286, lg: 1.5)
Description
The line heights map
$kendo-font-weightsMapk-map-merge( $_default-font-weights, $kendo-font-weights )(thin: 100, extra-light: 200, light: 300, normal: 400, medium: 500, semibold: 600, bold: 700)
Description
The font weights map
$kendo-letter-spacingsMapk-map-merge( $_default-letter-spacings, $kendo-letter-spacings )(tightest: -0.15px, tighter: -0.1px, tight: -0.5px, normal: 0px, wide: 0.5px, wider: 0.1px, widest: 0.15px)
Description
The letter spacings map
$kendo-font-familiesMapk-map-merge( $_default-font-families, $kendo-font-families )(sans: (Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans), serif: ("Times New Roman", Georgia, Garamond, Palatino, Baskerville), sans-serif: (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), monospace: (SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace))
Description
The font families map

Suggested Links

Previous
Customizing Treeview
Next
Customizing Upload

In this article

Not finding the help you need?

Contact Support