{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfc10b0829d2109f3cab753ee7927fe4851659f0","tarball":"https://registry.npmjs.org/@material/typography/-/typography-1.0.0-1.tgz","fileCount":10,"integrity":"sha512-9sK0oasw10ric0SotFtnc3OIN5i8ldGSCARTc3+Q4hjmIhaubyGF1PuCVJhfTDLuKeZO0NxkG94CxrlpCN/1Vw==","signatures":[{"sig":"MEQCIFwO9BDPsloHnfutyNwmOdDqg7GVTYYIW+fHflpFb65gAiBHBVbrcjufTlGuaYuE+H8nHcrLO00c2gbHYbtcT7gOOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":46746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbWwCRA9TVsSAnZWagAAjboP/jyjaqp7qDIXXXQXmDzu\njcPvt+B7NIpwxqjIInkoER5QNnT19LXlbfIjCdyUbjjHomvzzuVbNlnAwGNm\nSHgn60A0c3rEq8xRCo8iCfyFiNtC8efQqEAp3XYFW62fSPEsg+DPZ3hLDnX7\nt9g3OQrpoKR2vVCSQ0d98ePCvKqfBXx6xKqnw7+p0VXHsohHueEngJbtw5Iw\ny4uoMnREE3xYw92Pu0Gb6uLlD3CF/+L9pCz1E44bDMGyzO0eUdTsAON0Zx31\n83afo7z0/+bSqz8RkX082bO4tqdEnhJcWtZXR/yB156Sg4jBR61uC4Shm3eC\nJsmb7CulA7Vc/xGRmtGXBH/u2E2pj3BmjXBYKhqG3ELCi2rT2elf88DxZHTE\n+vh5kdn2c46QvIGiylQFHURLf7dW4wOhiby9qY1RPW/veIfu4DGLiijevRYo\nUuWnNHhbYy+GLhxGnzSnnpLq60xcARDW+uktoDoovrOlMwPE5+wr6qK0nLSl\nxgKhaFr+DnkR2NV0C6cWCdZhBWklvLjIDhgeaz38W/cSZdBEoio5Fo17wkLQ\n8xAzQfuyicrbwk3b8IHUWdil8ZNIA11xoOBc4ewhXbu5EtHPlhBFHyBmXYJy\nmGHgSQb8ymftE4BQPygL9IhO6SyEz3aCmiouI4xAxqsUWHRyk7XKVO5d72Rj\nN1Vr\r\n=0WhV\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: \"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","license":"MIT","_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.7.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":"10.9.0","dependencies":{"@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_1.0.0-1_1551742384080_0.07306739612472612","host":"s3://npm-registry-packages"},"_id":"@material/typography@1.0.0-1","version":"1.0.0-1"}