-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs-bug(Typography): It isn't clear how to customise Material 3 typography #29214
Comments
I agree this is an area of improvement, in the meantime the customizable fields are here: https://material.angular.io/guide/typography#configuring-typography. This is how you apply it to your theme: https://material.angular.io/guide/theming#defining-a-theme |
@amysorto But what about font-size, line-height, font-weight of specific typography levels? |
Ok, I could customise it by overriding css vars at least like this:
however it is a partial customisation it would be better if we could customise it more globally |
Another option could be to enable system variables for the theme and then only change the system variables. |
@crisbeto thanks, funny thing I didn't find docs on system variables on the official Angular material website but found it here https://angular-material.dev/articles/angular-material-theming-css-vars Is it considered as a bad practice? Or are documents just not completed? |
System variables are supported, we just haven't gotten around to writing a guide for them. |
@crisbeto thank you, having a guide for that would be really helpful |
Couldn't agree more the M3 custom schematic documentation is just as bad if not worse. In the age of AI, there's no excuse for such horrible, incomplete and just flat wrong documentation. Either be professional, or stop publishing libraries with crap docs. |
I wrote an article about modifying typescales using CSS variables. You can read it here: https://angular-material.dev/articles/angular-material-18-typography |
The current generation is causing the font sizes to come in smaller than expected. The default size is expected to be right at 14px, but instead, --sys-label-large-size (for example) is set to 0.875rem, and works out to 12.5px instead of the 14px it used to be. So, everything looks small on the screen. Really don't want to go through and manually set all the variables for this... |
This is what I'm using right now, though it lacks granular level control
|
I am in the exactly same situation. thanks |
Documentation Feedback
Material 2 docs were pretty clear about how to customise typography.
The current page called "Customizing Typography" doesn't have an information on how to customise it at all. It describes the usage only.
Migration guide isn't answering this question as well (https://material.angular.io/guide/material-2-theming#how-to-migrate-an-app-from-material-2-to-material-3).
Affected documentation page
https://material.angular.io/guide/theming#customizing-your-typography
The text was updated successfully, but these errors were encountered: