How to Use Page Typography Settings

As of OptimizeBuilder version 1.1.17 (released October 28th, 2021), we have now expanded the Typography Settings so you can quickly set the default text options for all headlines, and other text for your page. 

The key to creating visually stunning pages for your website is consistency. You should stick to the same color pallet, fonts, and overall design structure on every page you create. If you suddenly have some strange fonts or colors on your site that is not consistent, it may make your site visitors feel less secure or could think you have been hacked. 

Using consistent Typography (font) settings is an important step in this process. We suggest only using a few fonts for your entire site and trying to stick to a consistent font size and color scheme. Usually sticking to 10 or less colors in total for background colors, font colors, button colors, and other elements, is best (usually no more than 6 or 7 per page if you can help it). Sales pages tend to use slightly more in order to get the visual effects, but for normal site pages and landing pages, or even membership sites you’ll want to try to keep things simple and reduce the number of colors and types of fonts you use. Also, using the same font size consistently is helpful. If you use 44px for your main headline, then something like 34px for the sub-headline, make sure to stick with those throughout the page.

Having inconsistent font sizes, colors, and font types can make a webpage very unattractive. 

How to Choose Default Font settings for your page(s) in OptimizePress

To set the default fonts and colors for your page, you can find the Typography settings in OptimizeBuilder when editing a page by clicking “Typography” at the top:

You can also access the same settings by clicking “Settings” and then “Typography” from the left sidebar:

Once you open the Typography Control Panel (through either of the methods above) you’ll see an editor window come up where you can start customizing the Typography settings

You’ll see a sidebar and editing window open up after you click the Typography option. You can click in the edit window to change the font type, and styles. These will then be the default styles that are used on your page when you add new elements.

Typography Options Sidebar

The left sidebar that shows when you open the Typography options is there so you can override current text on your page. When you hover your mouse over the left sidebar you’ll see a blue “override” button show up to the right side of each option. Clicking this button will then switch the text on your page to the settings you selected in the editing window.

For example, if you changed the options for Heading 1 (H1) then you can click the “Override” button to update the page to reflect that change. Note that when you do this, it will make all your text have the exact styling you selected in the editor, including the color, so we do suggest using this wisely. 

Save Typography Settings as a Preset

You can also save your Typography settings on one page as a Preset and then use the same options on any other page.

While you have the Typography options open on a page you are editing, you can save them as a preset by clicking the blue “Presets” button

Then select “Save” as the action, and give it a good name, then click “Apply”

You’ll see that the preset is now created

Using Typography Presets

To use your saved Typography Preset, simply open the editor for another page you want to use these on, and open the Typography Options. Then click “Presets”

For the action, we’ll click “Load” and then “Apply” to load in the new presets. 

You should now see “Preset successfully applied.” Just click the blue “Back” button to go back to the Typography options. 

Then you can click the Override buttons to change the text already on the page if you want. 

Editing Typography Presets

If you want to edit a preset you can open the Typography options for the current page you are editing. To save the Typography options as an edit to an existing Preset, just open the presets and choose “Edit” as the action. This will override the selected Preset with the current settings from the page you are currently editing. Just click “Apply” when you make the selection and then the preset will be updated. 

You’ll now see the “Typography preset updated” text. Just click the “Back” button to return to the Typography options. 

Conclusion

Now that you know how to edit, save, and use the Typography options, we hope it will help you with being consistent across your pages and help to increase your conversions and visitor trust. 

If you need help understanding these options or have any difficulty with them, our team of highly skilled technical advisors are standing by to help. Just open a ticket and the team will be happy to help with any questions you may have. 

Updated on November 28, 2022

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for? Don't worry we're here to help!
Contact Support