(function openLouie() { let louie = document.getElementById("Dropdown-Toggle-14"); louie.classList = "host-toggle w-dropdown-toggle w--open"; console.log(louie); })();

In this section, you can make style edits on the text in the element you added. You can adjust settings such as font size, color or letter spacing. Elements with text content (such as labels or buttons) come with a predefined style. Edits you make on this style will apply to all elements to which the style is added. In addition to the predefined styles, you can create your own styles and use them on elements.

A. Font Family

You can use any of the default fonts on the platform.


You can choose the font style such as thin, light, regular, medium, bold according to the font family you have chosen.

C. Size and Color

You can change the font size (x height) unit from the Size section. With the help of Color Picker, you can determine the color of the text. Although pixels are the most used font size (x height) unit on the web, there are other options:

  • points (pt)
  • Rems (root ems)
  • EMS


It is the general unit of measurement for print texts.


EMS scales the font sizes proportionally, looking at the parent element. An em is based on the width of a font's capital letter M.

For example, if a font is 12 pixels:

  • 1 em is 12 pixels
  • 2 ems is 24 pixels
  • 1.5 ems is 18 pixels


A rem is calculated by taking your rem value and multiplying it by the HTML font size. It adapts to the browser's font size unless you change it manually in code.


You can decide the color of the text by selecting it from the color picker, by entering the RGB value or by the Hex code.


There are different options such as bold, italic, underlined text, strikethrough text, all uppercase, all lowercase.

1. All caps

Shows the written text or the text to be entered in capital letters. All caps can put a heavy burden on the reader, especially in long paragraphs. Readers interrupt the flow by announcing all caps as separate letters, making them difficult to understand. For longer texts, you may want to consider limiting the use of all capital letters.

2. All Lowercase

Shows the written text or the text to be entered in lower case. All lowercase letters make it easy for readers to write long paragraphs. Thin fonts are extremely difficult to read, especially in long paragraphs. Some characters are not very legible, it applies to uneven weight distribution in a font. That's why it's very important how many pixels you choose for your body text font.

3. Underlined text-Bold-Italic

There is an expectation on the web that underlined text indicates a hyperlink. If you're trying to emphasize, consider using italic or bold text (or make style changes by wrapping elements in a range). Use italics (left) or bold text (right) to emphasize your text, rather than underlining (which can be confused with a hyperlink).

E. Spacing

It is the field where you set the line height (Leading) and letter spacing (Kerning). The space between lines in text is called line height. The ideal line height should be at least 1.5 times the font size for paragraphs and text blocks.

You can adjust the letter spacing (Kerning) depending on the font you use or the style you want to prepare.

Simplicity Meets High Performance

Free edition subscription
Keep your work
No credit card required to try