Inter Font Tweaking #112748

New Issue

Harley Acheson · 2023-09-22T22:01:47+02:00

Harley Acheson commented

2023-09-22 22:01:47 +02:00

With the change of interface font to Inter, we have some opportunities to make some tweaks to it and to how we use it.

Default Sizes

With the default UI resolution of 1.0 we currently use a font size of 11. We could change this if we like. I personally like the font up to about 12 points, but most people would find that a bit large.

Notable is a change that happens at 11.6.

We have "Slight" hinting on by default, and that greatly aids in the readability. No regret there I think. With "Slight" hinting the glyphs are not altered horizontally only vertically. As in horizontal features can move vertically to better align to the bitmap grid. This generally makes the top and bottom of the letters look less fuzzy.

But at small sizes I get an uppercase "E" that bothers me. At 11 points and WITHOUT hinting it would look like this:

With Hinting it is much clearer, BUT the midline arm looks too low:

This goes away at 11.6:

Font Features

Inter supports OpenType Typographic Features. These are optional changes to the font, usually to do with using alternative glyphs for different ranges and purposes. For example having a slashed zero versus a regular zero.

Your web browser fully supports changing these features using font-feature-settings. However, Blender is using only FreeType for text output so we don't have a way of checking or manipulating these. This is left to higher-level font shapers like HarfBuzz, which does other things like supporting Ligatures and complex languages.

But we can still create a variation of our font and "bake in" features that we want. You can experiment with these feature sets here: https://rsms.me/inter/lab/?size=22&letterSpacing=0&opsz=22.

One likely candidate is "tnum", "Tabular Numbers". By default Inter uses proportionally-spaced numbers because they look better. But our old font spaced the numbers identically.

Old Font:

New Font:

Other things to consider are slashed zero. There is also a "Disambiguation" option that yields an uppercase "i" with serifs and a lowercase "L" with a curve, to better differentiate the two. I found that a bit ugly, but that might be because I have stared at this font too long.

Other Text Style Options

Because Inter is a variable font we could allow changes to the weight, slant, and spacing of it. This would mean, for example, that users could choose to use the equivalent of the "Light" (300 in css) weight rather than "Normal (400)" weight. Or have bolder or wider headings for example. In fact we might want to make these types of changes for our default theme.

These things can be experimented with here: UI: Configurable UI Variable Text Styles #112454

There are questions in the thread of that PR regarding how these settings should be exposed to users.

With the change of interface font to Inter, we have some opportunities to make some tweaks to it and to how we use it. ### Default Sizes With the default UI resolution of 1.0 we currently use a font size of 11. We could change this if we like. I personally like the font up to about 12 points, but most people would find that a bit large. Notable is a change that happens at 11.6. We have "Slight" hinting on by default, and that greatly aids in the readability. No regret there I think. With "Slight" hinting the glyphs are not altered horizontally only vertically. As in horizontal features can move vertically to better align to the bitmap grid. This generally makes the top and bottom of the letters look less fuzzy. But at small sizes I get an uppercase "E" that bothers me. At 11 points and WITHOUT hinting it would look like this: ![image](/attachments/567adf97-1261-4d4a-b748-568dd028df0e) With Hinting it is much clearer, BUT the midline arm looks too low: ![image](/attachments/85f1692f-d61b-44e8-9b31-117e9009ee86) This goes away at 11.6: ![image](/attachments/1a35409d-a0f8-47ec-8aa1-9f270569c243) ### Font Features Inter supports OpenType Typographic Features. These are optional changes to the font, usually to do with using alternative glyphs for different ranges and purposes. For example having a [slashed zero](https://en.wikipedia.org/wiki/Slashed_zero) versus a regular zero. Your web browser fully supports changing these features using `font-feature-settings`. However, Blender is using only FreeType for text output so we don't have a way of checking or manipulating these. This is left to higher-level font shapers like HarfBuzz, which does other things like supporting Ligatures and complex languages. But we can still create a variation of our font and "bake in" features that we want. You can experiment with these feature sets here: https://rsms.me/inter/lab/?size=22&letterSpacing=0&opsz=22. One likely candidate is "tnum", "Tabular Numbers". By default Inter uses proportionally-spaced numbers because they look better. But our old font spaced the numbers identically. Old Font: ![image](/attachments/6688a148-4840-4986-8ea6-b3c9ace26ffd) New Font: ![image](/attachments/71474cf9-6408-41cd-9fa4-af41d504831e) Other things to consider are slashed zero. There is also a "Disambiguation" option that yields an uppercase "i" with serifs and a lowercase "L" with a curve, to better differentiate the two. I found that a bit ugly, but that might be because I have stared at this font too long. ### Other Text Style Options Because Inter is a variable font we could allow changes to the weight, slant, and spacing of it. This would mean, for example, that users could choose to use the equivalent of the "Light" (300 in css) weight rather than "Normal (400)" weight. Or have bolder or wider headings for example. In fact we might want to make these types of changes for our default theme. These things can be experimented with here: [UI: Configurable UI Variable Text Styles #112454](https://projects.blender.org/blender/blender/pulls/112454) There are questions in the thread of that PR regarding how these settings should be exposed to users.

image.png

3.0 KiB

image.png

9.3 KiB

image.png

2.9 KiB

Numbers1.gif

317 KiB

image.png

2.9 KiB

image.png

4.9 KiB

image.png

4.2 KiB

image.png

7.4 KiB

Numbers2.gif

168 KiB

image.png

2.9 KiB

image.png

2.8 KiB

image.png

9.7 KiB

❤️ 1

Harley Acheson added the

Type

Design

label 2023-09-22 22:01:47 +02:00

Harley Acheson added this to the User Interface project 2023-09-22 22:01:49 +02:00

Pablo Vazquez commented

2023-09-23 02:21:36 +02:00

Notable is a change that happens at 11.6.

Tried using 11.3 for most of the day today and stil found myself making the interface bigger. Testing 11.6 now and I can even use Blender with resolution scale 1.0.

One likely candidate is "tnum", "Tabular Numbers".

Absolutely. It will make the UI feel less jumpy. Especially handy in places like the header when showing values while in a modal operation.

There is also a "Disambiguation" option that yields an uppercase "i" with serifs and a lowercase "L" with a curve, to better differentiate the two. I found that a bit ugly, but that might be because I have stared at this font too long.

I think we should aim for accessibility here and go with Disambiguation. Might not be the prettiest but it's easier to read.

Another one that I find easier to read is open digit numbers. It feels like there's more negative space when numbers are together.

Closed	Open

> Notable is a change that happens at 11.6. Tried using 11.3 for most of the day today and stil found myself making the interface bigger. Testing 11.6 now and I can even use Blender with resolution scale `1.0`. > One likely candidate is "tnum", "Tabular Numbers". Absolutely. It will make the UI feel less jumpy. Especially handy in places like the header when showing values while in a modal operation. > There is also a "Disambiguation" option that yields an uppercase "i" with serifs and a lowercase "L" with a curve, to better differentiate the two. I found that a bit ugly, but that might be because I have stared at this font too long. I think we should aim for accessibility here and go with Disambiguation. Might not be the prettiest but it's easier to read. Another one that I find easier to read is open digit numbers. It feels like there's more negative space when numbers are together. |Closed|Open| |----|----| |![Closed Digits](/attachments/2fcc3da3-e219-4dc5-a8fd-8af6ba3ca31e)|![Open Digits](/attachments/5e6dbec9-de2a-48a1-b18f-891669c98f20)|

image.png

43 KiB

image.png

42 KiB

Harley Acheson commented

2023-09-23 23:42:20 +02:00

@pablovazquez - re: Tabular Numbers. Absolutely. It will make the UI feel more less jumpy. Especially handy in places like the header when showing values while in a modal operation.

Yes, that seems pretty non-contentious. I think it would drive Campbell nuts.

I think we should aim for accessibility here and go with Disambiguation.

Agreed.

Another one that I find easier to read is open digit numbers. It feels like there's more negative space when numbers are together.

That's totally in your wheelhouse to decide. So be it.

I'll make a PR and merge it today. That way we can play with it for a while before the Tuesday meeting and if anyone cares they can mention it then.

> @pablovazquez - re: Tabular Numbers. Absolutely. It will make the UI feel more less jumpy. Especially handy in places like the header when showing values while in a modal operation. Yes, that seems pretty non-contentious. I think it would drive Campbell nuts. > I think we should aim for accessibility here and go with Disambiguation. Agreed. > Another one that I find easier to read is open digit numbers. It feels like there's more negative space when numbers are together. That's totally in your wheelhouse to decide. So be it. I'll make a PR and merge it today. That way we can play with it for a while before the Tuesday meeting and if anyone cares they can mention it then.

👍 1

Harley Acheson referenced this issue

2023-09-24 00:57:23 +02:00

UI: Inter with Features ss01, ss02, and tnum #112795

Harley Acheson referenced this issue

2023-09-25 20:14:29 +02:00

UI: Change Overlay Text Size with Label Text Style #112875

Harley Acheson commented

2023-11-10 18:33:09 +01:00

Closing. All parts done that we wanted. We kept the font size the same but turned on the disambiguation set, open numbers, and tabular numerals, but not slashed zero.

Harley Acheson closed this issue

2023-11-10 18:33:11 +01:00

Blender Bot added the

Status

Archived

label 2023-11-10 18:33:13 +01:00

Sign in to join this conversation.

No Label

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

Inter Font Tweaking #112748

Default Sizes

Font Features

Other Text Style Options