1. Description

Font defines how text is rendered inside a Text element*link to elements page* or any text within an advanced element. It covers the full set of typographic controls, from the typeface family and its weight, to the font size, the color, and how the text is aligned horizontally and vertically within the element's boundaries. Together, these properties determine the hierarchy, readability, and visual tone of any text on the page.

. 

2. Possible values

Font is controlled through five sub-properties within the Font accordion:

1. Font family - A typeface family such as Montserrat, Open Sans, Lato, and more, selected from the font picker dropdown. Match the typeface to the application's brand or visual hierarchy and use a consistent family across the portal page for cohesion.
2. Font weight - This controls the weight of the font used in the text element. The available options are Light, Regular, Medium, Bold, and Extra Bold. While the subtler weights are suitable for body text, and supporting labels, the heavier ones are more suitable for primary headings, key metrics, and more.
3. Font size - A numeric value in px selected from the size dropdown. The available options range from 8 to 72px. While the smaller sizes are suitable for fine print and captions, the larger ones are more suitable for hero sections and headings.
4. Font color - A color value selected from the color picker. Applies to the text characters distinct from the element's background color. The available options to choose a font color are:

   Option	How it works
   Standard	Pick from Document Colors, Standard colors, or Monochrome colors in the color picker.
   Custom	Enter a hex or RGB code directly for a precise color value.

5. Text alignment - This controls where the text container is positioned within the Text element's boundary. Alignment is controlled through two independent axes with three options each.
   1. Horizontal alignment - Controls where content is placed along the left-to-right axis:

      Value	How it works
      Left	Aligns content to the left. Ideal for: Body text, labels, left-to-right reading content, etc
      Center	Balances content visually at the center. Ideal for: Headings, icons, call-to-action labels, etc.
      Right	Aligns content to the right. Ideal for: Numeric values, currency, trailing labels, etc.

   2. Vertical alignment - Controls where content is placed along the top-to-bottom axis:

      Value	How it works
      Top	Aligns content to sit flush at the top. Ideal for: Headings in a tall container, multiline blocks where content reads from the top, etc.
      Middle	Balances content vertically within the element's height. Ideal for: Single-line labels or values that should sit at the visual center, etc
      Bottom	Aligns content to the base of an element's container. Ideal for: Labels below an icon, etc.

Note: Text alignment here positions the content within the Text element's boundary. It is distinct from element-level Alignment*link to Alignment doc*, which positions the element itself within its parent stack or screen.

3. How to set font?

1. Select a Text element on the building space and click the three ellipsis on the hovering toolbar to open the Properties pane on the right.
2. Click and open the Font accordion within the pane.
3. Set font properties:
   1. Font family: Select a typeface from the left dropdown.
   2. Font weight: Select a weight from the right dropdown.
   3. Font size: Select a size from the left dropdown in the second row.
   4. Font color: Click the color swatch in the right field of the second row to open the color picker. Choose a color from the Standard or Custom tabs.
4. Set text alignment:
   1. Horizontal: Click the desired icon (left, center, right) in the left button group of the third row.
   2. Vertical: Click the desired icon (top, middle, bottom) in the right button group of the third row.
5. Click Save in the top right corner to ensure the changes are retained.

4. Applicable elements

Font styling is available only on the below element:

1. Text

5. Points to note

1. Font color is distinct from background color - Font color applies to the text characters only. To change the fill color behind the text, use the Background*link to Background doc* property on the Text element.
2. Text alignment is not the same as element alignment - The text alignment positions the content within the Text element's own boundary. Element-level Alignment*link to Alignment doc* positions the Text element itself within its parent container or page. Both can be set independently and affect the visual result together.
3. Font size interacts with element height - If the Text element has a fixed height that is smaller than the rendered text, content may overflow. Consider using Auto height in Layout*link to Layout doc* when text length is variable.

Explore other properties

1. Alignment
2. Layout
3. Padding
4. Margin
5. Background
6. Corner Radius
7. Border
8. Shadow
9. Opacity
10. Image and icon styling
11. Tab styling
12. Stack