Font mismatch among different controls

[runiter]

Different controls seem to have different default fonts.
See the font size and color of Label vs Button vs Checkbox vs ChoiceBox vs TitledPane:

[MairwunNx]

Work in progress.

[dukke]

I think it's normal to have some font size differences between some of the controls, like for instance TitledPane vs Label. TitledPane is like the header of a section.
However, font size differences between, for example, checkbox and combobox, might be indeed an issue.

[MairwunNx]

@dukke yes. it problem, i try it fix.

[runiter]

Indeed it might be okay for TitledPane font to be different. But I figured I include it so we check with Fluent Design to see if we got the font size correct. Not sure if Fluent Design has a TitledPane but if it does it would be good to ensure the font follows the standard.

[dukke]

Indeed Fluent Design doesn't have a Titled Pane.

On another note, JMetro is heavily inspired by Fluent Design and we usually follow it, but if we think we can do better, even if it means not following FD rules on occasion, we won't follow those FD rules.

[runiter]

Makes sense.
Curious though, is there a particular example of a situation where you decided not to go the Fluent way?

[dukke]

There's various controls that don't exist in FD and exist in JMetro.
I can't really remember all occasions where FD wasn't followed, the shrink press animation of buttons might be such an example. JMetro's effect is slightly different.

[dukke]

.. another one I remembered are the icons in PasswordField and TextField that appear when you've entered text in them, for showing the password and clearing the text respectfully.

[dukke]

I've pushed this #65
This theme tester will work as a framework to fix this alignment, size, fonts problem.
This tester will also be good to test other things.

[dukke]

..to be more precise there's a "Alignment test" tab that has various controls layed out and shows how they align with each other.

[runiter]

Thanks for the update. So if I understood correctly it hasn't been fixed yet, but a Test is added to help with fixing?

[dukke]

Yes, that's it.

A test app to test that all controls line up.

The default size will probably get smaller to be better for people that are transitioning from Modena, in that case the size change won't be so different.

I'll be working on this on this weekend.

[runiter]

I think it's okay for the default size not to match Modena as long as it matches Windows Fluent defaults. Does Windows Fluent provide default size spec?

[dukke]

Fluent Design default specs are too big, I think.

Developers have complained about this and that's why they'll be providing a compact mode. When they're building apps with FD everything is too big and not ideal for desktop productivity apps.

My thought is that JMetro will follow the inverse approach, start small (like the default Modena size) which is usually what developers building desktop apps want. And if you want to make things bigger you just have to add an initial statement at the root class to define a bigger font size:

.root {
  -fx-font-size: 14px;
}

Everything will adjust and get bigger (font size of controls and padding).

I think there's a reason why FD has bigger controls and font size by default. Microsoft's desktops and hardware have touch capabilities as well as mouse and keyboard input. A Microsoft surface laptop can both be used with mouse and keyboard or detached and used through touch. Touch requires controls to be bigger so that they can easily be manipulated though touch. This is why I think they make everything bigger so that it can be both used though touch or with the mouse and keyboard.
However most machines don't have this and as such I believe this is not the best solution given the biggest percentage of non-touch enabled hardware out there. And the fact that most desktop users probably just use the mouse and keyboard.
When just using mouse and keyboard it is inefficient to have controls that are big. The mouse allows you to more precisely click on touch targets.
Making things smaller allows the app to show more information at a time.

[dukke]

This has been fixed on release version 5.4.
Please test and provide feedback
Release notes: https://github.com/JFXtras/jfxtras-styles/releases/tag/5.4

Thanks,

[runiter]

Awesome, thanks!
You have good points about the use of mouse not requiring large controls. But although most people don't use touch screen, with the high resolution monitors these days, the Modena controls may seem small. Also the modern look seem to demands larger controls these days. Even if I don't personally agree with it, it seems that users think the UI is outdated if the controls are small. Last but not least, it would be nice if there is a match between the UI of my app and the UI of other standard windows apps in terms of both font and control size.
Thanks again for the latest update. I'll try it out and will return with my feedback.

[dukke]

If you so desire, you can quickly change to a bigger size by doing what I said above and in the release notes. Just one simple instruction and all should hopefully work.

Usually in big monitors, on Windows, I need to change the scaling of controls for that monitor in Windows settings. Even for other apps and even for Windows itself. Because like you say the size of things is too small for these monitors.

Thanks,