{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd153798da5a7ecfb97ae3e7b5a26e6e3be7c928","tarball":"https://registry.npmjs.org/@material/typography/-/typography-3.0.0-alpha.0.tgz","fileCount":11,"integrity":"sha512-W3MZTw0kKo4L5LKWoVMDOnd+9YgGfO0EPSiDhxnLqce7+fQ8F5knfdNRcMS20tlKJtGTKpJlqphmSpDJxrlRkw==","signatures":[{"sig":"MEUCICDChssw/Nu2HcCiknInDW1uTsq92Wwt51jNgfTPcLeMAiEA8LjJMq4rvYeLV9khzVZEkN2z9XfqazPDI8V+3fSaG04=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpNCRA9TVsSAnZWagAAeGQP/17gh9RijxCuhpZRIxfj\nZgZEqOqF+2/sMr0Og+BgdbPI+ZOP3Vg1lqadeu5/vGcxHpiCarHusGdfvAqJ\n1npwwwD9LsDtpxsaDAoApqU7LiqXoXG0IopR2YlgQcjmZIqw9+6TqpEsTmpl\n0aYRruuiFQIqIZuGUjZxUZ7emIuGcxC6q5FKMj/N54S335Z957VpIFl08Be7\npdhpPdsCv3xcsLGGbfLjMOQsMrVir10eq7g0RjnoPigBszmPc/RgtRrDdBEs\nRuVxWsKvjjfk0S/zlk9/ONyr1dX4KEPG4SZSHtiQSgrY67nPB2ObIT7kxg3Z\nKlkKYygEDP2YE7AiBvMpwwc+xuWRvFG/iSh/hV45Kf8oE5q0SCtJIlAymdO7\n32c52SenPvcrm32z3R/5s4kF+nuN1Homg4wPhgkwGPQveMkEzbSs019SJi1Y\nqiMLc2wVeKrf0ihVTL2Ebnm5SrY4MbZoNOpnPwLR0jf+eqi0wzCOPuyJmk5O\nX0qLG5F/DACQvzH2a4s1jVZw2rjsqWyh6rVXR0kRbbZY5F1YbAFvWv75MD6t\nXfwl1YkJ5HoieFZnxsd1wBfjTm2OO7Zx/CHdjy/pnUgTWfS6JZjMfq48ELD8\nAroappRpqoHMeuLAfsS1MJh+1feZ4MHvvw4ylTFOItCMWFJmspHCAnCTeYWy\nYyMD\r\n=T+/c\r\n-----END PGP SIGNATURE-----\r\n"},"name":"@material/typography","readme":"<!--docs:\ntitle: \"Typography\"\nlayout: detail\nsection: components\nexcerpt: \"Typographic scale that handles a set of type sizes\"\niconId: typography\npath: /catalog/typography/\n-->\n\n# Typography\n\nMaterial Design's text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.\n\nMDC Typography is a foundational module that applies these styles to MDC Web components. The typographic styles in this module are derived from thirteen styles:\n\n* Headline 1\n* Headline 2\n* Headline 3\n* Headline 4\n* Headline 5\n* Headline 6\n* Subtitle 1\n* Subtitle 2\n* Body 1\n* Body 2\n* Caption\n* Button\n* Overline\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-typography\">Material Design guidelines: Typography</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/typography\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/typography\n```\n\n## Basic Usage\n\n### HTML Structure\n\nWe recommend using Roboto from Google Fonts:\n\n```html\n<head>\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500\" rel=\"stylesheet\">\n</head>\n<body class=\"mdc-typography\">\n  <h1 class=\"mdc-typography--headline1\">Big header</h1>\n</body>\n```\n\n### Styles\n\n```css\n@import \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### CSS Classes\n\nSome components have a set typographic style. For example, a raised MDC Card uses Body 1, Body 2, and Headline styles.\n\nIf you want to set the typographic style of an element, which is not a Material Design component, you can apply the following CSS classes.\n\nCSS Class | Description\n--- | ---\n`mdc-typography` | Sets the font to Roboto\n`mdc-typography--headline1` | Sets font properties as Headline 1\n`mdc-typography--headline2` | Sets font properties as Headline 2\n`mdc-typography--headline3` | Sets font properties as Headline 3\n`mdc-typography--headline4` | Sets font properties as Headline 4\n`mdc-typography--headline5` | Sets font properties as Headline 5\n`mdc-typography--headline6` | Sets font properties as Headline 6\n`mdc-typography--subtitle1` | Sets font properties as Subtitle 1\n`mdc-typography--subtitle2` | Sets font properties as Subtitle 2\n`mdc-typography--body1` | Sets font properties as Body 1\n`mdc-typography--body2` | Sets font properties as Body 2\n`mdc-typography--caption` | Sets font properties as Caption\n`mdc-typography--button` | Sets font properties as Button\n`mdc-typography--overline` | Sets font properties as Overline\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`mdc-typography-base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`mdc-typography-overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`mdc-typography-baseline-top($distance)` | Sets the baseline height of a text element from top.\n`mdc-typography-baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `mdc-typography-baseline-top` when setting baseline distance to following text element.\n\n> **A note about `mdc-typography-overflow-ellipsis`**, `mdc-typography-overflow-ellipsis` should only be used if the element is `display: block` or `display: inline-block`.\n\n#### `$style` Values\n\nThese styles can be used as the `$style` argument for the `mdc-typography` mixin.\n\n* `headline1`\n* `headline2`\n* `headline3`\n* `headline4`\n* `headline5`\n* `headline6`\n* `subtitle1`\n* `subtitle2`\n* `body1`\n* `body2`\n* `caption`\n* `button`\n* `overline`\n\n#### Overriding Styles\n\nAll styles can be overridden using Sass global variables _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`. The variable should be assigned a map that contains all the properties\nyou want to override for a particular style.\n\nExample: Overriding the button `font-size` and `text-transform` properties.\n\n```scss\n$mdc-typography-styles-button: (\n  font-size: 16px,\n  text-transform: none,\n);\n\n@import \"@material/button/mdc-button\";\n```\n\nExample: Overriding the global `font-family` property. \n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n...\n@import ...\n```\n\nExample: Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n```scss\n$mdc-typography-styles-headline1: (\n  font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n$mdc-typography-styles-headline2: (\n  font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n  font-size: 3.25rem\n);\n\n...\n@import ...\n```\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","typography","font"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_nodeVersion":"11.9.0","dependencies":{"@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_3.0.0-alpha.0_1560312396515_0.3480322771822095","host":"s3://npm-registry-packages"},"_id":"@material/typography@3.0.0-alpha.0","version":"3.0.0-alpha.0"}