Generally implement *Typo* for each component in V5

[true-perfect-code]

You can currently control the size of a label very easily via Typo. If you define your own setting variable here, you can enable the user to display all labels in a size that is ideal for them. This is an excellent method to enable accessibility:

<FluentLabel Typo="@UserMana.UserSettings.TypographyBody">Log out from the app</FluentLabel>

It would be great to have Typo on all components. A bad example is Accordion, because there the font sizes remain as they are, which is unattractive in the app when the labels change. In addition, you have to offer the user a second setting with which he can then also change these font sizes (for Accordion).

Another good thing would be to extend the typo values and, in addition to Body, H1...H6, possibly offer a few missing sizes as numbers (e.g. Size14, Size18 etc.).

Another possibility would be to offer a new component parameter, e.g. TypoSize, where you can pass an int for font size directly to the component.

pc

[dvoituron]

I don't think that's a good idea.

1. FluentUI Blazor v5 offers font size via Theme and CSS variables.
   For example

   --fontSizeBase100: 10px;
   --fontSizeBase200: 12px;
   --fontSizeBase300: 14px;
   --fontSizeBase400: 16px;
   --fontSizeBase500: 20px;
   --fontSizeBase600: 24px;

   You can easily change these variables if you do not want to follow FluentUI styles.

2. FluentLabel no longer has the Typo parameter

3. If you want to customize the text size, you will need to use FluentText.Size.
   https://fluentui-blazor-v5.azurewebsites.net/Text#size

[true-perfect-code]

Hi @dvoituron thank you for your response.

I believe there might be a slight misunderstanding. My main concern is not about how the font size is technically applied (e.g., via Typo, Size, or CSS variables), but rather about having a unified, consistent way to control font sizes across all Fluent components through a single user setting.

Right now, some components (like Fluent Text) expose Size, while others (like Accordion) don't reflect any global font size changes. This leads to inconsistent UI and forces developers to create multiple user settings just to manage font sizes across different components, which breaks accessibility and UX.

My suggestion is simply:
=> Ensure all components respect a centralized font size setting, regardless of how it's technically implemented (whether via Theme, CSS variables, or a parameter like Size).

That would solve both developer and user experience issues in a clean and scalable way.

Thanks again for considering this!
pc

[dvoituron]

With the new version of WebComponents, ALL components are based on common CSS variables. Simply change a value from :root and all components will be adapted.

You can already test it on the website: https://fluentui-blazor-v5.azurewebsites.net/

[true-perfect-code]

Excellent !!!

Thanks