Articles on: Templates and Layers

Complete Guide to Text Styling

Complete Guide to Text Styling


Master all text formatting options in Templated.


Basic Formatting


Property

Values

Example

text

Any string

"Hello World"

color

Hex color

"#FF0000"

font_size

CSS size

"24px", "2em"

font_weight

Weight

"bold", "400", "700"


Font Selection


Use any Google Font or upload custom fonts:

{
"title": {
"text": "Hello",
"font_family": "Poppins"
}
}


Popular Google Fonts: Roboto, Open Sans, Lato, Montserrat, Poppins, Inter


Text Alignment


{
"title": {
"horizontal_align": "center",
"vertical_align": "center"
}
}


Options: left, center, right (horizontal) and top, center, bottom (vertical)


Spacing


  • letter_spacing — Space between letters ("2px", "-1px")
  • line_height — Space between lines ("1.5", "24px")


Text Effects


Text Stroke (Outline)

{
"title": {
"text_stroke_width": 2,
"text_stroke_color": "#000000"
}
}


Text Highlight

{
"title": {
"text_highlight_color": "#FFFF00"
}
}


Autofit


Automatically scale text to fit the bounding box:

{
"title": {
"text": "Very long text that needs to fit",
"autofit": "width"
}
}


Secondary Color Formatting


Use *asterisks* to apply secondary styling:

{
"title": {
"text": "Hello *World*",
"color": "#000000",
"color_2": "#FF0000",
"font_family_2": "Georgia"
}
}


Result: "Hello" in black, "World" in red Georgia font.


Background


{
"title": {
"background": "#EEEEEE",
"padding_x": 10,
"padding_y": 5
}
}

Updated on: 11/01/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!