Set Global Font Size
Environment
| Product | Progress® Telerik® UI for ASP.NET Core |
Description
This KB article demonstrates how to adjust the global font size of the text displayed inside the Telerik UI UI for ASP.NET Core components.
Solution
The default font size of the components is 14px by default.
However, font sizes now operate in rem-s, and this might lead to different results depending on the environment. For instance, the default value of the kendo-font-size variable inside the SASS theme is 0.875rem. In some systems, this might translate to 14px, in others to 18px, and in third ones - to 12.5px.
To set the global font size in pixels, you can use one of these different options:
Option 1:
You can set a value like this:
html {
font-size: 16px;
}
Which will result to something like 14px in the components operating with rem units, because kendo-font-size is 0.875rem.
Option 2:
By modifying the variable you can set final value in pixels dynamically:
html {
--kendo-font-size: 16px;
}
Option 2:
By modifying the variable in rem-s, you can again let the pixel value unmodified:
html {
--kendo-font-size: 1rem;
font-size: 16px;
}
And this will also result in text font size of 16px.