The design options for Number Text enable you to customize and style number-based text elements in a module. These settings manage typography, alignment, spacing, and visual effects, harmonizing the number text with your site's overall design.
Where to Find the Number Text Options
Open the Module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Design Tab: Locate the Number Text option group.
Number Text Customization Settings
Number Font: Choose a font from the dropdown or upload a custom font for unique styling.
Number Font Weight: Adjust the boldness of your Number with options like light, bold, or extra-bold.
Variable Font Options: those options will only be available if you are using a Google variable font such as Robo, Google Sans Flex, or Bitcount):
Variable Font Weight: Use the slider or type in a numeric value for the font weight.
Optical Sizing: Enable automatic optical size handling.
Variable Font Width: Fine-tune variable font width using variable font interpolation.
Variable Font Slant: Fine-tune variable font slant using variable font interpolation.
Variable Font Crsv: Fine-tune variable font crsv using variable font interpolation.
Variable Font Element Shape: Fine-tune variable font element shape using variable font interpolation.
Variable Font Element Expansion: Fine-tune variable font element expansion using variable font interpolation.
Variable Font Rond: Fine-tune variable font rond using variable font interpolation.
Variable Font Grade: Fine-tune variable font grade using variable font interpolation.
Variable Font Width: Fine-tune variable font width using variable font interpolation.
Number Text Size: You can adjust the font size of your Number text using the slider or by entering a specific value. It also accepts Global Variables.
Number Text Color: Choose a color to be used for the Number text. It also accepts Global Variables.
Number Line Height: Set the space between the lines of the Number text, helping to improve readability. It also accepts Global Variables.
Number Letter Spacing: Control the space between letters by adjusting the slider or entering a value. It also accepts Global Variables.
Number Text Alignment: Set the alignment for the Number text—left, center, right, or justified.
Number Capitalization: Choose the Number text's capitalization:
Uppercase - All letters are in uppercase format
Capitalize - Makes the first letter of each word uppercase.
Lowercase - All letters are in lowercase format.
Smallcaps - Lowercase letters display as smaller uppercase letters.
All Small Caps - all letters display as small caps, including letters that were already uppercase.
Number Font Style: Select additional font styles, including:
Italic: Makes the text lean to the right.
Underline: Adds a line under the text.
Overline: adds a line above the text.
Strikethrough: draws a line through the middle of the text.
⚠️ Note: When Underline, Overline, and/or Strikethrough are enabled, you can also choose:Line Color: Choose the line's color. It also accepts Global Variables.
Line Thickness: Choose how thick or slim the line is.
Line Type: Choose the Line's type:
Solid
Double
Dotted
Dashed
Wavy
Number Line Warp Style: Choose how text should wrap. Default keeps native browser wrapping, Balanced evens heading lines, and Pretty helps avoid single-word endings.
Default: Text can move onto a new line when it runs out of space.
Balanced: Short text breaks into lines with more even lengths
Pretty: Text wrap in a cleaner, more visually pleasing way
Number Text Direction: Choose text flow direction. Standard Horizontal reads left-to-right across lines, while vertical modes stack glyphs top-to-bottom.
Standard Horizontal
Vertical (right to left): The text is displayed from top to bottom, and each new line starts to the left of the previous one.
Vertical (left to right): The text is displayed from bottom to top, and each new line starts to the left of the previous one.
Number Hyphenation: When enabled, if a word is too long to fit nicely on one line, the browser can break it into parts and add a hyphen at the break.
Number Fill Type: Choose the Number's text fill options:
None - No Number text fill.
Gradient - Fill the Number text with a Gradient
Image - Fill the Number text with an Image
Transparent - Fill the Number text with a transparent fill.
Number Stroke Width - Choose the thickness of the stroke.
Number Stroke Color - Choose the Number text's stroke color.
Number Columns: Set how many columns the text should flow through.
Number Text Shadow: Add a text shadow effect and customize its direction, blur, and color to add depth or emphasis to the Number:
Direction: Adjust horizontal and vertical placement.
Blur: Control how soft or sharp the shadow appears.
Color: Set a shadow color to complement the text.
Tips for Using Number Text Options
Emphasize Importance: Use bold fonts, larger sizes, or vibrant colors to make the number text stand out.
Ensure Readability: Adjust line height and letter spacing to maintain clarity, especially for large numbers.
Add Depth: Subtle shadows can enhance visibility and create a professional look.
Align with Design: Match the number text style, including font and color, with your site’s overall typography and theme.