Summer Update: New font is a bit hard to look at

Really stoked about this update, so many amazing things including the bigger formula editor!

I noticed there was a change in the font and font color for the current value in the editor. It’s a bit hard to see what is says without squinting and really focusing on it. Compare it to the text below it, where it’s thicker and easier to read.

Using on Windows in light mode, if that helps. :smile:

1 Like

I overall think this summer update got a little out of hand UX wise. Very low contrast, ton of colors. A lot of improvement was made, but some things got a little worse - objectively.

1 Like

Are you on Windows? Seems like the font we use is not available on Windows so what you see is a fallback, I’m going to look into it in the next few days

1 Like

Feel free to post any things that you dislike, we’re open to reverting any changes. The reason why there might be some problems because we updated our entire design system which always leaves some bad spots

3 Likes

Hey, I don’t have anything specific really, maybe just the UI size - I’m on a 14" MacBook Pro with the “More space” resolution, and for example the icons get tinier by every update :smiley: As for the colors, it’s very colorful, which is nice, but also I personally feel like it is a little bit of a cognitive overload, especially for things like variable icons, which feels kinda redundant.

The colors of the data feels like a great idea, maybe I just need to get used to it, but I’d probably bump up the font size, at least to match it with the current UI’s sizes.

Screenshot 2024-06-28 at 11.19.43

I’d probably add a border to the bind buttons/elements, as now they got this transparent BG which kinda lowered the contrast a lot, on dark mode especially. The border would probably also add consistency as you use it all over the UI anyway.

For some reason my ui seems to have a base size around the UI of only 12px which is super tiny.

Here on the forum I have a 14px base size, which is what I get all across the web I think in most cases.

On my blog I use REMs which is also what I’m pushing here in the posts for quite some time, yet still many of the settings don’t offer this unit, maybe that might be something you guys also might want to consider.

I understand the font is not one size fits all, but a suggestion for the product might be to add a setting for users to set their own base font size for the UI. This might be the simplest way of handling this, without over-engineering it. Or just respect the browser’s base size.

I see you guys are using the :root { --text-xs-font-size: 0.75rem; } which seems to be used as a base (at least judging by the fact that you use it in many places), meaning that you scale my 16px to x0.75 which is quite tiny for a base font.

The font should now be fixed for Windows users, let me know if that’s the case

1 Like

It’s true that we’re making things smaller by each update, but that’s by design. There’s two reasons:

  • Complexity - we’re adding more and more features and we want everything to be available quickly
  • Making sure that your app preview is in the center of attention

If we notice that most of the users find it difficult to adjust in the next period, we will take a different direction, but we believe as most design and development tools use similar sizes(Webflow, Figma, VSCode) it’s just a matter of getting used to them

Other color issues you pointed out are definitely valid and we will try to fix them over the next few weeks.

Definitely understood. It would be great to have a possibility to set up the font sizes, as in VSCode which you gave as an example. I don’t mind the small UI, because it is not vital for me as I use terminal, but the important part - the text editor itself, I like to have it big and readable, otherwise I’d go crazy - I’m already blind :joy:

I’d also have a look at the alignments of the variables, I’d probably expect it to be top aligned

1 Like