Typography

https://youtu.be/8CQzrOO0Y6U

The Typography tab is responsible for configuring the appearance of text components.

Font determines the typeface for text elements added to the editor. By default, Arial is used, but it can be customized with the predefined fonts.

Font Size specifies the size of text elements added to the editor. There is flexibility to use different measurement units, but pixels are closest to points which are commonly used for font sizes in printed materials.

1 pixel = 0.75 points

Font Weight allows for defining the thickness of the font, ranging from thin to ultra-bold.

Letter Spacing controls the spacing between characters in the selected text element.

Font Color is used to set the color of the displayed text. The color and its opacity can be chosen by using the color panel and setting it via HEX, RGB, or HSL color codes. If using any color system other than HEX, you should specify the name of the system before the code value.

Example: RGB(165,23,45)

Font Style enables choosing between normal or italic font styles.

Text Transform applies capitalization styles to the text.

Line Height adjusts the height of text lines.

Overflow defines the behavior when content exceeds the dimensions of the parent container. It can take various values:

  • "Visible" means the content is not clipped and may extend beyond the element's padding box.

  • "Hidden" clips the content at the element's padding box.

  • "Scroll" clips the content at the padding box but provides scroll bars to access overflow content.

  • "Auto" clips content at the padding box and allows scrolling to view overflow content.

Text Align adjusts the placement of content within the container.

Text Decoration allows applying styles like underlining and strikethrough.

Text Shadow adds shadow effects to the text element along three coordinate axes. The shadow color also can be modified.