Typography Tab

Typography

The Typography Tab provides settings to customize the appearance of text for each selected widget.

Typography Tab

1. Content Text:

• Description: This is the field where you input or edit the text for the selected widget. The changes made here will be immediately visible in the preview area.

• Action: Double-click to enter or edit the text content.

2. Font:

• Description: The Font dropdown allows you to choose the font family for the selected text. The font family controls the overall typeface used for the content in that specific widget.

• Default Setting: "Unset"

• Action: Select a font family from the dropdown to apply it to the text.

3. Line Height:

• Description: Line height controls the vertical spacing between lines of text. This setting helps adjust readability and the overall spacing within the widget's content.

• Default Setting: "Unset"

• Action: You can select the unit for line height from the dropdown menu (such as px, rem, %, vw, or vh) and enter a numerical value in the input field.

  • px: Pixel-based unit for precise control.

  • rem: Relative to the root element’s font size, commonly used for scalable designs.

  • %: Defines line height as a percentage of the font size.

  • vw: Viewport width-based unit, scalable with the width of the screen.

  • vh: Viewport height-based unit, scalable with the height of the screen.

4. Font Weight:

• Description: Font weight defines the thickness of the text. This property allows you to make the text bold or light, depending on the weight selected.

• Default Setting: "Normal"

• Action: Choose a font weight value from the dropdown. The dropdown includes several options:

  • 100 to 900: Numeric values ranging from 100 (lightest) to 900 (boldest). The exact appearance depends on the font family you are using.

  • Normal (400): Standard weight, typically used for regular text.

  • Bold (700): Bold text, commonly used for emphasizing important content.

  • Bolder: A weight heavier than the parent element’s font weight.

  • Lighter: A weight lighter than the parent element’s font weight.

  • Initial: Resets to the default font weight defined by the browser.

  • Inherit: Inherits the font weight from the parent element.

5. Font Style:

• Description: Font style lets you select the text style, either normal, italic, or oblique.

• Default Setting: "Normal"

• Action: Select from Normal, Italic, or Oblique to change the style of the text.

6. Text Decoration:

• Description: This setting allows you to add decorative effects to the text, such as underlining or other line styles. You can choose from several types of text decorations to customize how the text is visually emphasized.

• Default Setting: No decoration (no underline)

• Action: Choose one of the following options from the dropdown:

  • Underline: Adds a solid line beneath the text.

  • Dotted Underline: Adds a dotted line beneath the text.

  • Dashed Underline: Adds a dashed line beneath the text.

  • Overline: Adds a solid line above the text.

  • Double Underline: Adds a double solid line beneath the text.

7. Text Align:

• Description: The Text Align property controls the horizontal alignment of the text within the widget. This setting helps in positioning the text in different ways based on your design needs.

• Default Setting: "Left"

• Action: Choose one of the following options for text alignment:

  • Left: Aligns the text to the left of the container (default).

  • Center: Centers the text horizontally within the container.

  • Right: Aligns the text to the right of the container.

  • Justify: Distributes the text evenly across the line, aligning both the left and right edges.

  • Start: Aligns the text to the start of the container (based on the text direction).

  • End: Aligns the text to the end of the container (based on the text direction).