I’ve built an app that looks great but only if you zoom out to 75%. I’m not sure exactly what I’m looking for, but just decreasing the font size for all the components doesn’t do what I want. For instance, how do I downscale the size of an entire dcc.slider or for a whole dbc.Card, while making sure the components still fill the same space? I tried adding body {transform: .75; transform-origin: 0 0; to my css, and while that helps a bit, it throws off placement of certain things, like tooltips for the slider.
I believe transform: scale is the way to do this, if at all: scale() - CSS: Cascading Style Sheets | MDN. As you mention, this may cause other issues in the app with tool tips and hover, etc. It’s not really a standard or well supported thing to do.
However, one thing to think about is browser sizes: it may look better slightly zoomed out on your screen size, but what about your users on larger or smaller monitors?
Another way to approach this is to change the font sizes across the board.