Change font sizes

Your app consists of several elements that have specific font features. The font sizes of the different contents of an element can be changed via the respective editor.

In this article, you will learn how to change font sizes.

In this article:

• Change the font size of the input and output values
• Caption Text font size
• Metric Text font size
• Header text font size

Change the font size of the input and output values

Value text is the content that is displayed in elements. These are the input values that the user enters into the app and the output values that are displayed when a computation is made in an element.

To change the font size of the value text, proceed as follows:

1. Open the editor for the desired element. (Clicking on the pen icon in the preview.)
2. Navigate to the "Style" tab.
3. Enter the desired value under "Value Font Size". (Default = 30)
4. Save changes and update the app.

Caption Text font size

The caption text is displayed in input or output elements on the left above the content and serves as an explanatory intermediate text. The text gives for example information about which value is entered in the element.

Changing the font size is somewhat more complicated, but it can be implemented quickly.

To change the font size of the caption text, proceed as follows:

1. Open the editor for the desired element. (Clicking on the pen icon in the preview.)
2. Navigate to the "Advanced" tab.
3. Add the definition: captionfontsize=x;
4. Replace "with" with the desired value. (Default = 14)
5. Save changes and update the app.

Please make sure to separate the definitions with a semicolon (;) and do not use any spaces.

The contents of the caption can be changed in the editor in the "Main" tab.

Metric Text font size

The metric text is displayed to the right of the contents of an input or output value. This could, for example, be a currency or a percentage symbol.

To change the font size of the metric text, proceed as follows:

1. Open the editor for the desired element. (Clicking on the pen icon in the preview.)
2. Navigate to the "Advanced" tab.
3. Add the definition: metricfontsize=x;
4. Replace "with" with the desired value. (Default = 14)
5. Save changes and update the app.

Please make sure to separate the definitions with a semicolon (;) and do not use any spaces.

The content of the metric text can be changed in the editor in the "Main" tab.

Header text font size

The header element allows you to add an additional heading to your app.

You add the header element under "Edit" » "Rearrange elements". Using the green "plus" symbol, new elements can be added by drag & drop.

To change the font size of the header text, proceed as follows:

1. Open the editor for the desired element. (Clicking on the pen icon in the preview.)
2. Navigate to the "Style" tab.
3. Enter the desired value under "Font size". (Default = 21)
4. Save changes and update app.

The content of the header can be changed in the editor in the "Main" tab.