Novadesk Docs

Appearance

Font Weight ​

A visual reference for the fontWeight property on addText elements. FontWeight controls how thick or thin the text strokes appear.

Table of Contents ​

All 9 Weights ​

The quick brown fox 100 — "thin"
The quick brown fox 200 — "extralight"
The quick brown fox 300 — "light"
The quick brown fox 400 — "normal" (default)
The quick brown fox 500 — "medium"
The quick brown fox 600 — "semibold"
The quick brown fox 700 — "bold"
The quick brown fox 800 — "extrabold"
The quick brown fox 900 — "black"

Named Values ​

String Number Description
"thin" 100 Hairline weight — delicate, elegant
"extralight" / "ultralight" 200 Very light
"light" 300 Light — good for secondary text
"normal" / "regular" 400 Default body weight
"medium" 500 Slightly heavier than normal
"semibold" / "demibold" 600 Semi-bold — emphasis without full bold
"bold" 700 Bold — headings, emphasis
"extrabold" / "ultrabold" 800 Extra bold — strong emphasis
"black" / "heavy" 900 Heaviest — display, impact

Case-insensitive

"Bold", "BOLD", and "bold" all work identically.

Availability

The font must support the requested weight. System fonts like Segoe UI, Arial, and Consolas typically support weights 100–900. Custom fonts loaded via fontPath must include the weight variants you use.

When to Use Each Weight ​

Weight Best For Example
100–200 Decorative, artistic text Watermarks, large display numbers
300 Secondary text, captions Timestamps, status labels
400 Body text, descriptions Default — most text
500 Slightly emphasized text Labels, navigation items
600 Subheadings, card titles Section headers
700 Headings, strong emphasis Page titles, button labels
800–900 Hero text, large numbers Dashboard values, hero sections

Code Examples ​

Thin Decorative Text ​

javascript
ui.addText({
  id: "watermark",
  text: "DEMO",
  x: 50, y: 100,
  width: 200, height: 40,
  fontSize: 32,
  fontWeight: 100,
  fontColor: "rgba(255,255,255,0.15)"
});

Light Secondary Text ​

javascript
ui.addText({
  id: "subtitle",
  text: "Last updated 2 min ago",
  x: 16, y: 50,
  width: 200, height: 18,
  fontSize: 11,
  fontWeight: 300,
  fontColor: "rgb(140,140,140)"
});

Bold Heading ​

javascript
ui.addText({
  id: "title",
  text: "Settings",
  x: 16, y: 14,
  width: 200, height: 24,
  fontSize: 18,
  fontWeight: "bold",
  fontColor: "rgb(255,255,255)"
});

Heavy Hero Number ​

javascript
ui.addText({
  id: "hero-value",
  text: "98.6%",
  x: 16, y: 40,
  width: 200, height: 50,
  fontSize: 42,
  fontWeight: 900,
  fontColor: "rgb(0,180,255)"
});

Visual Hierarchy in a Card ​

javascript
ui.beginUpdate();

// Card background
ui.addShape({
  id: "card",
  shapeType: "rectangle",
  x: 16, y: 16,
  width: 280, height: 120,
  fillColor: "rgba(25,25,35,0.95)",
  radiusX: 10, radiusY: 10
});

// Title — semibold
ui.addText({
  id: "card-title",
  text: "Network Speed",
  x: 28, y: 28,
  width: 240, height: 24,
  fontSize: 16,
  fontWeight: "semibold",
  fontColor: "rgb(255,255,255)"
});

// Value — bold, large
ui.addText({
  id: "card-value",
  text: "↑ 12.4 MB/s",
  x: 28, y: 58,
  width: 240, height: 36,
  fontSize: 28,
  fontWeight: "bold",
  fontColor: "rgb(0,200,255)"
});

// Label — light, small
ui.addText({
  id: "card-label",
  text: "Upload • Last 60s avg",
  x: 28, y: 96,
  width: 240, height: 16,
  fontSize: 11,
  fontWeight: 300,
  fontColor: "rgb(120,120,120)"
});

ui.endUpdate();

Quick Reference ​

I want to... Use
Default body text fontWeight: "normal" (or 400, or omit)
Bold heading fontWeight: "bold" or 700
Subtle secondary text fontWeight: 300
Heavy hero number fontWeight: 900
Slight emphasis fontWeight: "semibold" or 600
Thin decorative text fontWeight: 100