[{"data":1,"prerenderedAt":594},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Fdesign-elements-and-tools\u002Ftext-settings":3},{"id":4,"title":5,"body":6,"category":567,"description":568,"extension":569,"keywords":570,"meta":584,"navigation":585,"order":586,"path":587,"published":588,"rawbody":589,"seo":590,"stem":591,"updated":592,"__hash__":593},"help\u002Fhelp\u002Fdesign-elements-and-tools\u002Ftext-settings.md","Text properties",{"type":7,"value":8,"toc":552},"minimark",[9,24,50,58,63,69,93,96,104,117,124,128,135,139,161,168,172,179,186,212,218,221,235,239,253,261,264,270,285,292,299,303,310,314,361,368,375,379,383,409,412,443,450,457,461,474,505,512,518,530],[10,11,12,13,17,18,23],"p",{},"In the ",[14,15,16],"place",{},"properties panel"," you decide how a text looks and how it behaves when it gets longer or shorter. This matters most when the text comes from an input field and you don't know how much your users will type. How to add a text is described in ",[19,20,22],"a",{"href":21},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fdesign-elements","Design elements (images, text, shapes)",".",[10,25,26,27,30,31,34,35,39,40,39,43,46,47,23],{},"You see the properties as soon as you select a text on the ",[14,28,29],{},"canvas"," or in the ",[14,32,33],{},"layers panel",". They are in the sections ",[36,37,38],"strong",{},"Position & Size",", ",[36,41,42],{},"Text",[36,44,45],{},"Appearance"," and ",[36,48,49],{},"Transforms",[10,51,52],{},[53,54],"img",{"alt":55,"src":56,"width":57},"Text section of a selected text: Content, Font Style, Font Family, Max Font Size, Align, Spacing, Wrap, Enforce Uppercase and Curved Text.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-text-settings-01\u002Fpublic",343,[59,60,62],"h2",{"id":61},"origin","Origin",[10,64,65,66,68],{},"At the top of the ",[36,67,38],{}," section:",[70,71,72,78,87],"ul",{},[73,74,75,77],"li",{},[36,76,62],{},": the point in the text box where the text sits. The first three buttons set it horizontally (left, center, right), the other three vertically (top, middle, bottom). Top left by default.",[73,79,80,83,84,86],{},[36,81,82],{},"Position",": where the Origin is on the ",[14,85,29],{}," (X and Y).",[73,88,89,92],{},[36,90,91],{},"Size",": width and height of the text box (W and H). The text always stays inside this box.",[10,94,95],{},"When the text is smaller than its box, it stays at the Origin. When it gets longer, it grows from there:",[70,97,98,101],{},[73,99,100],{},"Origin in the center: the text grows evenly to both sides.",[73,102,103],{},"Origin bottom left: the text stays in the bottom-left corner and grows upwards and to the right.",[10,105,106,107,111,112,116],{},"This keeps text from a ",[19,108,110],{"href":109},"\u002Fhelp\u002Finput-fields\u002Ftext-input-fields","text input field"," in place the same way, no matter how much users write. The horizontal Origin and ",[19,113,115],{"href":114},"#align","Align"," are linked: a left, center or right Origin is the same as left, centered or right alignment. If you change one, the other changes too.",[10,118,119],{},[53,120],{"alt":121,"src":122,"width":123},"Position & Size section of a text next to the selected text on the canvas. An arrow points at the text's origin, left in the middle.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-text-origin-01\u002Fpublic?v=3b6d1869",1479,[59,125,127],{"id":126},"content","Content",[70,129,130],{},[73,131,132,134],{},[36,133,127],{},": the text itself. When you make the text changeable with an input field, this content becomes the input field's default value.",[59,136,138],{"id":137},"font","Font",[70,140,141,155],{},[73,142,143,146,147,150,151,154],{},[36,144,145],{},"Font Style",": the weight and style of the font, for example ",[36,148,149],{},"Bold"," or ",[36,152,153],{},"Light italic",". The list only shows what the chosen font has.",[73,156,157,160],{},[36,158,159],{},"Font Family",": the font. The button shows its name, and a click opens the list of all fonts. The text switches to the chosen font right away. Inter by default.",[10,162,163,164,23],{},"To use your own brand font, see ",[19,165,167],{"href":166},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fimporting-fonts","Upload a font: use your own fonts in templates",[59,169,171],{"id":170},"max-font-size","Max Font Size",[70,173,174],{},[73,175,176,178],{},[36,177,171],{},": the largest size the text can have. If the text does not fit its box at this size, it gets smaller until it fits. It never gets bigger than the Max Font Size. 52 by default.",[10,180,181,182,23],{},"This lets one design hold text of any length. Longer entries from an input field get smaller on their own instead of spilling out of the box. How the text gets smaller depends on ",[19,183,185],{"href":184},"#wrap","Wrap",[187,188,189],"tip",{},[10,190,191,192,194,195,198,199,203,204,207,208,211],{},"You can also set the Max Font Size by dragging on the ",[14,193,29],{},": in the ",[36,196,197],{},"Scale"," mode of the cursor button, see ",[19,200,202],{"href":201},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fdesign-tools","Design tools (zoom, align, scale, move)",". If you drag a handle in ",[36,205,206],{},"Select"," mode instead, you only change the size of the box. Hold ",[36,209,210],{},"Shift"," while dragging to change the Max Font Size along with it.",[10,213,214],{},[53,215],{"alt":216,"src":217,"width":123},"Max Font Size in the Text section next to the selected name text on the canvas.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-text-settings-03\u002Fpublic?v=e83cf572",[59,219,115],{"id":220},"align",[70,222,223],{},[73,224,225,227,228,230,231,234],{},[36,226,115],{},": aligns the lines left, center or right. Left by default. The text box stays where it is. ",[36,229,115],{}," also sets the horizontal ",[19,232,62],{"href":233},"#origin",", so a longer text grows in the matching direction.",[59,236,238],{"id":237},"spacing","Spacing",[10,240,241,243,244,248,249,252],{},[36,242,238],{}," has two fields. ",[245,246,247],"type",{},"Type"," a number or ",[250,251,250],"drag",{}," on the field.",[70,254,255,258],{},[73,256,257],{},"Left field: the line height. At 100 the lines have the font's normal spacing. Higher values add room between lines, lower values move them closer. 120 by default.",[73,259,260],{},"Right field: the letter spacing. 100 is the font's normal spacing. Higher values spread the letters apart, lower values pull them together. 100 by default.",[59,262,185],{"id":263},"wrap",[10,265,12,266,269],{},[36,267,268],{},"Text Settings"," row:",[70,271,272],{},[73,273,274,276,277],{},[36,275,185],{},": decides what happens when a text is wider than its box. On by default.\n",[70,278,279,282],{},[73,280,281],{},"On: the text breaks onto new lines to stay inside the box. If there is still not enough room, it gets smaller.",[73,283,284],{},"Off: the text keeps the line breaks you typed and never breaks on its own. Instead, the whole text gets smaller until it fits the box.",[10,286,287,288,291],{},"Either way, the text stays inside its box and starts at its ",[19,289,171],{"href":290},"#max-font-size",". With Wrap on, long text uses more lines. With Wrap off, it gets smaller.",[10,293,294],{},[53,295],{"alt":296,"src":297,"width":298},"Text Settings with Wrap switched on.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-text-wrap-01\u002Fpublic",339,[59,300,302],{"id":301},"enforce-uppercase","Enforce Uppercase",[70,304,305],{},[73,306,307,309],{},[36,308,302],{},": shows the text in capital letters only. The text you typed stays unchanged, only the display changes. This also works for text from an input field: whatever your users type shows in capitals. Off by default.",[59,311,313],{"id":312},"curved-text","Curved Text",[70,315,316],{},[73,317,318,320,321],{},[36,319,313],{},": makes the text run along a path. Off by default. When it is ticked, these appear below it:\n",[70,322,323,329,347],{},[73,324,325,328],{},[36,326,327],{},"Path",": the path the text follows.",[73,330,331,334,335,39,337,150,340,343,344,346],{},[36,332,333],{},"Baseline",": how the letters sit on the path: ",[36,336,333],{},[36,338,339],{},"Middle",[36,341,342],{},"Hanging",". ",[36,345,333],{}," by default.",[73,348,349,352,353,356,357,360],{},[36,350,351],{},"Offset",": the distance of the text from the start (",[36,354,355],{},"left",") and the end (",[36,358,359],{},"right",") of the path. 0 by default.",[10,362,363],{},[53,364],{"alt":365,"src":366,"width":367},"Curved Text in the Text section: the role text of the profile picture frame runs along a round path on the canvas.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-text-settings-04\u002Fpublic?v=19ea5470",1459,[10,369,370,371,23],{},"How it works is described in ",[19,372,374],{"href":373},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcurved-text","Put text on a curve",[59,376,378],{"id":377},"color-and-background","Color and background",[10,380,12,381,68],{},[36,382,45],{},[70,384,385,391,397,403],{},[73,386,387,390],{},[36,388,389],{},"Fill Color",": the color of the letters. Black by default. Without the tick, the text has no fill.",[73,392,393,396],{},[36,394,395],{},"Stroke Color",": an outline around the letters. Off by default.",[73,398,399,402],{},[36,400,401],{},"Background Color",": a background behind the text. Off by default.",[73,404,405,408],{},[36,406,407],{},"Background Stroke Color",": an outline around the background. Off by default.",[10,410,411],{},"As soon as the background has a color or an outline, more properties appear:",[70,413,414,420,437],{},[73,415,416,419],{},[36,417,418],{},"Background Corner Radius",": rounds the corners of the background.",[73,421,422,425,426,429,430,432,433,436],{},[36,423,424],{},"Background Clip",": how far the background reaches. ",[36,427,428],{},"Text Frame"," fills the whole text box (default). ",[36,431,42],{}," puts one rectangle tightly around all lines. ",[36,434,435],{},"Per Line"," gives every line its own background.",[73,438,439,442],{},[36,440,441],{},"Background Padding",": makes the background bigger by this distance.",[10,444,445],{},[53,446],{"alt":447,"src":448,"width":449},"Appearance section of a text with Background Color switched on and the Background Clip menu open: Text Frame, Text and Per Line.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-design-elements-02\u002Fpublic",938,[10,451,452,453,23],{},"For gradients, see ",[19,454,456],{"href":455},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients","Set colors and gradients",[59,458,460],{"id":459},"turn-and-slant-lines","Turn and slant lines",[10,462,463,464,466,467,470,471,473],{},"At the end of the ",[36,465,49],{}," section. If the section is closed, ",[468,469,468],"click",{}," ",[36,472,49],{},". All values are in degrees and 0 by default.",[70,475,476,485,493],{},[73,477,478,39,481,484],{},[36,479,480],{},"Rotate Text",[36,482,483],{},"Line °",": turns each line on its own. The whole element stays straight.",[73,486,487,39,489,492],{},[36,488,480],{},[36,490,491],{},"Char °",": turns each letter on its own. The line itself stays straight.",[73,494,495,39,498,46,501,504],{},[36,496,497],{},"Skew Lines",[36,499,500],{},"X °",[36,502,503],{},"Y °",": slants each line sideways (X) or up and down (Y).",[10,506,507,508,511],{},"Turned or slanted lines can reach past the text box. To turn the whole element, use ",[36,509,510],{},"Rotate"," further up in the same section.",[10,513,514],{},[53,515],{"alt":516,"src":517,"width":57},"Transforms section of a text with Rotate Text (Line 10°) and Skew Lines (X 15°) set.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-text-settings-02\u002Fpublic",[187,519,520],{},[10,521,522,523,525,526,23],{},"Like other properties, these can hold an expression or be connected to an input field. For example, a checkbox input field can switch ",[36,524,302],{}," on and off. More in ",[19,527,529],{"href":528},"\u002Fhelp\u002Finput-fields\u002Felements-properties-input-fields","How elements, properties and input fields fit together",[531,532,533],"related",{},[70,534,535,539,543,548],{},[73,536,537],{},[19,538,22],{"href":21},[73,540,541],{},[19,542,374],{"href":373},[73,544,545],{},[19,546,547],{"href":109},"Text input fields",[73,549,550],{},[19,551,167],{"href":166},{"title":553,"searchDepth":554,"depth":554,"links":555},"",2,[556,557,558,559,560,561,562,563,564,565,566],{"id":61,"depth":554,"text":62},{"id":126,"depth":554,"text":127},{"id":137,"depth":554,"text":138},{"id":170,"depth":554,"text":171},{"id":220,"depth":554,"text":115},{"id":237,"depth":554,"text":238},{"id":263,"depth":554,"text":185},{"id":301,"depth":554,"text":302},{"id":312,"depth":554,"text":313},{"id":377,"depth":554,"text":378},{"id":459,"depth":554,"text":460},"design-elements-and-tools","What each property of a text does: Origin, font, Max Font Size, Align, Spacing, Wrap, Enforce Uppercase, color, background and turned lines.","md",[401,424,571,572,573,574,137,159,145,171,575,115,238,576,577,185,578,62,302,313,480,497,571,424,579,580,581,582,583],"text background","text","text properties","text settings","font size","line height","letter spacing","line break","Schriftart","Zeilenabstand","Buchstabenabstand","Großbuchstaben","Text drehen",{},true,95,"\u002Fhelp\u002Fdesign-elements-and-tools\u002Ftext-settings","2026-10-13","---\ntitle: \"Text properties\"\ndescription: \"What each property of a text does: Origin, font, Max Font Size, Align, Spacing, Wrap, Enforce Uppercase, color, background and turned lines.\"\ncategory: design-elements-and-tools\norder: 95\nkeywords: [\"Background Color\", \"Background Clip\", \"text background\", \"text\", \"text properties\", \"text settings\", \"font\", \"Font Family\", \"Font Style\", \"Max Font Size\", \"font size\", \"Align\", \"Spacing\", \"line height\", \"letter spacing\", \"Wrap\", \"line break\", \"Origin\", \"Enforce Uppercase\", \"Curved Text\", \"Rotate Text\", \"Skew Lines\", \"text background\", \"Background Clip\", \"Schriftart\", \"Zeilenabstand\", \"Buchstabenabstand\", \"Großbuchstaben\", \"Text drehen\"]\n---\nIn the :place[properties panel] you decide how a text looks and how it behaves when it gets longer or shorter. This matters most when the text comes from an input field and you don't know how much your users will type. How to add a text is described in [Design elements (images, text, shapes)](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fdesign-elements).\n\nYou see the properties as soon as you select a text on the :place[canvas] or in the :place[layers panel]. They are in the sections **Position & Size**, **Text**, **Appearance** and **Transforms**.\n\n![Text section of a selected text: Content, Font Style, Font Family, Max Font Size, Align, Spacing, Wrap, Enforce Uppercase and Curved Text.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-text-settings-01\u002Fpublic){width=\"343\"}\n\n## Origin\n\nAt the top of the **Position & Size** section:\n\n- **Origin**: the point in the text box where the text sits. The first three buttons set it horizontally (left, center, right), the other three vertically (top, middle, bottom). Top left by default.\n- **Position**: where the Origin is on the :place[canvas] (X and Y).\n- **Size**: width and height of the text box (W and H). The text always stays inside this box.\n\nWhen the text is smaller than its box, it stays at the Origin. When it gets longer, it grows from there:\n\n- Origin in the center: the text grows evenly to both sides.\n- Origin bottom left: the text stays in the bottom-left corner and grows upwards and to the right.\n\nThis keeps text from a [text input field](\u002Fhelp\u002Finput-fields\u002Ftext-input-fields) in place the same way, no matter how much users write. The horizontal Origin and [Align](#align) are linked: a left, center or right Origin is the same as left, centered or right alignment. If you change one, the other changes too.\n\n![Position & Size section of a text next to the selected text on the canvas. An arrow points at the text's origin, left in the middle.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-text-origin-01\u002Fpublic?v=3b6d1869){width=\"1479\"}\n\n## Content\n\n- **Content**: the text itself. When you make the text changeable with an input field, this content becomes the input field's default value.\n\n## Font\n\n- **Font Style**: the weight and style of the font, for example **Bold** or **Light italic**. The list only shows what the chosen font has.\n- **Font Family**: the font. The button shows its name, and a click opens the list of all fonts. The text switches to the chosen font right away. Inter by default.\n\nTo use your own brand font, see [Upload a font: use your own fonts in templates](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fimporting-fonts).\n\n## Max Font Size\n\n- **Max Font Size**: the largest size the text can have. If the text does not fit its box at this size, it gets smaller until it fits. It never gets bigger than the Max Font Size. 52 by default.\n\nThis lets one design hold text of any length. Longer entries from an input field get smaller on their own instead of spilling out of the box. How the text gets smaller depends on [Wrap](#wrap).\n\n::tip\nYou can also set the Max Font Size by dragging on the :place[canvas]: in the **Scale** mode of the cursor button, see [Design tools (zoom, align, scale, move)](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fdesign-tools). If you drag a handle in **Select** mode instead, you only change the size of the box. Hold **Shift** while dragging to change the Max Font Size along with it.\n::\n\n![Max Font Size in the Text section next to the selected name text on the canvas.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-text-settings-03\u002Fpublic?v=e83cf572){width=\"1479\"}\n\n## Align\n\n- **Align**: aligns the lines left, center or right. Left by default. The text box stays where it is. **Align** also sets the horizontal [Origin](#origin), so a longer text grows in the matching direction.\n\n## Spacing\n\n**Spacing** has two fields. :type[Type] a number or :drag[drag] on the field.\n\n- Left field: the line height. At 100 the lines have the font's normal spacing. Higher values add room between lines, lower values move them closer. 120 by default.\n- Right field: the letter spacing. 100 is the font's normal spacing. Higher values spread the letters apart, lower values pull them together. 100 by default.\n\n## Wrap\n\nIn the **Text Settings** row:\n\n- **Wrap**: decides what happens when a text is wider than its box. On by default.\n  - On: the text breaks onto new lines to stay inside the box. If there is still not enough room, it gets smaller.\n  - Off: the text keeps the line breaks you typed and never breaks on its own. Instead, the whole text gets smaller until it fits the box.\n\nEither way, the text stays inside its box and starts at its [Max Font Size](#max-font-size). With Wrap on, long text uses more lines. With Wrap off, it gets smaller.\n\n![Text Settings with Wrap switched on.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-text-wrap-01\u002Fpublic){width=\"339\"}\n\n## Enforce Uppercase\n\n- **Enforce Uppercase**: shows the text in capital letters only. The text you typed stays unchanged, only the display changes. This also works for text from an input field: whatever your users type shows in capitals. Off by default.\n\n## Curved Text\n\n- **Curved Text**: makes the text run along a path. Off by default. When it is ticked, these appear below it:\n  - **Path**: the path the text follows.\n  - **Baseline**: how the letters sit on the path: **Baseline**, **Middle** or **Hanging**. **Baseline** by default.\n  - **Offset**: the distance of the text from the start (**left**) and the end (**right**) of the path. 0 by default.\n\n![Curved Text in the Text section: the role text of the profile picture frame runs along a round path on the canvas.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-text-settings-04\u002Fpublic?v=19ea5470){width=\"1459\"}\n\nHow it works is described in [Put text on a curve](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcurved-text).\n\n## Color and background\n\nIn the **Appearance** section:\n\n- **Fill Color**: the color of the letters. Black by default. Without the tick, the text has no fill.\n- **Stroke Color**: an outline around the letters. Off by default.\n- **Background Color**: a background behind the text. Off by default.\n- **Background Stroke Color**: an outline around the background. Off by default.\n\nAs soon as the background has a color or an outline, more properties appear:\n\n- **Background Corner Radius**: rounds the corners of the background.\n- **Background Clip**: how far the background reaches. **Text Frame** fills the whole text box (default). **Text** puts one rectangle tightly around all lines. **Per Line** gives every line its own background.\n- **Background Padding**: makes the background bigger by this distance.\n\n![Appearance section of a text with Background Color switched on and the Background Clip menu open: Text Frame, Text and Per Line.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-design-elements-02\u002Fpublic){width=\"938\"}\n\nFor gradients, see [Set colors and gradients](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients).\n\n## Turn and slant lines\n\nAt the end of the **Transforms** section. If the section is closed, :click[click] **Transforms**. All values are in degrees and 0 by default.\n\n- **Rotate Text**, **Line °**: turns each line on its own. The whole element stays straight.\n- **Rotate Text**, **Char °**: turns each letter on its own. The line itself stays straight.\n- **Skew Lines**, **X °** and **Y °**: slants each line sideways (X) or up and down (Y).\n\nTurned or slanted lines can reach past the text box. To turn the whole element, use **Rotate** further up in the same section.\n\n![Transforms section of a text with Rotate Text (Line 10°) and Skew Lines (X 15°) set.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-text-settings-02\u002Fpublic){width=\"343\"}\n\n::tip\nLike other properties, these can hold an expression or be connected to an input field. For example, a checkbox input field can switch **Enforce Uppercase** on and off. More in [How elements, properties and input fields fit together](\u002Fhelp\u002Finput-fields\u002Felements-properties-input-fields).\n::\n\n::related\n- [Design elements (images, text, shapes)](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fdesign-elements)\n- [Put text on a curve](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcurved-text)\n- [Text input fields](\u002Fhelp\u002Finput-fields\u002Ftext-input-fields)\n- [Upload a font: use your own fonts in templates](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fimporting-fonts)\n::\n",{"title":5,"description":568},"help\u002Fdesign-elements-and-tools\u002Ftext-settings","2026-10-22","K7oWWyTM2BQ61q8WnINx0WC1P7d0wNAdSnveZzOZ2ho",1792680561460]