Calcite-components: calcite-label: update font sizes for various scales so it fits to default text size

[AdelheidF]

Summary

With calcite-label currently scale=s uses font-size: 12px, scale=m uses font-size: 16px, and scale=l uses font-size: 20px. The default font size for plain text in a panel is 14px.

If I display some plain text in the panel and then a label with a switch I have to decide between smaller and larger text. But I'd like to keep the text size the same.

My assumption here is that the calcite-block-section header changes to 14px... Not sure that's correct.
But that doesn't really affect the calcite-label font sizes.

Actual Behavior

Expected Behavior

Reproduction Steps

1.

Relevant Info

[asangma]

Looks like we may need to tweak the label and input scales or something so that the typographic hierarchy makes sense when an label + input is inside a Block which inside a Panel.

See also #1134.

[macandcheese]

Possible to make panel text 12px, panel header 14 and slightly bolder? Like the GH PR sidebar lockup but larger title area?

[AdelheidF]

text+label as 12px, block and block-section headers as 14px:

[asangma]

@macandcheese
Panel heading will be 16px demi.
Block heading will be 14px demi.
Block section heading will be 14px regular.

[asangma]

We generally avoid going as small as 12px for legibility/accessibility concerns.

[macandcheese]

Are those documented somewhere? Fine for now but would be great to look at ways to reduce size of some of these panels with a lot of controls.

I know Mapbox goes to 10px / 12px for basically their entire Studio product since folks can just increase browser size. Avenir would probably only work at 12 but 14/16 seems like it takes up a ton of room as in screenshots above. Topic for another day I guess.

[asangma]

Some fonts do work nicely at 12px. Avenir is not great below 14 or 13px.
Our pattern is not documented anywhere in a comprehensive way.
We should do that.

And yes...a rich topic that we should discuss.

[asangma]

As far as the layout in the panels, we'd rather err on the side of using vertical space to keep things legible.

[asangma]

@macandcheese @bstifle @mitc7862 @bpatterson88 @paulcpederson
I feel like the UI issue we're seeing here is more about the 4px increments that the label component scale is indicating for each of its type scales.

In our panel interfaces, that 14px (0.875rem / text-sm / fontSize.-1) size is used pretty regularly. And the contrast with 14px + demi or with 16px (1rem) works well.

I can start a separate issue for a broader proposal on this if you like.

As a note: we can always set an inheritable font-size at the CalcitePanel level for any un-styled child text that is not inside a component.

[asangma]

@AdelheidF Murged.

| scale | font-size |
|------:|:---------|
| small | 0.75rem (12px) |
| medium | 0.875rem (14px) |
| large | 1.125rem (18px) |

[bstifle]

[AdelheidF]

This got merged 4 days ago but the latest next is from 6 days ago. When will it be part of next?

[AdelheidF]

calcite-label scale=m now uses font size 14px. Verified locally using next.30.