tweak fontsizes

[Jay-o-Way]

Description

Just small changes

Motivation and Context

• Do not to use font-size 14 on icons, they are designed with 16px in mind.
  • only change properties when needed, but at the very minimum use the "rule-of-4"
• Quote from the app: "The minimum values should be 12px Regular, 14px Semibold"

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

[karkarl]

Hey Jay-o-Way! Thanks for your contribution. Do you mind adding more detailed before and after changes photos in your PR description?

[Jay-o-Way]

@karenbtlai done. Visually, it's absolutely minute. More a matter of principle and design/code habits.

[niels9001]

@Jay-o-Way @karenbtlai

Synced with the design team, and by default we should adhere to using 16/24/32/48 as @Jay-o-Way pointed out.

However, FontIcon/SymbolIcon uses 20 by default (I always was under the impression it would default to 16, like normal text..). So we still have to manually set these to "16".

Chart for comparison (as @Jay-o-Way pointed out, 14 causes blurriness on higher resolutions screens):

This is also inline with icons in e.g. the Start Menu or systemtray:

Also visually checks out in Figma:

@Jay-o-Way Great catch, we probably need to update the icon sizes for the PowerToys flyout as well to 16 instead of 14.

[Jay-o-Way]

FontIcon/SymbolIcon uses 20 by default

Could that be, because of a style somewhere, perhaps?

[niels9001]

FontIcon/SymbolIcon uses 20 by default

Could that be, because of a style somewhere, perhaps?

Yeah, I'm guessing this might be from the pre-WinUI era where in general icons and fonts were bigger.

[marcelwgn]

@niels9001 Feel free to merge this if it's fine now (I think you have much more knowledge on this matter than me)

[niels9001]

@Jay-o-Way

Icons seem to be vertically off center now..

Edit: looks like it's the link icon. Adding a top margin of 2 on the FontIcon should resolve this?

[niels9001]

Thanks