Font Settings

Font Family

Key Point:
Set the typeface used for the button text. This directly affects the button's visual impression and brand consistency.

What this changes:
The same wording can convey different levels of trust and approachability depending on the typeface.

Adjustment tips:
If the button font differs too much from the body text, it can feel jarring. Start by matching the same font family used across the site.

Settings

• Font list (Default / System / Theme fonts): Select a font to align brand tone and readability.
• Weight (100-900): Set the font weight to adjust information hierarchy. Responsive-aware, allowing different weights per device.
• Edit Font: Open the font settings screen for detailed typeface adjustments.

Hover state Font Family and Weight can also be set independently. If device-specific changes are needed, enable the Responsive.

Hover layout shift limitation:
Changing the font weight on hover may cause the text width to change, resulting in button resizing or text reflow (layout shift). To prevent this, either fix the button's Width / Height or keep the weight change small (e.g., 400 to 500).

Font Size

Key Point:
Set the text size. This is a critical setting that directly impacts readability and click-through rates.

What this changes:
Text that is too small on mobile will fail to deliver the intended message.

Adjustment tips:
After fine-tuning on desktop, either increase the size by one step on mobile or reduce the number of lines — adjusting both together prevents layout issues.

Settings

• Preset selection (Default / Theme / Custom): Choose a size preset for quick initial setup.
• Custom Size: Specify the font size numerically for precise control.
• Unit (px / em / rem / vw): Select the size unit to determine fixed or fluid behavior.
• Responsive: Enable device-specific settings to prevent display issues.
• Edit Font Size: Edit the size settings to optimize appearance per device.

Using em / rem makes the size relative to the browser or theme base font size. Using vw scales the text with the viewport width, which is effective for responsive design but may produce extremely large or small text in edge cases — checking minimum and maximum values is recommended. Hover state font size can also be set independently.

Line Height

Key Point:
Set the line spacing for multi-line text. This controls the balance between readability and visual density.

What this changes:
Too tight and reading speed drops; too loose and the text loses cohesion.

Adjustment tips:
Use 1.2-1.6 as a baseline. As text length increases, slightly wider spacing tends to be more stable.

Settings

• Preset selection (Default / Tight / Normal / Loose, etc.): Choose a line height preset for quick readability adjustments.
• Custom Line Height: Specify the line height numerically to optimize readability for two or more lines.
• Unit (unitless / px / em / rem / %): Specify the line height unit to choose between ratio-based or fixed values.
• Responsive: Enable device-specific settings to prevent display issues.

When specified without a unit (e.g., 1.5), the value is calculated as a multiplier of the font size. This maintains the ratio even when the font size changes, making unitless values the recommended approach for responsive design. The default value is 1.2. Hover state line height can also be set independently.

CSS variable control:
Line Height and Letter Spacing are internally controlled exclusively through CSS variables (--line-height-pc / --letter-spacing-pc, etc.). Since they are inherited via CSS variables rather than inline styles, they do not interfere with font settings on inner elements such as Micro Text and Sub Text.

Letter Spacing

Key Point:
Set the spacing between characters. This is used to fine-tune heading-like presence, premium feel, and readability nuance.

What this changes:
The visual impact can be significant, but over-adjustment is a common cause of poor readability.

Adjustment tips:
For English text, start with small adjustments in the range of 0 to 0.5px and fine-tune from there.

Settings

• Preset selection (Tight / Normal / Wide, etc.): Choose a letter spacing preset to adjust the density impression.
• Custom Value: Set a custom letter spacing value for precise readability and design tuning.
• Unit (px / em / rem / %): Select the spacing unit to choose between fixed or relative adjustments. The default unit is em.
• Responsive: Enable device-specific settings to prevent display issues.

When using em units, letter spacing is calculated as a ratio of the font size. For example, 0.05em adds spacing equal to 5% of the font size. Negative values can be used to tighten spacing, but be aware this may reduce readability. Hover state letter spacing can also be set independently.

Related FAQ

• 文字難讀時的調整順序 – ZenBlocks buttonBasic
• 裝置別設定沒有生效時的檢查方式 – ZenBlocks buttonBasic