Font size on Tabs in a Tab Interaction

While it is possible to change the font size for the content in a tabbed interaction, I'm not finding a way to change the font size on the tab buttons themselves...seems like this should be simple. I'm using a font that runs smaller than most other fonts, and I need it to display larger on the tab buttons in my tabbed interaction.

9 Replies
Jeanette Brooks

Hi there Rebecca, and welcome to Heroes! There isn't currently a way to change the font size on the tabs themselves. I encourage you to submit a feature request for that. One thing that might help, though, is to adjust the width of the tabs themselves... often that can make the text look like it fits a little better within the tab area. The default tab width is 30% of the interaction, but you can go into Interaction Properties > Tabs and adjust that as low as 10% if you want.

Annette Downing

Jeanette Brooks said:

Hi there Rebecca, and welcome to Heroes! There isn't currently a way to change the font size on the tabs themselves. I encourage you to submit a feature request for that. One thing that might help, though, is to adjust the width of the tabs themselves... often that can make the text look like it fits a little better within the tab area. The default tab width is 30% of the interaction, but you can go into Interaction Properties > Tabs and adjust that as low as 10% if you want.


Jeanette,

Is there anyway to change the height of the tabs as well?

Thanks,

Annette

Jeanette Brooks

Hi Annette! Unfortunately the height isn't really adjustable because Engage adjusts it for you automatically, based on how many tabs you've got. So, like, if you have 2 tabs, they'll be pretty tall because their height will be spread across the height of the interaction - whereas if you had maybe 5 or 6 tabs, they'd each be quite a bit shorter.

Jeanette Brooks

Hi Rachel! Yep, you can change the font like this: Open your interaction in Engage, and click Interaction Properties on the toolbar. When the Interaction Properties window pops up, click the Colors And Effects tab on the left edge. Then change the Title Font field:

This'll also change the font on the top title bar and the title that appears in the detail area of each tab:

Ashley Terwilliger

Hi Rosemary,

The tabbed interaction in Rise is set up to scale and display your content at various widths based on the responsive nature and device you're using. As you add more tabs you'll see that they start to wrap the text and display only a few tabs at a time and you can scroll to see the others.

Let me know if you're having trouble with any of that, and we'd love to take a look at your Rise course to offer more advice!