Components: Incorrect button and toolbar font weight

[aciccarello]

Bug report:

According to the Material Design Typography spec, buttons and the app bar should have medium font weights. However, if the correct Roboto fonts are included, they appear bold. This does not appear on the Angular Material site because the Roboto 500 font weight is not included.

What is the expected behavior?

The button and toolbar typography should have a font weight of 400.

What is the current behavior?

The button and toolbar font weight is set to 500

What are the steps to reproduce?

1. Create an app that uses the toolbar and buttons (see StackBlitz starter)
2. Include the Roboto font weights in index.html
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

What is the use-case or motivation for changing an existing behavior?

To align with material spec.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

angular: 5.0.0
material: 5.0.0

Is there anything else we should know?

Downstream issue Teradata/covalent#1012

[crisbeto]

500 is the medium font weight. Google Fonts for reference:

[kyleledbetter]

@andrewseguin I see you closed the issue, but the official Material Design site and Polymer paper toolbar use font-weight:400 for toolbars

https://material.io/guidelines/components/toolbars.html

https://www.webcomponents.org/element/PolymerElements/paper-toolbar/demo/demo/index.html

Are those two wrong?

Also, the Angular Material site isn't even loading the 500 weight, it uses <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono:300" rel="stylesheet"> which has the appearance of 400

Is that wrong as well?

[andrewseguin]

Apologies - read the thread incorrectly, re-opening for investigation

[crisbeto]

@kyleledbetter I think that this is open to interpretation since there are no exact values in the mockups. While the official site does use 400 for the toolbar, MDC, which is the Material implementation that they're linking to, uses 500 as a font weight. Closing the issue for now, but we can keep the discussion going.

[kyleledbetter]

@crisbeto fair points, the thing that's driving me nuts is that 500 in MDC's toolbar is rendering differently than 500 in Angular Material's toolbar... but i can't figure out why

¯_(ツ)_/¯ i'll keep researching

[angular-automatic-lock-bot[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._}