[Typography] Make it easy to change the font-weight
See original GitHub issueI believe there is currently no way to change the font-weight
with Typography
.
With Roboto, we have access to 4 font-weight variations:
- Light
- Normal
- Bold
- Bolder
When using <b>
or <strong>
, the browser defaults to the bolder variation (which is too bold and inelegant in my opinion). To use the bold font-weight: 500
or the light variation, we have to create custom styles.
It would be neat if Typography
supported changing the font-weight
, or if there was a FontWeight
component of some sort.
I have implemented it here.
- This is a v1.x issue.
- I have searched the issues of this repository and believe that this is not a duplicate.
Examples
Bold
Bolder
Comparison
Issue Analytics
- State:
- Created 5 years ago
- Reactions:18
- Comments:15 (6 by maintainers)
Top Results From Across the Web
[Typography] Make it easy to change the font-weight #12704
I believe there is currently no way to change the font-weight with Typography . With Roboto, we have access to 4 font-weight variations:....
Read more >Typography - MUI System
Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
Read more >How to add custom font weights to Material UI? - Stack Overflow
Ignore the Typography element. See the code example below <Box fontWeight="fontWeightLight">… <Box fontWeight="fontWeightRegular">…
Read more >font-weight - CSS: Cascading Style Sheets - MDN Web Docs
The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently ...
Read more >How to Make MUI Typography Text Italic, Bold, or With Ellipses
MUI Typography font weight can be set to bold by adding fontWeight: bold value to the sx prop. Here is example code: <Typography...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I think that this component should only implement the material design typography spec. The spec lists different variants with various combinations of weight and size. Everything beyond that should belong into userland and can be done easily thanks to reacts composition model.
Please, this would be great and would make a lot of sense, just to pass a prop to the Typography component