1. Domino UI
2. Typography

Typography

Examples

Font theming Switch the font used by a scoped Domino UI sample.

Lead Use lead styling to change the line spacing of a paragraph.

Heading Predefined heading styles and font size.

Text styles Apply different styles and colors to your text.

Blockquotes Predefined text styles for blockquotes

Lists Auto style lists and ordered lists.

Font size A set of predefined font sizes providing consistence sizing for your text.

Font scope

Domino UI uses CSS custom properties for typography. The default body font is Source Sans 3, and the component typography tokens derive from --dui-font-family-body and --dui-font-family-heading.

Use dui-font-scope when a font should apply only to one application area, preview, or embedded component tree. The scope recalculates the body and heading font variables for that element and applies the selected family across its component descendants, leaving the surrounding page unchanged.

			div()
    .addCss(dui_font_scope, dui_font_source_sans_3)
		

Using fonts

Domino UI provides named font classes for the bundled families: Inter, Open Sans, Roboto, Source Sans 3, and IBM Plex Sans. Apply one to the application root for an app-wide choice, or combine it with dui-font-scope for a local choice.

			elements.body().addCss(dui_font_source_sans_3)
div().addCss(dui_font_scope, dui_font_ibm_plex_sans)
		

The low-level CSS variables are also available when an application needs a custom stack. The scope preserves component sizing and weight tokens while applying the selected family, so components and form controls remain consistent.

Custom fonts

Load your webfont before applying it, preferably with WOFF2 files and font-display: swap. You can use any licensed webfont; Domino UI does not require the font to be bundled by the library.

			@font-face {
  font-family: "Acme Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/acme-sans.woff2") format("woff2");
}
		

Set the public family variable through the typed Java API, or define the equivalent CSS on your own class:

			root.addCss(dui_font_scope)
    .setCssProperty(FontFamily.body("\"Acme Sans\", sans-serif"));
		

Radio and checkbox labels use --dui-form-field-choice-label-font, which defaults to the regular 400-weight typography token. The default theme also enables platform-specific grayscale font smoothing; the final rendering still depends on the browser and operating system.

Font tokens compose with every visual theme. See Theming and styling for the complete composition model and scoped CSS guidance.