Studio Editor: Working with Site Typography
4 min read
Site typography refers to the text used across a site. It's divided into Fonts and Text styles, which you can customize individually to match the look you want to achieve.
In this article, learn more about:
How do I access the site's typography?
Fonts and text styles
The Fonts section shows all of the fonts you are using in the site's text styles. When you change a font in the Fonts section, it automatically updates all of the text styles that were using the old font.
The Text styles refer to the individual text types used on the site (e.g. Heading 2, Paragraph 1).
Tip:
H1 - H6 are heading tags that are automatically assigned to these titles. Keeping the top-down hierarchy of your titles, in accordance with the heading tags, helps both SEO and accessibility.
Updating site typography
You can change the site fonts, or adjust the look of the 9 individual text styles (6 headings, 3 paragraphs).
What happens when I update text styles / fonts?
To update the typography:
- Click Site Styles
on the left side of the editor. - Click the Typography tab.
- Choose what you want to customize - a font, or a text style:
- Font:
- Click the font you want to update under Fonts.
- Select a new font from the drop-down.
- Click Update to apply the new font.
- Text style:
- Hover over the relevant text under Text styles and click the More Actions icon
. - Click Edit.
- Customize the text style as you wish:
- Choose a new font from the drop-down.
- Choose the font size.
- Make the text scale proportionally so it looks ideal on every screen size.
- Set the maximum and minimum size in px (pixels).
- Bold and / or italicize the text.
- Set the line and character spacing.
- Choose the text's color.
- Go back to the main pane by clicking the arrow
at the top left.
- Hover over the relevant text under Text styles and click the More Actions icon
- Font:
Applying text styles to a page
Themed titles and paragraphs are available for you to use from the Add Elements panel. Click Text and drag the relevant style under Text Themes to the desired location.
Applying a style to a text element
You can also apply a style on an existing text element on the page. Click Edit Text on the element and select the relevant Style from the drop-down in the Inspector.
Overriding text styles
If you change a text element's design after selecting a style (theme) for it, you're creating a "design override". This means that any updates to the chosen style don't apply to this text element.
You can reset text elements with overrides to their original style. Additionally, you can also apply overrides you like to the style itself. Hover over Style and click the More Actions icon 
to select what you want to do.
to select what you want to do.
Did this help?
|