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

[verekia]

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

Bolder

Comparison

[ssalka]

FWIW, I would expect such a feature to work as follows:

const enum FontWeight {
  Light = 300,
  Normal = 400,
  ...
}

interface TypographyProps {
  // possibly just "weight" for simplicity?
  fontWeight?: FontWeight;
  ...
}

const LightText = props => <Typography fontWeight={FontWeight.Light} {...props} />;

where any (valid) value passed to the fontWeight prop would override font-weight styles that come from e.g. the variant prop

[eps1lon]

I believe there is currently no way to change the font-weight with Typography.

There is with withStyles. https://codesandbox.io/s/oqvyznjw6z

You could also change the variants globally with a custom theme.

I'm skeptic about a component that should handle all possible typography related css properties. withStyles and custom theming is flexible enough to do that already.

[verekia]

@eps1lon and don't you think that's a lot of code just to make something bold?

With withStyles you don't have to do it on Typography you can apply the class to a <span>, or a <strong> or <b> for better semantic, but that's way too much code to achieve something so common and simple in my opinion. It's just that Typography is where that feature should be implemented.

Italics don't have variations so <em> or <i> are fine.

And text-decoration: underline is not as common as font weight variations I think.

[eps1lon]

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.

[eps1lon]

I think this is covered by our Box component and <Box fontWeight={500} />.

@oliviertassinari Do you think we can close this issue or is there something else we could do?

[verekia]

Box looks great, that definitely solves the problem for bold text.

That being said I think a good addition to Box could be text-decoration, mostly for underline and strikethrough:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text-decoration

If you think that's relevant it could probably be moved to a different issue though.

[eps1lon]

That being said I think a good addition to Box could be text-decoration, mostly for underline and strikethrough:

New properties can be proposed via PR to https://github.com/mui-org/material-ui/blob/5b25ed3bb0c3639f8ce8204e20ab1e354f63bde2/packages/material-ui-system/src/typography.js#L36

[oliviertassinari]

@eps1lon I think that using the system in the core components would completely solve the issue: #15561. +1 for closing this one.

[aprilmintacpineda]

Still not easy as of today. Suggested approach https://material-ui.com/system/typography/#main-content does not seem to work.

[BiggA94]

@aprilmintacpineda

The best approach to have both is currently using a Box with fontweight and inside it, use a typography with fontweight: inherit.

const styles = (theme: Theme) => createStyles({
    boldTypography: {
        fontWeight: 'inherit',
    }
});

... render() {
  <Box fontWeight="fontWeightBold">
    <Typography className={this.props.classes.boldTypography}>
      I'm Bold
    </Typography>
  </Box>
}
...

[aprilmintacpineda]

@BiggA94 fontWeight="fontWeightBold" would be unnecessary in your example, you can just use fontWeight: <Value>, right?

[louiidev]

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

[ydax]

Agree with Louis, though I do find that I often just need to make parts of Typography Components bold, which complicates things. Would it be possible to handle normal HTML styling tags inside Typography components? E.g.:
<Typography>Howdy, <strong>I'm bold</strong> but I'm not.</Typography>

[alexandermckay]

This will work:

  <p>
    Hello
    <Box component="span" fontWeight={700}>
      world
    </Box>
  </p>

https://codesandbox.io/s/bitter-haze-kwnrv?file=/src/App.tsx

[oliviertassinari]

@alexandermckay In v5, you will get:

<Typography sx={{ fontWeight: 'bold' }} />

where bold is taken from theme.typography.fontWeightBold, 700 by default. One part is dependent on #17615. Would it solve the pain?