Typography controls let you tune how text appears across a form without changing the field labels or the text visitors enter. Smart Form Builder by Dragwyb provides typography controls in several sections of the editor’s Style panel, so choose the group that matches the text you want to change.
Open the relevant typography controls
Open the form in the editor and select Style. Depending on the text element, look for Labels & Help Text, Input Fields, Radio & Checkbox Fields, Steps Field, or Button. These sections expose separate typography groups for the relevant elements; changing one group does not automatically mean every text element uses the same settings.
Typography options
- Family — choose an available font family. The actual choices depend on the font options registered for the control.
- Font Size — set the text size. The responsive Font Size control supports px, %, em, rem, vh, and vw units.
- Weight — choose a weight such as Default, Normal, Bold, or a numeric weight where available.
- Transform — keep the default treatment or choose None, Uppercase, Lowercase, or Capitalize.
- Style — choose the available default, Normal, Italic, or Oblique treatment.
- Decoration — use the available default, None, Underline, Overline, or Line Through treatment.
- Line Height — adjust the distance between lines. The responsive control supports px, %, em, rem, vh, and vw; its configured default is 1.5em.
- Letter Spacing and Word Spacing — adjust spacing between characters or words where these controls are shown. Both controls support px, %, em, and rem; their configured defaults are 0px.
- Alignment — choose the supported text alignment for that typography group.
Apply changes carefully
- Start with the specific group you want to change. For example, use Labels & Help Text for field labels or help text and Input Fields for text visitors type into inputs.
- Change one or two properties at a time, then review the preview so you can identify which setting affected the result.
- Use readable sizes and line spacing. Avoid decorative treatments that make labels, instructions, or validation text difficult to scan.
- Review longer labels and help text at mobile widths. Responsive settings are available for selected typography controls, not necessarily every property.
- Click Save in the editor header after the changes are ready, then inspect Frontend Preview.
This guide covers visual text settings only. To change the words visitors see, use the relevant field’s content settings instead. For related appearance controls, see Customize Form Field Styles and Customize Form Buttons.
Typography groups in the global Style panel
The typography controls are distributed across several global Style sections. Select the section for the text you want to change; these groups are separate, so changing label typography does not automatically change input, choice, step, or button text.
- Labels & Help Text → Typography — field label text.
- Labels & Help Text → Help Text Typography — explanatory text displayed with a field.
- Input Fields → Typography — text entered into input controls.
- Radio & Checkbox Fields → Typography — text beside radio and checkbox options.
- Steps Field → Step Typography — text in the step indicator; this control is hidden when Indicator Type is None.
- Button → Typography — text displayed on form buttons.
The shared typography control includes properties such as Family, Font Size, Weight, Transform, Style, Decoration, Line Height, Letter Spacing, Word Spacing, and Alignment where provided. Responsive options and available units can vary by property and control. For the complete global section inventory, see Form Design and Templates.
Screenshot to add: Typography controls for a selected text group in the Style panel