question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Typography] Make it easy to change the font-weight

See original GitHub issue

I 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 screenshot 2018-08-30 00 03 24

Bolder screenshot 2018-08-30 00 03 41

Comparison screenshot 2018-08-30 00 10 41

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:18
  • Comments:15 (6 by maintainers)

github_iconTop GitHub Comments

21reactions
eps1loncommented, Aug 31, 2018

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.

10reactions
louisgjohnsoncommented, May 11, 2020

Please, this would be great and would make a lot of sense, just to pass a prop to the Typography component

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found