Componets are all too big relative to angular.material.io

[grapevinegizmos]

What are you trying to do?

Using Angular material for a while now, but for some reason the visual sizing of all the components in all of my apps is about at least 50%-75% larger the the same elements rendered in the examples on angular.material.io. As you know it is non trivial to resize the elements, is there any way to apply some setting to make things the same size as on the angular material website? By way of example here are some screenshots, taken from the same browser just my page versus angular page: Note the "+1" in the screenshot is a but renders larger than the shown on your website.
Similar issues with other controls: ("Binding Type" is in a element and the text below is -- compare to screenshot taken from the material website of a mat card with a title and subtitle.

What troubleshooting steps have you tried?

No idea how to approach this. Fiddling with css directly seems like the wrong approach, as changing height/width of buttons doesn't shrink text.

Reproduction

This is a screenshot for size comparison from your examples with a title and subtitle.

Environment

Angular CLI: 13.3.3
Node: 16.14.2
Package Manager: npm 8.5.0
OS: darwin x64

Angular: 13.3.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.1303.3
@angular-devkit/build-angular 13.3.3
@angular-devkit/core 13.3.3
@angular-devkit/schematics 13.3.3
@angular/fire 7.3.0
@schematics/angular 13.3.3
rxjs 7.5.5
typescript 4.6.3

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}