Typography

The TYPOGRAPHY option in the JetFormBuilder Style section contains settings for customizing the text displayed in the form fields. Each text element can be styled independently, allowing one to create different visual treatments for labels, descriptions, values, and other text elements.

The Typography popover appears after pressing the namesake field. It contains the following options:

typography style settings jetformbuilder
  • FONT FAMILY — selects the font family for the text. One can manage the available fonts via the provided link;
  • FONT SIZE — sets the text size. The default units of measurement are pixels (px); other options are:
    • em — sets the font size relative to the font size of the parent (inherited) element. For example, “2em” sets the font size to twice the inherited parent font size. The parent element can be defined in the CSS code;
    • % — sets the font size as a percentage relative to the inherited font size of the parent element;
    • rem — sets the font size relative to the font size of the root (<html>) element. For example, “2rem” means twice the font size defined for the root <html> element.
typography font size style settings jetformbuilder
  • LINE HEIGHT — defines the height of each line of text (in px, em, %, rem). It doesn’t depend on the letter size;
typography line height style settings jetformbuilder
  • FONT WEIGHT — sets the thickness of the text from “100” (thin) to “900” (black);
typography font weight style settings jetformbuilder
  • FONT STYLE — applies a font style: “Default”, “Normal”, “Italic”, or “Oblique”;
typography font style settings jetformbuilder
  • LETTER CASE — changes the capitalization of the text. Available options include: default (—), uppercase (AB), lowercase (ab), and title (Ab) case;
typography letter case style settings jetformbuilder
  • DECORATION — adds text decoration, such as underline or strikethrough;
  • LETTER SPACING — sets the space between the letters of the text (in px, em, %, rem). By default, it is set to “0”, which preserves the normal spacing defined by the selected font. Increasing or decreasing the value adds or reduces the space between characters accordingly.
typography letter spacing style settings jetformbuilder

FAQ

Can I customize different text elements separately?

Yes, the Typography settings can be applied independently to text elements such as field labels, descriptions, and values, allowing you to give each element its own appearance.

What font size units are available in JetFormBuilder?

The Font Size setting supports px, em, %, and rem. These units allow you to define font size using fixed pixels or relative sizing based on inherited or root font sizes.

That’s all about the Typography style settings in JetFormBuilder. With these options, you can customize the appearance of text in your WordPress forms, including its font, size, weight, line height, spacing, style, and capitalization.

Related Docs