Edit page


Typography is the basic means to present information to users. It also serves to communicate the hierarchy of a page.

👉 You can adjust all custom properties on this page (and more) in your theme by overriding values in the design tokens section.

Basic typography showcase:

React UI is designed with Titillium Web font, a geometric sans with a wide variety of weights and styles. You can change it to a custom font by overriding the --rui-typography-font-family-base CSS custom property:

:root {
--rui-typography-font-family-base: 'Titillium Web', helvetica, roboto, arial, sans-serif;

Font size and weight values can be customised as well:

:root {
--rui-typography-font-size-base: 100%;
--rui-typography-line-height-base: 1.5;
--rui-typography-line-height-small: 1.25;
--rui-typography-size-0: 1rem;
--rui-typography-size-1: 1.125rem;
--rui-typography-size-2: 1.266rem;
--rui-typography-size-3: 1.424rem;
--rui-typography-size-4: 1.602rem;
--rui-typography-size-5: 1.802rem;
--rui-typography-size-small: 0.889rem;
--rui-typography-size-smaller: 0.75rem;
--rui-typography-font-weight-thin: 100;
--rui-typography-font-weight-light: 300;
--rui-typography-font-weight-regular: 400;
--rui-typography-font-weight-medium: 500;
--rui-typography-font-weight-bold: 700;