Why Trebuchet?

[jsit]

I'm just curious -- why does every theme (or at least most themes) use Trebuchet MS?

[manimovassagh]

Trebuchet MS was chosen for a few practical reasons:

1. Wide availability — it is a core web font that ships with Windows, macOS, and most Linux desktop environments. This means diagrams render consistently across platforms without requiring a custom font to be loaded.

2. Readability at small sizes — Trebuchet MS was designed by Vincent Connare at Microsoft specifically for screen readability. For diagrams where node labels and edge text can be quite small, this matters more than it would for body text.

3. Compact character width — compared to Arial or Verdana, Trebuchet is slightly narrower, which helps fit more text into diagram nodes without overflow.

4. Historical — mermaid has been around since 2014, and Trebuchet was a solid safe choice at the time. The font stack in the themes also includes sans-serif as a fallback, so if Trebuchet is not available, the browser picks its default sans-serif.

You can override it in any theme by setting the fontFamily config:

mermaid.initialize({
  theme: "default",
  themeVariables: {
    fontFamily: "Inter, system-ui, sans-serif"
  }
});

Or in a Markdown front-matter config block if your renderer supports it.

[jsit]

@manimovassagh Thanks for the history lesson!