Typography component or way to use typography styles

[fernandopasik]

Is your feature request related to a problem? Please describe.
I'm trying to style individual elements with the material typography guidelines.

Describe the solution you'd like
Implement @material/mwc-typography component

Describe alternatives you've considered
I've tried to import @material/typography/dist/mdc.typography.css to use the css classes in my component like .mdc-typography--body1, but I can't find an easy way or tool to include that style in my lit-html components

[fernandopasik]

My current workaround far from ideal is to use just the css variables

.my-class {
    font-size: var(--mdc-typography-body1-font-size, 1rem);
    line-height: var(--mdc-typography-body1-line-height, 1.5rem);
    font-weight: var(--mdc-typography-body1-font-weight, 400);
}

[asyncLiz]

This is definitely on our roadmap!

I would recommend a plugin/loader for your build system that can turn a CSS file into a LitElement CSSResult, and use that to import @material/typography in the meantime.

import {style} from '@material/typography/dist/mdc.typography.css';

You can then include the style CSSResult in your LitElement styles.

Alternatively, you can include the raw CSS string into a <style> tag of your component's render function. Not as ideal, but it may be easier to get a CSS-to-string loader set up than CSS-to-CSSResult.

[fernandopasik]

Thanks for the quick response and the suggestion.

Would it be another alternative to use a sass plugin and call the right mixin for the typography style (which mixin would that be)?

[asyncLiz]

Absolutely. You could transform Sass into your component's CSS. You'll want the typography() mixin and provide it one of the text styles.

@use "@material/typography";

.my-headline {
  @include typography.typography(headline1);
}

[Alos]

It would be awesome if this was implemented out of the box

[aress31]

@asyncLiz would you mind providing working code or a tutorial on the steps to follow to be able to use Material typography in MWC based project (without SASS, just following the open-wc standard)?

[aress31]

Any update on this feature? :)

[fernandopasik]

Is there a new strategy for typography in the new implementation yet?

[asyncLiz]

Is there a new strategy for typography in the new implementation yet?

I don't believe so, not yet 😔

That might need to be a 1.1 feature

[thekvd]

New to github so forgive if this is bad form. I created a CSS file with the defaults and some global variables suggested on the demo site. Not sure if this will be helpful for others but it was for me so I'm sharing it here: https://github.com/thekvd/material-web-typography/

[asyncLiz]

Long time coming, but this feature has been added. Check out our typography guide for usage docs!