Skip to Content

How do I change the Heading font size and color in Trellis?

Easily adjust your Headings to ensure your content is accessible and optimized for your audience.

Change the font size of your Headings

To adjust the font size of your Headings you can go to Appearance → Mediavine Trellis → Display, then select an option from the H1 Font Size dropdown.

The Line height will adjust automatically to accommodate the font size selection.

The built in options for Trellis Heading sizes and line heights are:

  • Small = Font Size: 24px, Line Height: 39px
  • Medium = Font Size: 36px, Line Height: 59px
  • Large = Font Size: 42px, Line Height: 68px
  • X-Large = Font Size: 56px, Line Height: 91px

Change the color of your Headings

To adjust the color of your Headings, head to Appearance → Mediavine Trellis → Display, then add your hex code to the H1 color setting.

If you want this custom color setting to apply to all headings (H1-H6) you will need to also enable the setting Apply H1 Color to All Headings

❗ The H1 Font Size and H1 Color settings alone should only impact H1 tags. If you want to adjust the size or color of all headings relative to these settings, you can enable Apply H1 Size to All Headings and Apply H1 Color to All Headings options.

After you change the setting, click Save in the upper right corner of the Mediavine Trellis settings, From here, view a post to ensure that the adjusted font size is now displayed.

If the adjusted font size is not displayed, clear the Page CSS from Manage Trellis JS/CSS options in the admin bar, and clear any other caching plugins you might be using.

❗ The Font Size and Color can be customized further through the use of Additional CSS. See this article on How to Add Custom CSS for further information.