Theme: Style update for Blender 4.0 #112744

Pablo Vazquez · 2023-09-22T20:46:24+02:00

Pablo Vazquez commented

2023-09-22 20:46:24 +02:00

A collection of small tweaks to the default theme, and widen the sidebar.

Increase text size from 11.0 to 11.6
Slightly dimmer blue highlight, to improve readability.
Pulldown match hover with menu hover.
Increase corner radius on menu background to follow menu items shape.
Sidebar tabs background slightly transparent, no need to hide what's behind and also signals that there's no content.
Make tabs background and outline fully transparent so the widget emboss disappears.
Slightly wider sidebar by default, from 220 to 280, to prevent clipped strings.

Blender 3.6	4.0 main	4.0 patch

Sidebar width in main	Sidebar width in patch

A collection of small tweaks to the default theme, and widen the sidebar. * Increase text size from `11.0` to `11.6` * Slightly dimmer blue highlight, to improve readability. * Pulldown match hover with menu hover. * Increase corner radius on menu background to follow menu items shape. * Sidebar tabs background slightly transparent, no need to hide what's behind and also signals that there's no content. * Make tabs background and outline fully transparent so the widget emboss disappears. * Slightly wider sidebar by default, from `220` to `280`, to prevent clipped strings. |Blender 3.6|4.0 main| 4.0 patch| |----|----|----| |![3.6](/attachments/50f5c3ed-da76-4d4f-9440-0fb3b6592d22)|![4.0 main](/attachments/c800ab68-beeb-43fa-ac37-624a6d089051)|![patch](/attachments/8b0f82ae-c1ca-4b67-a485-d4ebc6e8b0ba)| |Sidebar width in main|Sidebar width in patch| |----|----| |![main](/attachments/398cbb49-1fcb-448c-820e-d5ffc4e29563)|![patch](/attachments/c43a8a18-702f-4523-b330-983e7325724b)|

Screenshot from 2023-09-27 17-22-46.png

81 KiB

blender_theme_3-6.png

605 KiB

blender_theme_before.png

499 KiB

blender_theme_after.png

519 KiB

Screenshot from 2023-09-27 17-22-55.png

79 KiB

Pablo Vazquez changed title from ~~WIP: Theme: Style update for Blender 4.0~~ to WIP: Theme: Style update for Blender 4.0

2023-09-27 16:10:41 +02:00

pablovazquez changed target branch from main to blender-v4.0-release

2023-09-27 16:10:44 +02:00

Pablo Vazquez force-pushed ui-theme-blender-4-0 from 0954ee039c to e2989cfab6

2023-09-27 16:12:06 +02:00

Compare

Pablo Vazquez force-pushed ui-theme-blender-4-0 from 5ef5c48922 to 729ba915fc

2023-09-27 17:18:02 +02:00

Compare

Pablo Vazquez changed title from ~~WIP: Theme: Style update for Blender 4.0~~ to Theme: Style update for Blender 4.0

2023-09-27 17:39:10 +02:00

Pablo Vazquez added this to the User Interface project 2023-09-27 17:39:23 +02:00

Pablo Vazquez added the

Module

User Interface

label 2023-09-27 17:39:28 +02:00

Pablo Vazquez force-pushed ui-theme-blender-4-0 from a17924579a to 5b1a1b2202

2023-09-27 18:41:04 +02:00

Compare

Brecht Van Lommel commented

2023-09-27 19:45:01 +02:00

The bigger font size looks off me, the text just looks too big for the size of the UI elements, it's too cramped.

In the sidebar the inactive tabs draw more attention than the active one. Before these tabs were consistent with the tabs in the properties editor. I think at a minimum the text of inactive items should be darker, but personally I would not make them inconsistent with the properties editor tabs at all.

The bigger font size looks off me, the text just looks too big for the size of the UI elements, it's too cramped. In the sidebar the inactive tabs draw more attention than the active one. Before these tabs were consistent with the tabs in the properties editor. I think at a minimum the text of inactive items should be darker, but personally I would not make them inconsistent with the properties editor tabs at all.

Harley Acheson commented

2023-09-27 20:04:01 +02:00

The lightness of the text of the inactive tabs is a problem in 3.6 as well. The text of the inactive sidebar tabs are a lot brighter than that of the workspaces. From 3.6:

The lightness of the text of the inactive tabs is a problem in 3.6 as well. The text of the inactive sidebar tabs are a lot brighter than that of the workspaces. From 3.6: ![image](/attachments/1f854bd3-a131-413b-a6b7-0288cf0989b4)

image.png

15 KiB

Brecht Van Lommel commented

2023-09-27 20:07:16 +02:00

This PR also includes changes to the edit mode selection colors from orange to green, which are not mentioned in the description. I don't know if that's intentional, but any changes there need to carefully checked on some non-trivial models to make sure selection remains readable. From what I remember that's part of the reason we did not make the change last time this was considered.

Brecht Van Lommel commented

2023-09-27 20:09:34 +02:00

The lightness of the text of the inactive tabs is a problem in 3.6 as well. The text of the inactive sidebar tabs are a lot brighter than that of the workspaces.

Yes. It's also not just text color, the dark tab color in a light gutter stands out a lot.

> The lightness of the text of the inactive tabs is a problem in 3.6 as well. The text of the inactive sidebar tabs are a lot brighter than that of the workspaces. Yes. It's also not just text color, the dark tab color in a light gutter stands out a lot.

Harley Acheson commented

2023-09-27 20:18:39 +02:00

Yes. It's also not just text color, the dark tab color in a light gutter stands out a lot.

For sure. Here is comparison with 3.6 on left, PR on right:|

> Yes. It's also not just text color, the dark tab color in a light gutter stands out a lot. For sure. Here is comparison with 3.6 on left, PR on right:| ![image](/attachments/9eb9cedd-9653-4e4c-b071-be6732d80af8)

image.png

31 KiB

Pablo Vazquez commented

2023-09-27 20:19:43 +02:00

The bigger font size looks off me, the text just looks too big for the size of the UI elements, it's too cramped.

Is there a size that you think looks better? 11.6 is a big leap in size and shape compared to 11.5 or smaller. Talking to Julian he reminded me that if the font-size is much larger than the previous default then probably most popovers and panels will be too small and we'll end up with clipped text (I'm up for doing a pass in some and making some wider if needed btw).

In the sidebar the inactive tabs draw more attention than the active one ... personally I would not make them inconsistent with the properties editor tabs at all.

I agree, will tweak it. Maybe making the background of the tabs area more opaque would help. Will test.

This PR also includes changes to the edit mode selection colors from orange to green, which are not mentioned in the description. I don't know if that's intentional

Sorry that was a leftover from the first version of the patch which did include that (and mentioned it), I was hoping to propose those changes once !111431 is in but didn't get in time for 4.0. I'll remove it.

> The bigger font size looks off me, the text just looks too big for the size of the UI elements, it's too cramped. Is there a size that you think looks better? `11.6` is a big leap in size and shape compared to `11.5` or smaller. Talking to Julian he reminded me that if the font-size is much larger than the previous default then probably most popovers and panels will be too small and we'll end up with clipped text (I'm up for doing a pass in some and making some wider if needed btw). > In the sidebar the inactive tabs draw more attention than the active one ... personally I would not make them inconsistent with the properties editor tabs at all. I agree, will tweak it. Maybe making the background of the tabs area more opaque would help. Will test. > This PR also includes changes to the edit mode selection colors from orange to green, which are not mentioned in the description. I don't know if that's intentional Sorry that was a leftover from the first version of the patch which did include that (and mentioned it), I was hoping to propose those changes once !111431 is in but didn't get in time for 4.0. I'll remove it.

Julian Eisel commented

2023-09-27 20:38:30 +02:00

Is there a size that you think looks better? 11.6 is a big leap in size and shape compared to 11.5 or smaller.

For me text only changes horizontally for most values, but I see a vertical jump at 11.2 and 11.9.
Much of this is a matter of getting used to, but I also see 11.6 as a tiny bit too big, too crammed. Although it's not that bad yet for my taste. Might still be wise to do smaller steps, esp this close to the release. Something from 11.2 to 11.4 looks good to me.

> Is there a size that you think looks better? `11.6` is a big leap in size and shape compared to `11.5` or smaller. For me text only changes horizontally for most values, but I see a vertical jump at 11.2 and 11.9. Much of this is a matter of getting used to, but I also see 11.6 as a tiny bit too big, too crammed. Although it's not that bad yet for my taste. Might still be wise to do smaller steps, esp this close to the release. Something from 11.2 to 11.4 looks good to me.

Harley Acheson commented

2023-09-27 20:43:12 +02:00

Of course this might differ on different operating systems...

On Windows, if I have my OS Scale set to 100%, Blender's scale set to 1.0. Then I change my Blender font to the same as the OS (Segoeui UI). Set to 12 it is then same size as the text in the OS caption title bar.

Here is another comparison, with Microsoft Visual Studio, OS caption bar, and Blender with Inter at 11.6

The height of the "F" and "E", and the rest of the capitals are the same height (9 pixels). So at least on Windows we seem to be in the ballpark for normal text size.

Of course this might differ on different operating systems... On Windows, if I have my OS Scale set to 100%, Blender's scale set to 1.0. Then I change my Blender font to the same as the OS (Segoeui UI). Set to 12 it is then same size as the text in the OS caption title bar. Here is another comparison, with Microsoft Visual Studio, OS caption bar, and Blender with Inter at 11.6 ![image](/attachments/2570b7d1-dc59-44f6-8cb6-c2649a877180) The height of the "F" and "E", and the rest of the capitals are the same height (9 pixels). So at least on Windows we seem to be in the ballpark for normal text size.

image.png

48 KiB

image.png

48 KiB

Brecht Van Lommel commented

2023-09-27 21:42:21 +02:00

Is there a size that you think looks better? 11.6 is a big leap in size and shape compared to 11.5 or smaller. Talking to Julian he reminded me that if the font-size is much larger than the previous default then probably most popovers and panels will be too small and we'll end up with clipped text (I'm up for doing a pass in some and making some wider if needed btw).

There is a point where the height of the text increases by 1 pixel. With a regular screen and default settings that is 11.5 -> 11.6. With a high DPI screen or other UI scaling the exact value will be different. To me that 1 extra vertical pixel makes it looks off.

With size 11.0 most characters are 8 pixels high (with some characters like y or p going 2 pixels below the baseline). Buttons are 20px high, and so with an even number like 8 text can be centered. With size 11.6 most characters are 9 pixels high, and so it's not possible to put it exactly in the center.

> Is there a size that you think looks better? `11.6` is a big leap in size and shape compared to `11.5` or smaller. Talking to Julian he reminded me that if the font-size is much larger than the previous default then probably most popovers and panels will be too small and we'll end up with clipped text (I'm up for doing a pass in some and making some wider if needed btw). There is a point where the height of the text increases by 1 pixel. With a regular screen and default settings that is 11.5 -> 11.6. With a high DPI screen or other UI scaling the exact value will be different. To me that 1 extra vertical pixel makes it looks off. With size 11.0 most characters are 8 pixels high (with some characters like y or p going 2 pixels below the baseline). Buttons are 20px high, and so with an even number like 8 text can be centered. With size 11.6 most characters are 9 pixels high, and so it's not possible to put it exactly in the center.

Harley Acheson commented

2023-09-27 22:22:39 +02:00

Exact vertical center is a bit subjective because of the differing cap height, x-height, and descenders. It is possible that we are just not doing it in a visually pleasing manner in some cases?

When I Iook at the entire interface at 11.6 I don't notice anything too egregious vertical centering except for the Topbar main menus, which look terrible. But this mainly because we have the border between areas below them. What I see is the Blender logo looks nicely placed but the menu items are too high. That visual problem is helped a bit by making the letters less high (the change from 11.6 to 11.5) but I think the primary problem is that text is just too high.

Down a pixel to make up for the area border:

Exact vertical center is a bit subjective because of the differing cap height, x-height, and descenders. It is possible that we are just not doing it in a visually pleasing manner in some cases? When I Iook at the entire interface at 11.6 I don't notice anything too egregious vertical centering except for the Topbar main menus, which look terrible. But this mainly because we have the border between areas below them. What I see is the Blender logo looks nicely placed but the menu items are too high. That visual problem is helped a bit by making the letters less high (the change from 11.6 to 11.5) but I think the primary problem is that text is just too high. ![image](/attachments/ac92c2ca-45c5-4742-b5ec-f4e07716f074) Down a pixel to make up for the area border: ![image](/attachments/1fc1d652-b8af-4605-8704-5fdfb996e0f4)

image.png

10 KiB

image.png

11 KiB

Pablo Vazquez added 1 commit 2023-09-27 23:46:02 +02:00

610b6e910a Undo unintentional change to edit mesh mode colours

Brecht Van Lommel commented

2023-09-28 16:11:19 +02:00

Talking with Francesco and Hjalti, the font looked too small to them a while ago. But when checking it again today it looked fine, and the size is very close to the previous font.

What happened is that #112759 made the text render bigger already. That change was made 2 days after the Inter font was added.

So I propose to leave the font size at 11.0.

Talking with Francesco and Hjalti, the font looked too small to them a while ago. But when checking it again today it looked fine, and the size is very close to the previous font. What happened is that #112759 made the text render bigger already. That change was made 2 days after the Inter font was added. So I propose to leave the font size at 11.0.

Harley Acheson commented

2023-09-28 17:01:01 +02:00

What happened is that #112759 made the text render bigger already. That change was made 2 days after the Inter font was added.

That change shouldn't make any text bigger. Its only effect is when that "Anti-Aliasing" checkmark is deselected. And that effect is only to turn off the subpixel AA, where glyphs are rendered for multiple subpixel horizontal position. Do you mean a different commit?

With the size issue I haven't noticed any complaints yet of the font looking too small.

The only complaints I have noticed come from my decision to tie two features together. I had hoped to please everyone by leaving the "None" hinting option as baseline the most like today, while "Slight" and "Full" not only turn on those hinting modes but also turns on subpixel AA. This causes some people to make a choice that might be less than optimal without understanding what they are really selecting.

I will make a proposal for this in a PR, making subpixel AA a separate configurable option, with it on by default. We already have an area for such settings, and the defaults work well. And long term, having options for (think of a better term) "Output Method", would be required if we ever add support for things like "subpixel rendering" (where you get the red and blue fringes), or SDF output. These are all regarding the final output of the glyphs and are separate from hinting anyway (which is all about altering the font features to suit the pixel grid).

> What happened is that #112759 made the text render bigger already. That change was made 2 days after the Inter font was added. That change shouldn't make any text bigger. Its only effect is when that "Anti-Aliasing" checkmark is deselected. And that effect is only to turn off the subpixel AA, where glyphs are rendered for multiple subpixel horizontal position. Do you mean a different commit? With the size issue I haven't noticed any complaints yet of the font looking too small. The only complaints I _have_ noticed come from my decision to tie two features together. I had hoped to please everyone by leaving the "None" hinting option as baseline the most like today, while "Slight" and "Full" not only turn on those hinting modes but also turns on subpixel AA. This causes some people to make a choice that might be less than optimal without understanding what they are really selecting. I will make a proposal for this in a PR, making subpixel AA a separate configurable option, with it on by default. We already have an area for such settings, and the defaults work well. And long term, having options for (think of a better term) "Output Method", would be required if we ever add support for things like "subpixel rendering" (where you get the red and blue fringes), or SDF output. These are all regarding the final output of the glyphs and are separate from hinting anyway (which is all about altering the font features to suit the pixel grid).

Harley Acheson commented

2023-09-28 18:41:10 +02:00

I added a PR for that here: #113027

I added a PR for that here: https://projects.blender.org/blender/blender/pulls/113027

Harley Acheson commented

2023-09-28 22:40:06 +02:00

What happened is that #112759 made the text render bigger already

I just double checked this and confirmed that it did not make text size changes. There is only a noticeable visual difference (but not size difference) if you have the anti-aliasing checkmark off and also have hinting selected. But with that checkmark on all the text is pixel-perfect the same.

> What happened is that #112759 made the text render bigger already I just double checked this and confirmed that it did not make text size changes. There is only a noticeable visual difference (but not size difference) if you have the anti-aliasing checkmark off and also have hinting selected. But with that checkmark on all the text is pixel-perfect the same.

Brecht Van Lommel commented

2023-09-29 17:18:55 +02:00

I just double checked this and confirmed that it did not make text size changes. There is only a noticeable visual difference (but not size difference) if you have the anti-aliasing checkmark off and also have hinting selected. But with that checkmark on all the text is pixel-perfect the same.

Indeed it seems I got something mixed up.

But then I guess the question still remains, what is the motivation for increasing the font size? Are there people who perceive the current 4.0 to have smaller text, or see some other problem with the text rendering? Or is it not about a regression, but about wanting text to be bigger independent of the recent changes?

> I just double checked this and confirmed that it did not make text size changes. There is only a noticeable visual difference (but not size difference) if you have the anti-aliasing checkmark off and also have hinting selected. But with that checkmark on all the text is pixel-perfect the same. Indeed it seems I got something mixed up. But then I guess the question still remains, what is the motivation for increasing the font size? Are there people who perceive the current 4.0 to have smaller text, or see some other problem with the text rendering? Or is it not about a regression, but about wanting text to be bigger independent of the recent changes?

Harley Acheson commented

2023-09-29 17:36:20 +02:00

what is the motivation for increasing the font size?

It was something Julian mentioned early on that the the text looked smaller to him, although only a change to 11.3 was sufficient for what he saw. Pablo also had the same feeling. So far we haven't had anyone outside of our group mentioning this.

Me being completely objective, I find the size to be fine at 11 and comparing them I don't notice a big change in weight or the way the letters fill the space.

Non-objectively, I am bothered slightly by the uppercase E and F at 11 when at scale 1.0. Not sure many people will care. And if given choices for both hinting and subpixel AA users, will have more control. When that E is only 8 pixels high the choice is having the middle bar become two pixels wide at lower opacity, or shifted down and remaining one pixel. So #113027 tells that story well and should keep me from getting complaints.

A thing to keep in mind that is that all fonts at all times just look better as they are given more pixels, especially at these small sizes. So it is natural for most people to increase the size and see improvement, not because it is more balanced or anything, but just because the characters look nicer as they get bigger. And there is no upper bound to that.

TL;DR I am perfectly fine with keeping it at 11. I also wouldn't be bothered if it were increased. I'd just rather someone else decide - I have stared at these letters under a microscope for too many years to be completely objective.

> what is the motivation for increasing the font size? It was something Julian mentioned early on that the the text looked smaller to him, although only a change to 11.3 was sufficient for what he saw. Pablo also had the same feeling. So far we haven't had anyone outside of our group mentioning this. Me being completely objective, I find the size to be fine at 11 and comparing them I don't notice a big change in weight or the way the letters fill the space. Non-objectively, I am bothered slightly by the uppercase E and F at 11 when at scale 1.0. Not sure many people will care. And if given choices for both hinting and subpixel AA users, will have more control. When that E is only 8 pixels high the choice is having the middle bar become two pixels wide at lower opacity, or shifted down and remaining one pixel. So #113027 tells that story well and should keep me from getting complaints. A thing to keep in mind that is that all fonts at all times just look better as they are given more pixels, especially at these small sizes. So it is natural for most people to increase the size and see improvement, not because it is more balanced or anything, but just because the characters look nicer as they get bigger. And there is no upper bound to that. TL;DR I am perfectly fine with keeping it at 11. I also wouldn't be bothered if it were increased. I'd just rather someone else decide - I have stared at these letters under a microscope for too many years to be completely objective.

David Black commented

2023-09-30 21:24:38 +02:00

First-time contributor

Non-objectively, I am bothered slightly by the uppercase E and F at 11 when at scale 1.0. Not sure many people will care.

Me too!

Alternative solution?
Minor edit of Inter.woff2 font, uppercase E, F, and H, centres very slightly raised, just enough to push hinting upwards.

First time using FontForge, may not have correct generated font settings considering file size is smaller than original?
FontForge also reports several errors (same with original unmodified file).

Modified font.
Inter.woff2

Blender version	Before	After
Blender 3.6
Blender 4.1

Kind regards.

> Non-objectively, I am bothered slightly by the uppercase E and F at 11 when at scale 1.0. Not sure many people will care. Me too! Alternative solution? Minor edit of `Inter.woff2` font, uppercase E, F, and H, centres very slightly raised, just enough to push hinting upwards. First time using FontForge, may not have correct generated font settings considering file size is smaller than original? FontForge also reports several errors (same with original unmodified file). Modified font. [Inter.woff2](/attachments/189c321e-4a14-41c4-8ffb-0046bea6431e) |Blender version|Before|After| |-|-|-| |Blender 3.6|![1 Blender 3.6.png](/attachments/d1ad0d8c-8e16-4c75-86b7-6790bec41913)| |Blender 4.1|![2 Blender 4.1 - before.png](/attachments/82d39b90-9c48-43c4-95ef-a063e9942827)|![3 Blender 4.1 - after.png](/attachments/dca87390-647e-4af2-8dcd-c8fc4db3100c)| Kind regards.

Inter.woff2

85 KiB

1 Blender 3.6.png

9.7 KiB

3 Blender 4.1 - after.png

17 KiB

2 Blender 4.1 - before.png

17 KiB

David Black commented

2023-09-30 21:45:59 +02:00

First-time contributor

Thoughts on removing N panel tabs gutter region, seems strange having detached tabs?

Also filled the tiny gap between the upper tab and 'Options'.

GIMP mock-up

Before	After	After (alternative)

Kind regards.

Thoughts on removing N panel tabs gutter region, seems strange having detached tabs? Also filled the tiny gap between the upper tab and 'Options'. **GIMP mock-up** |Before|After|After (alternative)| |-|-|-| |![1 N panel gutter removal - before.png](/attachments/c7c4d79d-43aa-418f-8409-474bc21632bb)|![2 N panel gutter removal - after.png](/attachments/e32b7bb7-3aa4-4397-9345-ead10d335da1)|![3 N panel gutter removal - after (alternate).png](/attachments/24f63ce2-6e04-4734-a191-944140da8c07)| Kind regards.

2 N panel gutter removal - after.png

54 KiB

1 N panel gutter removal - before.png

61 KiB

3 N panel gutter removal - after (alternate).png

54 KiB

❤️ 1

David Black commented

2023-11-05 16:03:10 +01:00

First-time contributor

Hi @Harley,

Further to my above fonts file test, been wondering, is there a way to do the same programmatically in Blender, without an edited font file?

Thank you for your help.

Kind regards.

Hi @Harley, Further to my above fonts file test, been wondering, is there a way to do the same programmatically in Blender, without an edited font file? Thank you for your help. Kind regards.

This pull request has changes conflicting with the target branch.

source/blender/blenkernel/BKE_blender_version.h
source/blender/blenloader/intern/versioning_userdef.cc

View command line instructions.

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u ui-theme-blender-4-0:pablovazquez-ui-theme-blender-4-0

git checkout pablovazquez-ui-theme-blender-4-0

Sign in to join this conversation.

No reviewers

No Label

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

Theme: Style update for Blender 4.0 #112744

Checkout