{"id":249,"date":"2026-10-17T14:16:41","date_gmt":"2026-10-17T14:16:41","guid":{"rendered":"http:\/\/plugin-docs.com\/?post_type=doc&#038;p=249"},"modified":"2026-10-18T19:10:47","modified_gmt":"2026-10-18T19:10:47","slug":"customize-form-typography","status":"publish","type":"doc","link":"https:\/\/dragwyb.com\/docs\/customize-form-typography\/","title":{"rendered":"Customize Form Typography"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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&#8217;s <strong>Style<\/strong> panel, so choose the group that matches the text you want to change.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Open the relevant typography controls<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open the form in the editor and select <strong>Style<\/strong>. Depending on the text element, look for <strong>Labels &amp; Help Text<\/strong>, <strong>Input Fields<\/strong>, <strong>Radio &amp; Checkbox Fields<\/strong>, <strong>Steps Field<\/strong>, or <strong>Button<\/strong>. These sections expose separate typography groups for the relevant elements; changing one group does not automatically mean every text element uses the same settings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Typography options<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Family<\/strong> \u2014 choose an available font family. The actual choices depend on the font options registered for the control.<\/li>\n\n\n<li><strong>Font Size<\/strong> \u2014 set the text size. The responsive Font Size control supports px, %, em, rem, vh, and vw units.<\/li>\n\n\n<li><strong>Weight<\/strong> \u2014 choose a weight such as Default, Normal, Bold, or a numeric weight where available.<\/li>\n\n\n<li><strong>Transform<\/strong> \u2014 keep the default treatment or choose None, Uppercase, Lowercase, or Capitalize.<\/li>\n\n\n<li><strong>Style<\/strong> \u2014 choose the available default, Normal, Italic, or Oblique treatment.<\/li>\n\n\n<li><strong>Decoration<\/strong> \u2014 use the available default, None, Underline, Overline, or Line Through treatment.<\/li>\n\n\n<li><strong>Line Height<\/strong> \u2014 adjust the distance between lines. The responsive control supports px, %, em, rem, vh, and vw; its configured default is 1.5em.<\/li>\n\n\n<li><strong>Letter Spacing<\/strong> and <strong>Word Spacing<\/strong> \u2014 adjust spacing between characters or words where these controls are shown. Both controls support px, %, em, and rem; their configured defaults are 0px.<\/li>\n\n\n<li><strong>Alignment<\/strong> \u2014 choose the supported text alignment for that typography group.<\/li>\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Apply changes carefully<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>Start with the specific group you want to change. For example, use <strong>Labels &amp; Help Text<\/strong> for field labels or help text and <strong>Input Fields<\/strong> for text visitors type into inputs.<\/li>\n\n\n<li>Change one or two properties at a time, then review the preview so you can identify which setting affected the result.<\/li>\n\n\n<li>Use readable sizes and line spacing. Avoid decorative treatments that make labels, instructions, or validation text difficult to scan.<\/li>\n\n\n<li>Review longer labels and help text at mobile widths. Responsive settings are available for selected typography controls, not necessarily every property.<\/li>\n\n\n<li>Click <strong>Save<\/strong> in the editor header after the changes are ready, then inspect <strong>Frontend Preview<\/strong>.<\/li>\n\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This guide covers visual text settings only. To change the words visitors see, use the relevant field&#8217;s content settings instead. For related appearance controls, see <a href=\"https:\/\/dragwyb.com\/docs\/docs\/smart-form-builder\/customize-form-field-styles\/\">Customize Form Field Styles<\/a> and <a href=\"https:\/\/dragwyb.com\/docs\/docs\/smart-form-builder\/customize-form-buttons\/\">Customize Form Buttons<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Typography groups in the global Style panel<\/h2>\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Labels &amp; Help Text \u2192 Typography<\/strong> \u2014 field label text.<\/li>\n\n\n<li><strong>Labels &amp; Help Text \u2192 Help Text Typography<\/strong> \u2014 explanatory text displayed with a field.<\/li>\n\n\n<li><strong>Input Fields \u2192 Typography<\/strong> \u2014 text entered into input controls.<\/li>\n\n\n<li><strong>Radio &amp; Checkbox Fields \u2192 Typography<\/strong> \u2014 text beside radio and checkbox options.<\/li>\n\n\n<li><strong>Steps Field \u2192 Step Typography<\/strong> \u2014 text in the step indicator; this control is hidden when Indicator Type is None.<\/li>\n\n\n<li><strong>Button \u2192 Typography<\/strong> \u2014 text displayed on form buttons.<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-paragraph\">The shared typography control includes properties such as <strong>Family<\/strong>, <strong>Font Size<\/strong>, <strong>Weight<\/strong>, <strong>Transform<\/strong>, <strong>Style<\/strong>, <strong>Decoration<\/strong>, <strong>Line Height<\/strong>, <strong>Letter Spacing<\/strong>, <strong>Word Spacing<\/strong>, and <strong>Alignment<\/strong> where provided. Responsive options and available units can vary by property and control. For the complete global section inventory, see <a href=\"https:\/\/dragwyb.com\/docs\/docs\/smart-form-builder\/design-templates\/\">Form Design and Templates<\/a>.<\/p>\n\n\n\n\n<p class=\"wp-block-paragraph\">Screenshot to add: Typography controls for a selected text group in the Style panel<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adjust typography for labels, help text, inputs, choice options, steps, and buttons with the controls available in the Style panel.<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":247,"menu_order":0,"template":"","class_list":["post-249","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":4,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/249\/revisions"}],"predecessor-version":[{"id":1165,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/249\/revisions\/1165"}],"up":[{"embeddable":true,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/247"}],"wp:attachment":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/media?parent=249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}