Change text size

Compatibility

This snippet compatible with Better Messages 3.0.0 or higher

Since 3.0 the messenger's typography is a setting, not a snippet. Everything below is at Better Messages → Settings → Appearance → Typography, with a live preview beside it.

Control	Token	Default	Range
Message text size	`--bm-font-size-base`	15px	11–22px
Sender name size — the name above a message in group conversations	`--bm-font-size-name`	12px	10–18px
Interface text size — scales every label, button and timestamp, leaving message text alone	`--bm-font-size-x`	100%	80–140%
Line height — as a multiple of the text size	`--bm-line-height-normal`	1.45	1.1–2
Font family	`--bm-messenger-font`	System	System · Classic sans-serif · Serif · Monospace · Inherit from the theme · Custom
Monospace font — timestamps, timers, file sizes and counters	`--bm-font-family-mono`	System monospace	System monospace · Courier · Same as the message text

For a web font your theme already loads — Roboto, Inter and the like — choose Custom under Font family and type its name.

Overriding the variables by hand#

The settings write those tokens onto :root, so if you would rather keep your typography in a stylesheet, set the same variables there.

REQUIREMENTS

To be able to implement this guide, you need somewhere to put custom CSS on your website. Any of these works:

Appearance → Customize → Additional CSS in WordPress
your child theme's style.css
a code snippets plugin

Better Messages has no custom CSS field of its own — the one in the old Design tab was removed in 3.0, and CSS saved there was not carried over.

:root {
    --bm-font-size-base: 16px;
    --bm-font-size-name: 13px;
    --bm-line-height-normal: 1.5;
}

--bm-font-size-x is a multiplier, not a percentage

The slider shows it as a percentage, but the token itself is unitless — the 100% default is stored as 1. In CSS write --bm-font-size-x: 1.2, not 120%.

caution

Values you set in CSS and values you set in Appearance → Typography are the same tokens, so whichever loads last wins. Pick one place and stay in it, or the settings page will look like it is lying to you.

Larger Better Messages chat text after applying the CSS snippet

Overriding the variables by hand#

See also#