{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53f6516b847e1a972c6b13cef6c4f8a6ba169fae","tarball":"https://registry.npmjs.org/@material/typography/-/typography-3.0.0-alpha.1.tgz","fileCount":11,"integrity":"sha512-SGOW0y3YXJvkbhlIYgKmfAun9E+sz4WsljsXAWBT1sgxYfN8/kC4R5cW8eEb8mZ/WkwV4lifAAdn+YEVq6D87A==","signatures":[{"sig":"MEYCIQDd95AIEQ7218DwiTOzrD9BspWwJriHqgsf3AskVQHNVQIhAPJYVCr85IxK6AkztLTc8zT/T8LyOH59aDeu1VXefdW9","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\nwsFcBAEBCAAQBQJdAUwpCRA9TVsSAnZWagAAiZAP/RMWC9qHawbv64DedKCR\nXX/47+fDJHwW8Rp3za0hfIT0PS94rn9rZYBq9Df64ib762Ll5+XhVQjIlNPn\nuR1LOqVJOIHGNZ0SkVdOXDpnqlrSaDW31yb0iYJTfoeQgE2ZfgNsYbPU4SMi\nvpDLRyRdIYi7UG/hBXN48vscv19c/8/JNoXH6N/SBlqhsreiSls6I6UbDehG\npH24G8DWGQ+tWoUBo7BTC7OpJoJOWIRkyOzBzWqFgpmgXbxcNnHFpqWt/eiJ\ny91iQmaKV1LCivY4WlJoIqaT/p7Q09oXJL+xG3qTbMW4tKDG4jjCy/Lptw9x\nRISqEXjcdjG+iKQbbmJPra7NC6KADPPeznyfO4jlQxAgFE7Na9bRzyUIwtuG\nQ5DZ1ndJQKs8Im9/0I7tl0IEegNFYgo/xE5u5IFxjaqkc/ec1a2VLT2vw7eF\nU6+YFgnD9SuyTdOfrm4IYn39sNnYydJqzCaDtaf7CTxX6x4YBD8BgtqbOa9c\nBYXextTmcLVJ1YcIpAtZSdlQpvo9JrkVV4HYnwzlTxNaq2rwAU8xT9X+0P6g\nq9+NHz3uVj3MNLduWghyGH4tCANCBhsLCtgyMISZZ6uLz6ufQtrkgTyfnzQv\nn9QDZnRwbmkc9AkRz1VmfH175Mlg71O6VG5ow0YHpB1WZGF2RZBWYoLuVfQZ\nkOA1\r\n=8VsL\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":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","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.1_1560366120941_0.8607535807539393","host":"s3://npm-registry-packages"},"_id":"@material/typography@3.0.0-alpha.1","version":"3.0.0-alpha.1"}