4. Text & styling#

The text overlays in chapter 3 used default styling and were stuck centred on the canvas. Real listings need branded type and labels in specific positions. This chapter introduces the text settings object (font, size, colour), positioning, fade animations, and z-index for layering control.

Prerequisites: chapter 3. You should be comfortable with multiple scenes and the transition property.

Step 1 — Start from chapter 3#

We pick up the three-scene listing from chapter 3. For clarity the snippets below show only the first scene; apply the same changes to the other two.

{
  "duration": 4,
  "elements": [
    {
      "type": "image",
      "src": "https://cdn.json2video.com/assets/images/sample-house-front.jpg"
    },
    { "type": "text", "text": "Exterior" }
  ]
}

Step 2 — Pick a font, size, and colour#

Text styling lives in a settings object. The most-used keys are font-family, font-size, font-color, and font-weight.

{
  "type": "text",
  "text": "Exterior",
  "settings": {
    "font-family": "Inter",
    "font-size": "72px",
    "font-color": "#FFFFFF",
    "font-weight": "700"
  }
}

Note — JSON2Video accepts any Google Font name in font-family. If you need a custom typeface, supply font-url pointing at a TTF/OTF file. See Text element for the full settings list.

Step 3 — Position the label#

By default text is centred. To anchor it at the bottom-left use the position property plus margin offsets. Positions are top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-right, or custom (with explicit x/y).

{
  "type": "text",
  "text": "Exterior",
  "position": "bottom-left",
  "x": 60,
  "y": -60,
  "settings": {
    "font-family": "Inter",
    "font-size": "72px",
    "font-color": "#FFFFFF",
    "font-weight": "700"
  }
}

x and y shift the label relative to the anchor. For bottom-left anchors, positive x moves right and negative y moves up — so 60, -60 insets the label 60 px from the left edge and 60 px from the bottom.

Step 4 — Fade in / fade out#

Element-level animations live in fade-in and fade-out (number of seconds). The label fades in over half a second and out over half a second:

{
  "type": "text",
  "text": "Exterior",
  "position": "bottom-left",
  "x": 60,
  "y": -60,
  "fade-in": 0.5,
  "fade-out": 0.5,
  "settings": {
    "font-family": "Inter",
    "font-size": "72px",
    "font-color": "#FFFFFF",
    "font-weight": "700"
  }
}

Step 5 — Layer a translucent rectangle behind the text#

A coloured plate behind the label boosts readability. Use a component element from the basic library (chapter 5 covers components in depth) and a z-index so it sits between the photo and the text.

{
  "type": "text",
  "text": "Exterior",
  "position": "bottom-left",
  "x": 60,
  "y": -60,
  "z-index": 2,
  "settings": {
    "font-family": "Inter",
    "font-size": "72px",
    "font-color": "#FFFFFF",
    "font-weight": "700",
    "text-shadow": "0 2px 8px rgba(0,0,0,0.6)"
  }
}

z-index defaults to array order. Setting it explicitly is useful when one element needs to jump above a later sibling. Higher numbers draw on top.

The complete final JSON#

{
  "resolution": "full-hd",
  "elements": [
    {
      "type": "audio",
      "src": "https://cdn.json2video.com/assets/audios/uplifting-corporate.mp3",
      "volume": 0.4
    }
  ],
  "scenes": [
    {
      "duration": 4,
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-front.jpg"
        },
        {
          "type": "text",
          "text": "Exterior",
          "position": "bottom-left",
          "x": 60,
          "y": -60,
          "fade-in": 0.5,
          "fade-out": 0.5,
          "z-index": 2,
          "settings": {
            "font-family": "Inter",
            "font-size": "72px",
            "font-color": "#FFFFFF",
            "font-weight": "700",
            "text-shadow": "0 2px 8px rgba(0,0,0,0.6)"
          }
        }
      ]
    },
    {
      "duration": 4,
      "transition": { "style": "fade", "duration": 0.5 },
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-kitchen.jpg"
        },
        {
          "type": "text",
          "text": "Chef's Kitchen",
          "position": "bottom-left",
          "x": 60,
          "y": -60,
          "fade-in": 0.5,
          "fade-out": 0.5,
          "settings": {
            "font-family": "Inter",
            "font-size": "72px",
            "font-color": "#FFFFFF",
            "font-weight": "700",
            "text-shadow": "0 2px 8px rgba(0,0,0,0.6)"
          }
        }
      ]
    },
    {
      "duration": 4,
      "transition": { "style": "fade", "duration": 0.5 },
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-bedroom.jpg"
        },
        {
          "type": "text",
          "text": "Master Bedroom",
          "position": "bottom-left",
          "x": 60,
          "y": -60,
          "fade-in": 0.5,
          "fade-out": 0.5,
          "settings": {
            "font-family": "Inter",
            "font-size": "72px",
            "font-color": "#FFFFFF",
            "font-weight": "700",
            "text-shadow": "0 2px 8px rgba(0,0,0,0.6)"
          }
        }
      ]
    }
  ]
}

Expected output#

Same 12-second three-scene cut as chapter 3, but each room label now appears bottom-left in white 72-px Inter Bold with a soft drop-shadow, fading in and out at scene boundaries. Sample render: tutorial-04.mp4 (placeholder).

What you learned#

• Text appearance lives in settings (font-family, font-size, font-color, font-weight, text-shadow).
• position picks a 9-anchor preset; x / y apply pixel offsets from that anchor.
• fade-in / fade-out add per-element animation in seconds.
• z-index overrides array-order layering when you need fine control.

Previous chapter / Next chapter#

← 3. Multiple scenes & transitions · 5. Component library →