What is Typography Preset?
Typography Preset allows you to prepare a font/text style and use it across whole website. This type of preset is slightly different than standard presets for shortcodes. Once created preset can be used inside multiple different shortcodes, navigations or paginations.
How to install Typography Presets?
In order to get Typography Presets installed, please navigate to Massive Panel and scroll down for Presets section. Then choose Typography from Select Shortcode dropdown. After a while, all predefined presets will be installed in your website. All of them can be edited, renamed or deleted.
List of available options in Typography Preset
Below, we present all of the Typography Preset options. You can fill only the needed and left rest of them blank. Some of these fields can be overwritten with Preset Related Fields inside shortcodes (check the section below for more information).
- Preset Name – specify a name for your preset. This field allows only alpha-numerical characters and space.
- Font Family – select a font name from a dropdown list. You can choose from build-in system fonts or from Google Fonts. All of Google Fonts can be checked at official website.
- Font Weight & Style – define the font weight and style for selected font. Please notice that this field contains only available options for selected Font Family.
- Font Subset – allows you to control font subset (like Latin, Cyrillic, and Greek for example). Please notice that this field contains only available options for selected Font Family.
- Text Align – choose from 4 available font alignments: left, center, right, justify. To use theme default alignment you need to choose inherit. Initial option will reset the font alignment to default browser value.
- Text Transform – property controls the capitalization of text. Available options: Uppercase, Lowercase, Capitalize, None. To use theme default text transform you need to choose inherit. Initial option will reset the text transform to default browser value.
- Font Color – select a color from a color palette.
- Font Size – define how big your font should be in pixels.
- Line Height – define the horizontal gap between two lines of text.
- Preview – provide a live preview based on selected font and its settings.
How to use a created or installed Typography Preset?
Installed and created presets are available for later usage inside all Typograhy Preset fields. To load a typography preset to shortcode, please create or edit a shortcode (Button in our example) then select preset which should be loaded from dropdown list. Please notice that loading a preset will not remove any changes made inside related fields.
Preset Related Fields
As you can see at the image below, the Related Fields allow you to override settings from selected Typography Preset. These fields can be different from each other based on usage inside shortcode.
When you will need them? Imagine a situation where you have a preset for all headings at your website. Let’s call it “Headings Preset”. The color selected in Headings Preset is #333333 and works great with light backgrounds. During the creation of your website, you can have a section which looks best with dark background or image. Should you create a new preset and change only the font color from Headings Preset? The answer is no. All you needs to do is select a light font color like #f0f0f0 from Preset Related Fields. With this trick, you can also modify a font size, line height or even a text transform, alignment.
How to create a new Typography Preset?
To create a new preset, add a corresponding shortcode or edit an existing one. In popup, find a Typography Preset field and click at New(1) button.
An empty Typography Preset form will appear. Only required field is Font Family but we suggest to also set Font Color, Font Size and Line Height. Other options are optional and depends on the outcome which you expect. All properties have been described above.
When you finish with settings, please take a look at preview field. If the end effect satisfy you, click Save button and start using your new Typography Preset.
How to modify or rename a Typography Preset?
Typography Preset can be modified only from shortcode edit popup. To make changes to existing preset please select a preset from dropdown list which you want to update (if different from already selected) and click ‘Pencil’(2) icon. The same actions are needed to modify preset name.
There are few things that you should remember:
- Typography Preset changes will affect all elements using the modified preset
- instead of editing a predefined presets (our presets) we recommend to create a new one which will contain your settings
How to delete a Typography Preset?
Each Typography Preset can be deleted from the shortcode popup by selecting it from dropdown list and clicking ‘Trash‘(3) icon.
Video Tutorial
Please check the video tutorial showed below for better reference.