Text and Fonts

CalmUI includes Inter. You can use it without importing a font:

.title {
  font-family: Inter;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

Add the rule to the component containing your title, save, and check Preview. Test long text at the narrowest resolution you support.

Scale a font token with font-size: calc(var(--heading-size) * 2) when --heading-size contains a length such as 30px. Arithmetic supports nested parentheses, scalar multiplication and division, and sums of matching units. For example, calc((20px + 10px) * 2) produces 60px. Mixing units inside a sum, such as calc(1em + 10px), is not supported. Division by zero and products of two lengths are invalid and do not replace a valid font declaration.

Add another font

Import the font through Assets → Project Assets and configure its family. Use that family in font-family. Fonts must be included in the project; CalmUI does not download fonts or search the player's system for a replacement. A project font named Inter replaces the built-in font.

Provide fallback families for languages whose characters are missing from Inter, including Arabic or CJK when your game uses them. Test those languages in Unreal. Missing families use the configured fallback with a warning; missing characters are reported as problems.

Fit text into a fixed area

To keep a title on one line and show … when it is too long:

.title {
  width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Text that fits stays complete. Longer text is shortened at the right edge, with room reserved for the ellipsis. The same rule works in Studio Preview and Unreal. If the title sits inside a flex row, give the shrinking item min-width: 0 so it can become narrower than its text. Its width can come from the layout instead of a fixed pixel value.

All three properties matter: nowrap keeps one line, hidden clips the excess, and ellipsis adds the marker. A width that grows with the text will not cause truncation. Use text-overflow: clip to hide the excess without a marker.

GameUI's Button title and description each use one line with an ellipsis. GlassButton labels and the two last-save lines follow the same rule. The text column may shrink (min-width: 0), while icons and trailing content keep their size. Apply clipping to the text element rather than the outer button so focus effects and shadows remain visible. Full localized values remain unchanged.

Custom overflow strings, two-value overflow syntax, underlines, overlines, and strikethrough are not supported. See the CSS reference.