How to customize a website text style

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

Alert
When increasing font sizes, Aphyo automatically resizes all elements across the website to maintain the layout.
Font size decreases do not trigger automatic resizing.
Idea
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

Info
Info: 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 (...).
Info
Info: 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.
Info
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.
Info
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.
Info
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.
Info
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.
IdeaRecommendation: 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.
WarningItalic : 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.
WarningUppercase: 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.
Info
Available only for button text styles.



3.11 - Strikethrough

If you want the text to have a strikethrough effect, click on the "Strikethrough" button.
Info
Available only for button text styles.



Next steps

  1. how to add a button text style
  2. how to remove a button text style



    • Related Articles

    • How to customize a button style

      In this tutorial, we will guide you through the process of customizing a button style. Step 1 - Open Website Styles Click on the "Website Styles" button. Step 2 - Open Buttons In the "Website Look & Feel" menu, select "Buttons". Step 3 - Customize ...

    • How to add a text style

      This article will guide you on how to add a custom or button text style. You cannot add or remove Default Text Styles due to the architectural framework of websites built with Aphyo. Step 1 - Open Website Styles Click on the "Website Styles" button. ...

    • How to remove a text style

      This article will guide you on how to delete a custom or button text style. You cannot add or remove Default Text Styles due to the architectural framework of websites built with Aphyo. Step 1 - Open Website Styles Click on the "Website Styles" ...

    • How to customize a box style

      This tutorial will guide you on how to customize a box style. Step 1 - Open Website Styles Click on the "Website Styles" button. Step 2 - Open Box Style In the "Website Look & Feel" menu, select "Box Style" Step 3 - Customize 3.1 - Naming the Box ...

    • How to change button text

      This tutorial will guide you on how to change the text on a "Button" element. Step 1 Open the "Button Settings" editor. Click "Edit Button" on the hover menu or double-click on the "Button" element you want to customize. In the "Button Settings" ...