{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23ad7eb7c9789e69c7c3fa54df8fc311cd7fc4b1","tarball":"https://registry.npmjs.org/@material/typography/-/typography-0.35.0.tgz","fileCount":8,"integrity":"sha512-7uXybSQToQCgB19RT0Pq47NkXSSojpbccVAObw/7fmfNUTcr3elNc8iPS/f1slYDTDEdyqM7hCreLcfZQK8ATQ==","signatures":[{"sig":"MEUCIQCsEO96BtokeSD3qBWShRJPTFg8hoPHcjxBbCYWKulFFgIgZeW94SSK97hzxrzVNMgI9QcE0YzfOY2J4EewFwl0IVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mD9CRA9TVsSAnZWagAAn1QP/3BhqveyGzGPX8xiJPV9\nAz3sAeoVaNMkQE1Jnkkmei+RTPeG99C7LneyiK4j0B9tTJXuQwEfmxpX6JBT\nOtbnXRROETw7LKZPnSc+gSYSPwsY4BkZejqNoQNkqviYofkpur3rs7Iouwrr\nyUONwQ72/AxlWepghminRJ6+engJ+ytbY6DcukbDPMaKnwiFN+Ahip+OlLIM\nkCwlSvP38AFQqh1Zu2QvVvtCKhwAu/AO4lOr4Lj+LquYNQN0iIeaJV9iJeu6\nUILtsfclq/j/4ZtpYfy/YEP4eZvfpzAjy8OIjr+ryY1tSpVMZDhd87ZKB/Ox\nkbUAdNpzAYMTi5JIFmQccgvmbf8T/zXSnd3Md9sSTsMWlmO/yz6rnvtxUp9n\nUeWAdPLwVc8vfW6H9dHzcyKHdNYjM4cGWXb37dBbhIMMZ9iCvWwuI5o9ahXj\n8PvpFuN1WN0w2KtPM0721d0Z3a3crstoYMXcu59Oq3kL6W23grH4Z+C9tRTP\nfg6VgMSanNuvHGkIqIQJTvepo800rNYJpiCLjpUw3Q2AalI7cc32BQyVZaeN\nYWn1ik0A35NlfqLWJqYvg0AjxF/rlNVwCIbTyh+IESXT/KqjOWAYOWtYlwIA\nSmdJv9myYR8BfaYMv0X+YJMYajdsAQ9PRaZtcZNwFoP6MBFoVdC0RktWqgbv\nGLtr\r\n=jUS1\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/guidelines/style/typography.html\">Material Design guidelines: Typography</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components-web.appspot.com/typography.html\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/typography\n```\n\n## Usage\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### 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\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":"bonniez","email":"bonniez@google.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":"5.6.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":"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.7.0","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_0.35.0_1524523260794_0.360335562517214","host":"s3://npm-registry-packages"},"_id":"@material/typography@0.35.0","version":"0.35.0"}