{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ea4f050cdc0f2a3da1e7c825e33f0e34575d783","tarball":"https://registry.npmjs.org/@material/typography/-/typography-0.39.0-0.tgz","fileCount":8,"integrity":"sha512-fU9YsB+nDYeufIaXy7kw1vQqxOpJ4rPz9xONCTuqQAWw0+sQppQ6e8A4umkXxhHivbbpem78TQvYNGRXvaAI5g==","signatures":[{"sig":"MEUCIQCq74fAQmm8AzRwpyiGHnLtXqKuRdPXoqmeADGh7c1wkwIgPET6/foiqk2X+zkjrZ/9u5LOtur+RHyMhvQBrPfUcyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZUoCRA9TVsSAnZWagAA+WUP/Rh0zNjemfarYJapjQ9r\nA8egVP5E1gjDnajYwf42RhBuwC+LZncc0H1Q8tMGlzNWrQb22dLX3Bfbw7qA\nz21n/+uk38DvA8GORwz3BzpIakTqhgF3he9aGBuP/tOOwMTjRnlhQbrw/xIF\nkRfIFOoqqhG/L2NRZLbl5GHKzylXeduSozUwbTfqsUncECMFLvqFtHwq9rix\nS5C9mL7IcKY4qfjLjPMsG414IPORBW5ezhtgE+Ul3fE0UNzu+6BXZk4Cnwr4\nHoOWQZZThN1rA04NXJ63xureBB/TLwltMgkjt9I6rIX0hKdOPWN8uzVGzYwt\n6OT2EFLVAlM4qX238TzCa3/mURjkOo3+P38VnK3GN0l4G6zjlLeZkyO83VL2\npeAPwC5Ksl4zZzSzv4TgrREI87hx1lDHIBssSf577mTNVbbCv4zUKfyVPZox\nYgAn+WknaGfCY35RMJWd8Q0364/v2ndiHkkmBnxTYPv2NCYztMfU5WCQD2FF\nFjBw/pk2s8SHDCY/K1+PvuM0IEnmP6pQX7hTHNNyXhxPpkI2pbRq0eL8e9fl\nJ0GPoWX06loEWmYJoaQoy5Ye0eyWl1qZqEYFVL71DC/4f7NgWxZ8dPKFkmX4\nJanvD7gG2yjRG76tea3s+A3yCLNvsln1v+5heWqP3D7X4Dfv7kJ+y+7sxvl0\nD3ZE\r\n=YFTL\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 you load 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: \"Arial, Helvetica, sans-serif\";\n\n...\n@import ...\n```\n\nExample: Overriding the `font-family` property for `headline1` and `headline2`.\n```scss\n$mdc-typography-styles-headline1: (\n  font-family: \"Arial, Helvetica, sans-serif\";\n);\n$mdc-typography-styles-headline2: (\n  font-family: \"Arial, Helvetica, sans-serif\";\n);\n\n...\n@import ...\n```\n","license":"Apache-2.0","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@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":"6.4.0","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":"8.11.1","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_0.39.0-0_1534432552081_0.38264071395282073","host":"s3://npm-registry-packages"},"_id":"@material/typography@0.39.0-0","version":"0.39.0-0"}