Component font size control

You can now adjust the font size for most components directly in the Styles settings! Available font size options map to the app's Typography settings for the current theme. You can also click FX to specify a px font size using a custom or dynamic value, such as 11px or h6Font.

Some components with existing text size controls, such as Divider, are unchanged. Font size controls for these components will eventually move to the Styles settings in future updates.

4 Likes

Paulo:
This is a wonderful improvement.

I have gone through half my screens and increased the font size from 12 to 14 and it has made a huge difference in readability.

This is a great improvement that will really help the "look" of our Retool Screens.

Would you pass on my congratulations to the developers who produced this for a job well done.

Mike

5 Likes

Thank you for your feedback, @mdsmith1! I brought your post to the original topic.

Glad to hear it @mdsmith1! :smiley:

To note in case you haven't come across the app theme settings yet -- you can also customize the default font size for the entire app via the Typography tab of the App Theme! Can save you some time if you don't want to handle each component individually

1 Like

Galvin:

Thank you for letting me know.

Another thing, I am using the Legacy Table Grid. Is there any possibility of getting Font Size as part of the Style for Tables?

Mike

Unfortunately the legacy Table is now fully deprecated, so it's unlikely to get any future updates! Would encourage you to upgrade to the new Table component if you are able to -- it has a lot of improvements from the old one, including much better performance!

The new table may work faster but

  • it has no background color control for the Tool Bar and
  • no strong colors for the Accent Row i.e. when you select a strong color, it gives you a weak version of that color

The "look" of the Legacy Table is much better than the New Table. I have shown samples below. It would be good if we could get someone to work on this.

Mike

This is the Legacy Table:

This is the New Table.

Galvin:

I wanted to comment on something else. Its the Active Background in the Styles for buttons.

That may have been there earlier but I just noticed it recently. I have converted all my buttons to have this feature in red which clearly shows that a button has been pressed.

This is a great feature.

I do not know if this is new. Maybe I just discovered it. But again I want to thank the developers who came up with this. It is a great feature.

Mike

2 Likes

Hello Mckenna, I'm super excited to see that this has shipped!

I tried to apply this to one of our core Retool apps and I've changed the default text from 12px to 20px and yet I don't see any change in the components throughout the app.

Text in some areas has updated, for example buttons in the nav or basic copy sections, but none to the text sizes in any of the components has changed.

So even though in the Styles panel now says it is set to 20px, the font size is still 12px in the app's components. I even tried to change each component individually via the Styles panel and yet there is no change in any of the copy.

The 12px is pretty difficult to read for our users and this update would be super impactful for our community.

Am I doing something incorrectly? What would be the best way to change the font size within the components?

Hi @Gabriel_PYP! What you're doing seems like it should work so I'm not sure :thinking: Does this issue still persist on refresh? Are you using any deprecated components?

If you are able to send me an export of your app via DM I can take a look!

1 Like

Mckenna, thanks for getting back to me so quickly!

I've since changed the default to 14px so the text isn't overly enlarged elsewhere but still having difficulty changing in the components themselves. The line height of the components changes and the text fields become larger, but the text remains at 11px, even if it's listed as something larger in the Styles panel.

I don't believe they are deprecated as they have been updated recently from a UI perspective.

The components involved are mostly text inputs.

I would love to share an export w you, I'll try to DM that to you now.

Hey @mckenna how exactly do I DM you here? :sweat_smile:

DM'ed you!