How to customize a website text style

This tutorial will guide you on how to customize a default, custom or button text style.

Info regarding font resize

Caution

When increasing font sizes, Aphyo automatically resizes all elements across the website to maintain the layout.

Font size decreases do not trigger automatic resizing.

Tip

Recommendation: Manually adjust the layout and element sizes to ensure the design remains as intended.

Recommendation: Use the “Undo” function after increasing the font size to revert to the previous state if necessary.

Info regarding Button Text Styles

Note

Button Text Styles have additional styling options, including Underline and Strikethrough, but Line Spacing is missing since the button text is always on a single line.

If the text exceeds the button width, it will be truncated with an ellipsis (…).

Note

Button Text Styles can only be applied through the Button Style Settings in Website Styles. They cannot be changed directly from the button editor.

Step 1 - Open Website Styles

Click on the “Website Styles” button.

Step 2 - Open Typography

In the “Website Look & Feel” menu, select “Typography”.

Step 3 - Customize Text Style

3.1 - Naming the Style

First, you need to give your text style a name so you can easily recognize it when using it in your project. Click on the “Write your style name here” input field to name it.

Note

The name functions as a preview for the text style.

3.2 - Choosing the Font

To select your desired font, click on the “Font” dropdown and choose from the available options.

Note

The font list in the dropdown includes only fonts added to the project.

3.3 - Choosing the Font Weight (Bold, Thin, etc)

To select the desired font weight, click on the “Font Weight” dropdown and choose the appropriate value.

Note

The Font Weight dropdown depends on the selected font (e.g., Montserrat has 9 weights, Roboto has 6, Aleo has 3).

3.4 - Adjusting Font Size

1. To increase the font size, click the “+” button.
2. To decrease the font size, click the “-” button.
3. You can also enter a numeric value in the input field (in pixels).
4. Alternatively, you can adjust it by dragging the cursor left or right on the bar.

3.5 - Adjusting Line Spacing

1. To increase line spacing, click the “+” button.
2. To decrease line spacing, click the “-” button.
3. You can also enter a numeric value in the input field (in em).
4. You can also adjust it by dragging the cursor left or right on the bar.

Note

Available only for default and custom text styles.

3.6 - Adjusting Character Spacing

1. To increase character spacing, click the “+” button.
2. To decrease character spacing, click the “-” button.
3. You can also enter a numeric value in the input field (in pixels).
4. You can also adjust it by dragging the cursor left or right on the bar.

3.7 - Choosing a Color

To select a color, click on the “Color” icon.

You have two options for selecting a color:

1. Brand Colors – Choose from the predefined brand colors you previously added.
2. Custom Colors – Select a custom color.

Tip

Recommendation: For better organization, we recommend using colors from the Brand Colors palette.

3.8 - Italic

If you want the text to be italic, click on the “Italic” button.

Caution

Italic : We do not recommend changing these settings at the theme level.

3.9 - Uppercase

If you want the text to be uppercase, click on the “Uppercase” button.

Caution

Uppercase: We do not recommend changing these settings at the theme level.

3.10 - Underline

If you want the text to be underlined, click on the “Underline” button.

Note

Available only for button text styles.

3.11 - Strikethrough

If you want the text to have a strikethrough effect, click on the “Strikethrough” button.

Note

Available only for button text styles.

Next steps

• how to add a button text style
• how to remove a button text style