DigiFlash provides a flexible font sizing system through the Site Editor that allows you to control text sizes globally and at the block level.
Accessing Font Size Settings
Navigate to Appearance → Editor and click the Styles icon in the top-right corner. Within the Typography section, you’ll find font size controls for different text elements.
Understanding the Font Size Scale
DigiFlash uses a predefined font size scale with named presets:
Extra Small – Smallest text size for captions and fine print
Small – Reduced size for secondary content
Medium – Standard body text size
Large – Slightly larger text for emphasis
Extra Large – Prominently sized text
Huge – Largest preset for impactful headlines
Each preset corresponds to a specific pixel or rem value that maintains consistent sizing across your website.
Adjusting Body Text Size
In the Typography panel, click on Text to access body text settings. Below the font family options, you’ll see a Size control.
Click the Size dropdown to view all available font size presets. Select any preset to apply it as your default body text size. The preview updates immediately to show how the new size affects your content.
This setting controls the base font size for all paragraph text, list items, and general content throughout your website.
Customizing Heading Sizes
To adjust heading sizes, scroll to the Blocks section in the Typography panel and click on Heading. You’ll see options for each heading level (H1 through H6).
Click on any heading level to expand its settings. The Size control appears below the font family option. Each heading level can have an independent font size, creating a clear typographic hierarchy.
Typically, H1 uses the largest size, with each subsequent heading level using progressively smaller sizes. However, you can customize this hierarchy to match your design needs.
Setting Custom Font Sizes
Beyond the preset options, you can define custom font sizes. Click on the Size dropdown and select Custom at the bottom of the preset list.
A text input field appears where you can enter a specific value. Font sizes can be specified in multiple units:
Pixels (px) – Fixed size that remains constant (e.g., 18px)
Rem units – Relative to the root font size, better for accessibility (e.g., 1.125rem)
Em units – Relative to parent element font size (e.g., 1.5em)
Viewport units – Relative to viewport width (vw) or height (vh) for responsive scaling
Type your desired value directly into the custom size field. Include the unit abbreviation (px, rem, em, vw) after the number.
Using the Size Slider
When Custom is selected, a slider control appears below the input field. Drag the slider left to decrease font size or right to increase it. The slider provides visual feedback while adjusting, making it easier to find the optimal size.
The slider range adapts based on the selected element type. Body text sliders typically range from 12px to 24px, while heading sliders offer a larger range up to 96px or more.
Adjusting Line Height with Font Size
Font size and line height work together to ensure readable text. When you adjust font size, consider also modifying the line height setting located just below the size control.
Line height controls the vertical spacing between lines of text. Larger font sizes often benefit from increased line height to maintain readability, while smaller text may need tighter line spacing.
Block-Level Font Size Adjustments
When editing individual blocks in a page or template, select any text block and open its settings panel. The Typography section within block settings includes a Size control.
Block-level size adjustments override global typography settings. This allows you to emphasize specific content sections with larger text or reduce size for less important information without affecting your entire website.
Responsive Font Sizing
DigiFlash automatically adjusts font sizes for different screen sizes to maintain readability on mobile devices. When you set font sizes using rem or em units, the theme’s responsive design ensures text scales appropriately.
To preview how font sizes appear on different devices, use the preview mode buttons at the bottom of the Site Editor. Toggle between desktop, tablet, and mobile views to verify your font sizes work across all screen sizes.
Resetting Font Sizes
To revert font size changes to the theme defaults, click the three-dot menu next to the Size control and select Reset. This option removes your custom size and restores the original DigiFlash preset value.